Flutter布局Widget详解（上）——纵横驰骋的容器世界

2024-01-05 22:05:34

纵横驰骋的容器世界

Flutter的布局系统基于Widget，提供了丰富的布局Widget，包括Row、Column、Stack、Positioned、Expanded和Flexible等，这些布局Widget可以帮助您轻松构建复杂的UI界面。

Row ：Row布局Widget可以将子Widget水平排列，就像一行文字一样。
Column ：Column布局Widget可以将子Widget垂直排列，就像一列文字一样。
Stack ：Stack布局Widget可以将子Widget堆叠在一起，就像一堆纸牌一样。
Positioned ：Positioned布局Widget可以将子Widget定位在Stack布局中的特定位置。
Expanded ：Expanded布局Widget可以使子Widget占据父Widget的剩余空间。
Flexible ：Flexible布局Widget可以使子Widget在父Widget中按比例分配空间。

如何使用布局Widget

使用布局Widget非常简单，您只需要将子Widget放在布局Widget中即可。例如，要将两个子Widget水平排列，您可以使用Row布局Widget，如下所示：

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

要将两个子Widget垂直排列，您可以使用Column布局Widget，如下所示：

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

要将两个子Widget堆叠在一起，您可以使用Stack布局Widget，如下所示：

Stack(
  children: [
    Text('Hello'),
    Text('World'),
  ],
)

要将子Widget定位在Stack布局中的特定位置，您可以使用Positioned布局Widget，如下所示：

Positioned(
  top: 0.0,
  left: 0.0,
  child: Text('Hello'),
)

要使子Widget占据父Widget的剩余空间，您可以使用Expanded布局Widget，如下所示：

Expanded(
  child: Text('Hello'),
)

要使子Widget在父Widget中按比例分配空间，您可以使用Flexible布局Widget，如下所示：

Flexible(
  flex: 1,
  child: Text('Hello'),
)

实例

现在，我们来看一些使用布局Widget构建UI界面的实例。

创建一个简单的文本界面

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

创建一个简单的列表界面

Column(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

创建一个简单的导航界面

Stack(
  children: [
    Text('Home'),
    Positioned(
      top: 0.0,
      right: 0.0,
      child: Text('Settings'),
    ),
  ],
)

创建一个简单的表单界面

Column(
  children: [
    TextField(
      decoration: InputDecoration(
        labelText: 'Name',
      ),
    ),
    TextField(
      decoration: InputDecoration(
        labelText: 'Email',
      ),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Submit'),
    ),
  ],
)