flutter 超出Container 的宽度,自动换行
时间: 2024-02-21 10:57:09 浏览: 200
您可以使用 `Wrap` 组件来实现超出 `Container` 宽度后自动换行的效果。
示例代码如下:
```dart
Wrap(
spacing: 10, // 间隔
runSpacing: 10, // 行间距
children: [
Container(
width: 100,
height: 50,
color: Colors.blue,
child: Center(
child: Text('Container 1'),
),
),
Container(
width: 150,
height: 50,
color: Colors.red,
child: Center(
child: Text('Container 2'),
),
),
Container(
width: 120,
height: 50,
color: Colors.green,
child: Center(
child: Text('Container 3'),
),
),
Container(
width: 80,
height: 50,
color: Colors.yellow,
child: Center(
child: Text('Container 4'),
),
),
Container(
width: 130,
height: 50,
color: Colors.orange,
child: Center(
child: Text('Container 5'),
),
),
],
)
```
在这个例子中,我们使用 `Wrap` 组件包裹了多个 `Container` 组件。通过设置 `spacing` 和 `runSpacing` 属性来控制间隔和行间距。当 `Container` 宽度之和超过了父容器的宽度时,`Wrap` 组件会自动换行。您可以根据需要设置每个 `Container` 的宽度和高度。
阅读全文