flutter 布局

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 内使用