Flutter 布局

布局步骤

1. 抉择用来包容组件的布局组件，比方 Center、Container、Row、Column 等

   • 居中显示 抉择 Center
   • 多个组件放在一行 抉择 Row
   • 多个组件放在一列 抉择 Column
   • 增加各种盒子款式 抉择 Container

2. 创立用来包容可见内容的组件，比方 Text、Image、Icon 等

   • 文本 Text
   • 图片 Image
   • 图标 Icon

3. 将可见组件增加到布局组件里，通过传递给其余属性 child 或 children

   • 如果包容单个组件 例如 Center、Container，抉择 child
   • 如果包容多个组件 例如 Row、Column，抉择 children
4. 将布局组件增加到页面组件里，个别在其 build 办法里实现

程度和垂直布局

• 程度和垂直布局是常见的布局，可别离应用 Row 和 Column 来实现，并且他们是能够相互嵌套的
• 对于 Row 和 Column，能够管制其主轴和穿插轴方向上 子组件的对齐形式
• 应用 Expanded 组件来管制子组件的绝对大小

罕用布局组件

规范布局组件

• Container 给组件增加填充、边距、边框、背景色等装璜

  • 只能蕴含一个组件
  • 设置背景色彩或图片

• GridView 可滚动的网格

  • 用于二维列表
  • 当内容超过渲染区域时将主动滚动
  • 如果须要晓得单元所处的行和列，请应用 Table 或 DataTable

• ListView 可滚动的列表

  • 特定化的 Column，不如 Column 可定制性强，但更易使用和反对滚动
  • 反对垂直或程度滚动

• Stack 重叠组件

  • 用来重叠多个组件
  • 子组件列表里前面的重叠在后面之上
  • 外面的内容无奈滚动
  • 超过渲染区域的内容可剪切掉

Material 布局组件（* 须要在 MaterialApp 下应用）

• Card 将相干的组件放到一个卡片里，该卡片带有圆角和暗影

  • 用来出现一组相干的信息
  • 只承受一个子组件，但子组件能够是 Row、Column 这样的承受多个子组件的组件
  • 带圆角和暗影
  • 内容不能滚动
  • 需在 MaterialApp 内应用

• ListTile 带有题目和副标题的行，首尾能够增加图标

  • 特定化的 Row，蕴含最多三行文字，以及可选的图标
  • 可定制性不如 Row，但更易使用
  • 需在 MaterialApp 内应用