Flutter线性布局(Row和Column)
封面图
•
2025-10-27
•
Flutter
6
0
0
0
在 **Flutter** 中,**线性布局(Linear Layout)** 是最常用的布局方式之一,主要通过 `Row` 和 `Column` 两个小部件来实现。它们分别用于水平方向和垂直方向的排列。 --- ## ✅ 一、Row(水平布局) `Row` 小部件将子组件按照**水平方向**依次排列。 ### 📌 基本语法: ```dart Row( children: <Widget>[...], ) ``` ### 📌 常用属性: | 属性 | 说明 | |------|------| | `mainAxisAlignment` | 控制主轴(水平)上的对齐方式(如 `MainAxisAlignment.start`, `center`, `end`, `spaceBetween`, `spaceAround`) | | `crossAxisAlignment` | 控制交叉轴(垂直)上的对齐方式(如 `CrossAxisAlignment.center`, `start`, `end`) | | `textDirection` | 设置文本方向(用于对齐方式的调整) | | `children` | 子组件列表 | ### 📌 示例代码: ```dart Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Container(width: 50, height: 50, color: Colors.red), Container(width: 50, height: 50, color: Colors.green), Container(width: 50, height: 50, color: Colors.blue), ], ) ``` --- ## ✅ 二、Column(垂直布局) `Column` 小部件将子组件按照**垂直方向**依次排列。 ### 📌 基本语法: ```dart Column( children: <Widget>[...], ) ``` ### 📌 常用属性: | 属性 | 说明 | |------|------| | `mainAxisAlignment` | 控制主轴(垂直)上的对齐方式(如 `MainAxisAlignment.start`, `center`, `end`, `spaceBetween`, `spaceAround`) | | `crossAxisAlignment` | 控制交叉轴(水平)上的对齐方式(如 `CrossAxisAlignment.center`, `start`, `end`) | | `verticalDirection` | 控制垂直方向(仅在 `mainAxisAlignment` 为 `spaceBetween` 等时使用) | | `children` | 子组件列表 | ### 📌 示例代码: ```dart Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Container(width: 100, height: 50, color: Colors.red), Container(width: 100, height: 50, color: Colors.green), Container(width: 100, height: 50, color: Colors.blue), ], ) ``` --- ## ✅ 三、常见问题与技巧 ### 1. **如何让子组件充满整个空间?** 使用 `Expanded` 或 `Flexible` 来分配剩余空间。 ```dart Row( children: [ Expanded( flex: 2, child: Container(color: Colors.red), ), Expanded( flex: 1, child: Container(color: Colors.green), ), ], ) ``` ### 2. **如何处理超出屏幕的布局?** 使用 `ListView` 包裹 `Row` 或 `Column`,可以实现滚动。 ```dart ListView( children: [ Row(...), Column(...), ], ) ``` ### 3. **如何控制子组件的大小?** 使用 `Container` 或 `SizedBox` 指定宽度或高度。 ```dart Container(width: 100, height: 100, color: Colors.yellow) ``` --- ## ✅ 四、总结对比 | 特性 | Row(水平) | Column(垂直) | |------|-------------|----------------| | 排列方向 | 水平 | 垂直 | | 主轴 | 横向 | 纵向 | | 对齐方式 | `mainAxisAlignment` | `mainAxisAlignment` | | 交叉轴对齐 | `crossAxisAlignment` | `crossAxisAlignment` | --- 如果你有具体的布局需求(比如:居中、左右对齐、弹性布局等),我可以帮你写出更详细的示例代码 😊
上一篇:
Flutter布局原理与约束(constraints)
下一篇:
Flutter弹性布局(Flex)
标题录入,一次不能超过6条
返回顶部
留言
留言
评论