flutter组件————Row和Column

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

效果