Row和Column
在Flutter中，Row 和 Column 是两个非常常用的布局组件，它们用于按照水平或垂直方向排列子组件。
Row
Row 组件是一个将子组件沿水平方向（从左到右）排列的控件。它通常用于创建一行中的多个小部件，比如文本、按钮等。
Column
Column 组件与 Row 类似，但它将子组件沿垂直方向（从上到下）排列。
参数
| 参数名称 | 类型 | 说明 | 默认值 |
|---|---|---|---|
mainAxisAlignment | MainAxisAlignment | 主轴对齐方式，控制子组件沿主轴（Row为水平，Column为垂直）的排列方式 | MainAxisAlignment.start |
mainAxisSize | MainAxisSize | 主轴大小，定义了Row或Column占用的空间大小 | MainAxisSize.max |
crossAxisAlignment | CrossAxisAlignment | 横轴对齐方式，控制子组件沿横轴（Row为垂直，Column为水平）的对齐方式 | CrossAxisAlignment.center |
textDirection | TextDirection | 文本方向，指定子组件的布局顺序是从左往右还是从右往左 | 系统默认值 |
verticalDirection | VerticalDirection | 垂直方向，用于指定子组件在纵轴上的排列方向（Row组件适用） | VerticalDirection.down |
textBaseline | TextBaseline | 当crossAxisAlignment设置为CrossAxisAlignment.baseline时使用，以基线对齐文本组件 | |
children | List | 要显示的子组件列表 | 空列表 |
注意
Row和Column组件不支持滚动，如果需要滚动功能应该使用ListView或者SingleChildScrollView。Expanded和Flexible是两个可以用来控制子组件如何分配空间的组件，当它们作为Row或Column的直接子组件时特别有用。textDirection对于Column来说不是必须的，因为它的子组件通常不会依赖文本方向来决定其布局顺序。但对于Row，它是必要的，除非父级已经提供了文本方向。textBaseline只有在crossAxisAlignment设置为CrossAxisAlignment.baseline时才有效，它用于确定哪些文本基线用于对齐。verticalDirection: 这个参数只在Column中默认有效，用于指定子组件在纵轴上的排列方向。但在Row中也可以设置此参数，它会影响当textDirection为 null 时，且需要确定CrossAxisAlignment.start或CrossAxisAlignment.end的位置。
代码示例
class _RowColumPageState extends State<RowColumPage> {Widget build(BuildContext context) {return ListView(children: const [Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 主轴对齐方式mainAxisSize: MainAxisSize.max, // 主轴大小textDirection: TextDirection.rtl, // 文本方向textBaseline: TextBaseline.alphabetic, // 文本基线children: [Text("Row内容1"),Text("Row内容2"),Text("Row内容3"),Text("Row内容4"),Text("Row内容5")], // Row内容),Column(crossAxisAlignment: CrossAxisAlignment.start, // 横轴对齐方式mainAxisSize: MainAxisSize.max, // 主轴大小textDirection: TextDirection.rtl, // 文本方向textBaseline: TextBaseline.alphabetic, // 文本基线children: [Text("Column内容1"),Text("Column内容2"),Text("Column内容3"),Text("Column内容4"),Text("Column内容5")], // Column内容)],);}
}
效果
)
