Flutter进阶—布局方法演示

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

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

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

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

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

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