Flutter 行和列

在 Flutter 中，行（Row）和列（Column）是非常重要的布局控件。它们用于在水平和垂直方向上排列子组件，以构建灵活而响应式的用户界面。

行（Row）

行（Row）是一个水平排列的布局控件，用于将子组件从左到右放置。以下是创建行的基本语法：

Row(
  children: <Widget>[
    // 子组件
    // ...
  ],
)

行将子组件水平排列，可以根据需要自动调整大小。你可以通过设置 mainAxisAlignment 和 crossAxisAlignment 来调整子组件的对齐和布局方式。

• mainAxisAlignment 定义了主轴上子组件的对齐方式，可选值包括：

  • MainAxisAlignment.start：将子组件靠左对齐
  • MainAxisAlignment.end：将子组件靠右对齐
  • MainAxisAlignment.center：将子组件居中对齐
  • MainAxisAlignment.spaceBetween：平均分布子组件，空间之间相等
  • MainAxisAlignment.spaceAround：平均分布子组件，空间之前和之后相等
  • MainAxisAlignment.spaceEvenly：平均分布子组件，空间之前、之间和之后相等

• crossAxisAlignment 定义了交叉轴上子组件的对齐方式，可选值包括：

  • CrossAxisAlignment.start：将子组件靠上对齐
  • CrossAxisAlignment.end：将子组件靠下对齐
  • CrossAxisAlignment.center：将子组件居中对齐
  • CrossAxisAlignment.stretch：将子组件拉伸以填满交叉轴上的空间

行布局示例：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text('Hello'),
    Text('World'),
  ],
)

列（Column）

列（Column）是一个垂直排列的布局控件，用于将子组件从上到下放置。以下是创建列的基本语法：

Column(
  children: <Widget>[
    // 子组件
    // ...
  ],
)

列将子组件垂直排列，可以根据需要自动调整大小。你同样可以通过设置 mainAxisAlignment 和 crossAxisAlignment 来调整子组件的对齐和布局方式，具体用法和行相同。

列布局示例：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text('Hello'),
    Text('World'),
  ],
)

总结

使用行和列，你可以轻松地在 Flutter 中构建复杂的用户界面。通过灵活的对齐和布局方式，你可以创建出各种不同排列和组合的子组件结构，以满足不同界面设计的需求。

注：以上代码片段使用 Dart 语法，并假设你已对 Flutter 框架有基本了解。