flutter 每一行显示四个,多出来的换行显示
时间: 2024-02-21 19:56:59 浏览: 50
您可以使用 `Wrap` 或 `GridView` 组件来实现每行显示四个的效果。
使用 `Wrap` 组件:
```dart
Wrap(
spacing: 10, // 间隔
runSpacing: 10, // 行间距
children: List.generate(
yourList.length,
(index) => Container(
width: yourWidth,
height: yourHeight,
child: yourContent,
),
),
)
```
使用 `GridView` 组件:
```dart
GridView.count(
crossAxisCount: 4, // 每行显示个数
crossAxisSpacing: 10, // 列间距
mainAxisSpacing: 10, // 行间距
children: List.generate(
yourList.length,
(index) => Container(
width: yourWidth,
height: yourHeight,
child: yourContent,
),
),
)
```
如果您想要多出来的项换行显示,可以将 `Wrap` 或 `GridView` 组件包裹在一个 `SizedBox` 组件中,并设置宽度。例如,设置宽度为屏幕宽度:
```dart
SizedBox(
width: MediaQuery.of(context).size.width,
child: Wrap(
// 或者使用 GridView.count
// ...
),
)
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)