Flutter 布局

1. 本文内容选自flutter中文网

2. 创建静态资源文件
   在pubspec.yaml 文件里开启assets ，并在根目录里添加images，来引用images里的资源文件。
   注意可能的报错：
   Expected a key while parsing a block mapping.
   这是因为pubspec.yaml文件里assets的缩进出问题了，按照规则修改前面的空格。

3. 重点
   布局一个 widget：

• 即使应用程序本身也是一个 widget。
  Flutter应用本身就是一个widget，大部分widget都有一个build()方法。在应用程序的build方法中创建会在设备上显示的widget。

• 创建一个widget并将其添加到布局widget中是很简单的。

• 要在设备上显示widget，请将布局widget添加到 app widget中。

• 使用Scaffold是最容易的，它是 Material Components库中的一个widget，它提供了一个默认banner，背景颜色，并且具有添加drawer，snack bar和底部sheet的API。

• 如果您愿意，可以构建仅使用标准widget库中的widget来构建您的应用程序。

在Flutter中，只需几个步骤即可在屏幕上放置文本，图标或图像。

1. 选择一个widget来保存该对象。
   根据您想要对齐或约束可见窗口小部件的方式，从各种布局widget中进行选择， 因为这些特性通常会传递到所包含的widget中。这个例子使用Center，它可以将内容水平和垂直居中。

2. 创建一个widget来容纳可见对象

widget的child属性：
所有的widget都有一个child属性或者children[]属性。
用这个属性来嵌套组合。
有些像设计模式中的组合模式。
如将一个text嵌套入一个center中

new Center(
  child: new Text('Hello World', style: new TextStyle(fontSize: 32.0))

4. 布局

• 对齐
  row从左往右是mainAxis，column从上到下是mainAxis。 然后辅以crossAxisAlignment。
• 调整
  使用expanded ，用flex指定弹性空间。
  如果因为重绘导致空间大小发生变化，可以在外面包裹一个SizeBox，并设置宽度，防止因大小发生变化产生的抖动。
• 聚集
  使用MainAxisSize.min，来紧密聚集，否则会分散聚集
• 嵌套
  通过children[] 来完成嵌套。
  每个widget都有child属性和children[] 属性。