当前位置：首页 > article >正文

flutter组件————Row和Column

article 2025/1/6 4:12:58

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> {
  @override
  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内容
        )
      ],
    );
  }
}