Flutter – 行和列小部件

在Flutter中，行（Row）和列（Column）小部件是用于水平和垂直排列子小部件的基本工具。这些小部件非常出色，可以让你的UI更加美观和易于阅读。本文将介绍Flutter中的行和列小部件的用法和示例应用。

使用行和列小部件

在Flutter中，行和列小部件使用方式很简单，我们只需要将需要排列的小部件放在行或列中即可。这些小部件将自动排列，并根据需要自动调整大小。

行小部件

以下是Flutter中行小部件的基本用法的示例代码：

Row(
    children: <Widget>[
        Text('Hello'),
        Text(' World'),
    ]
)

在上面的示例中，我们创建了一行，然后向行中添加了两个文本小部件（'Hello'和'World'）。这些文本小部件将在同一行中自动排列。

列小部件

以下是Flutter中列小部件的基本用法的示例代码：

Column(
    children: <Widget>[
        Text('Hello'),
        Text('World'),
    ]
)

在上面的示例中，我们创建了一个列，然后向列中添加了两个文本小部件（'Hello'和'World'）。这些文本小部件将在同一列中自动排列。

使用扩展和自适应小部件

我们可以使用扩展和自适应小部件来使行和列小部件更加灵活和适应屏幕。以下是几个示例：

• Expanded：让子小部件沿着主轴（行或列）扩展，填满可用空间。

Row(
    children: <Widget>[
        Expanded(
            child: Text('Hello'),
        ),
        Expanded(
            child: Text('World'),
        ),
    ]
)

• Flexible：让子小部件沿着主轴（行或列）扩展，但是可以根据需要收缩。

Row(
    children: <Widget>[
        Flexible(
            child: Text('Hello'),
        ),
        Flexible(
            child: Text('World'),
        ),
    ]
)

• Spacer：填充空间，使子小部件沿着主轴（行或列）分散对齐。

Row(
    children: <Widget>[
        Text('Hello'),
        Spacer(),
        Text('World'),
    ]
)

使用交叉轴对齐小部件

我们可以使用交叉轴（与行或列的主轴垂直的轴）对齐小部件来使UI更加美观。以下是几个示例：

• CrossAxisAlignment.start：将子小部件在交叉轴上向上对齐。

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

• CrossAxisAlignment.center：将子小部件在交叉轴上居中对齐。

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

• CrossAxisAlignment.end：将子小部件在交叉轴上向下对齐。

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

总结

行和列小部件是Flutter中非常有用的工具。它们可以使UI更加清晰和美观，并提高用户的阅读体验。你可以使用扩展和自适应小部件来适应屏幕，使用交叉轴对齐小部件来使UI更加美观。