Flutter进阶—布局方法演示

Flutter进阶—布局方法演示,第1张

概述Flutter的布局机制的核心是控件。在Flutter中,几乎所有的东西都是一个控件,甚至布局模型都是控件。您在Flutter应用程序中看到的图像、图标和文本都是控件。但是您看不到的东西也是控件,例如排列、约束和对齐可见控件的行、列和网格。 您可以通过编写简单的控件来构建更复杂的控件来创建布局。例如,第一张图片显示了3个图标,每个图标下方有一个标签。第二张图片显示视觉布局,显示1行3列,其中每列包

Flutter的布局机制的核心是控件。在Flutter中,几乎所有的东西都是一个控件,甚至布局模型都是控件。您在Flutter应用程序中看到的图像、图标和文本都是控件。但是您看不到的东西也是控件,例如排列、约束和对齐可见控件的行、列和网格。

您可以通过编写简单的控件来构建更复杂的控件来创建布局。例如,第一张图片显示了3个图标,每个图标下方有一个标签。第二张图片显示视觉布局,显示1行3列,其中每列包含图标和标签。

下面是是此控件的控件树图。

注意用粉红色标识出来的Container(容器),容器是一个控件,允许您自定义其子控件。当您要添加填充、边距、边框或背景颜色时,使用Container(容器)来实现这些功能。

在此示例中,每个Text(文本)控件都放在Container(容器)中以添加边距,整个Row(行)也放置在Container(容器)中以在行周围添加填充。

此示例中的其他用户界面由属性控制,使用其color属性设置图标的颜色,使用Text(文本)的style属性设置字体、颜色、加粗等。Column(列)和Row(行)可以指定子控件如何垂直或水平对齐的属性,以及子控件应该占用多少空间。

总结

以上是内存溢出为你收集整理的Flutter进阶—布局方法演示全部内容,希望文章能够帮你解决Flutter进阶—布局方法演示所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1002631.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存