flutter flex布局如何使用

在Flutter中使用Flex布局时遇到了一些问题：

  1. 如何正确设置flex属性让子控件按比例分配空间？
  2. Row和Column与Flex有什么区别，什么时候该用哪个？
  3. 如果子控件内容超出Flex容器，该如何处理溢出？
  4. 嵌套Flex布局时需要注意哪些问题？
    希望能结合代码示例说明，谢谢！
2 回复

Flutter中Flex布局使用Row（水平）或Column（垂直）组件，通过mainAxisAlignment和crossAxisAlignment控制主轴和交叉轴对齐方式。子组件用Expanded或Flexible设置弹性比例。

更多关于flutter flex布局如何使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter 中的 Flex 布局主要通过 Row 和 Column 组件实现，它们都是 Flex 的子类。以下是核心用法：

1. 主轴与交叉轴

  • Row：主轴为水平方向，交叉轴为垂直方向
  • Column：主轴为垂直方向，交叉轴为水平方向

2. 常用属性

Row(
  mainAxisAlignment: MainAxisAlignment.start, // 主轴对齐方式
  crossAxisAlignment: CrossAxisAlignment.center, // 交叉轴对齐方式
  mainAxisSize: MainAxisSize.max, // 主轴尺寸（max占满/min紧凑）
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 80, color: Colors.green),
  ],
)

3. 弹性布局（Expanded/Flexible）

Row(
  children: [
    Expanded(
      flex: 2, // 弹性系数（默认1）
      child: Container(height: 50, color: Colors.red),
    ),
    Flexible(
      fit: FlexFit.loose, // 宽松适配（默认）
      child: Container(height: 50, color: Colors.blue),
    ),
  ],
)
  • Expanded：强制填满剩余空间（fit: FlexFit.tight）
  • Flexible：根据子组件尺寸灵活调整

4. 对齐方式示例

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // 均匀分布
  crossAxisAlignment: CrossAxisAlignment.stretch, // 横向撑满
  children: [/* 子组件 */],
)

5. 间距处理

Row(
  children: [
    Icon(Icons.star),
    SizedBox(width: 10), // 固定间距
    Expanded(child: Text("内容")),
  ],
)

注意事项：

  • 嵌套多层 Flex 时注意性能
  • 超出屏幕时建议结合 SingleChildScrollView
  • 复杂布局可结合 Stack 实现重叠效果

通过调整主轴/交叉轴对齐方式和弹性系数，可以快速实现各种常见布局需求。

回到顶部