组件list怎么设置高度
时间: 2023-10-02 09:11:25 浏览: 37
组件list的高度可以通过设置其父容器的高度或者使用它的属性来实现。以下是两种方法:
1. 设置父容器高度
可以通过设置父容器(比如一个容器或者页面)的高度来控制组件list的高度。例如:
```
Container(
height: 200, // 设置容器高度为200
child: ListView.builder(
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
child: Text('Item $index'),
);
},
),
);
```
在上面的例子中,我们将容器的高度设置为200,然后在ListView.builder中设置每个item的高度为50,这样就可以显示10个item,总高度为500,而超出容器高度的部分会被截断。
2. 使用属性设置高度
组件list也有一些属性可以用来设置其高度。例如:
```
ListView.builder(
itemCount: 10,
itemExtent: 50, // 设置每个item的高度为50
shrinkWrap: true, // 设置listview的高度为所有item的高度总和
physics: NeverScrollableScrollPhysics(), // 禁止滚动
itemBuilder: (BuildContext context, int index) {
return Text('Item $index');
},
)
```
在上面的例子中,我们使用了`itemExtent`属性来设置每个item的高度为50,使用`shrinkWrap`属性来让listview的高度自适应item的高度总和,最后使用`NeverScrollableScrollPhysics`属性来禁止滚动。这样就可以显示10个item,总高度为500,而不会超出父容器的高度。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)