flutter组件————Row和Column

Row和Column

在Flutter中，Row 和 Column 是两个非常常用的布局组件，它们用于按照水平或垂直方向排列子组件。

Row

Row 组件是一个将子组件沿水平方向（从左到右）排列的控件。它通常用于创建一行中的多个小部件，比如文本、按钮等。

Column

Column 组件与 Row 类似，但它将子组件沿垂直方向（从上到下）排列。

参数

注意

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

效果