Listview和Gridview的容器高度

Question

Listview和Gridview都需要在我们的应用程序中显示height。但每种型号的手机都有不同的尺寸和高度，所以不可能定义列表的父容器的静态高度。

一旦使用listview和gridview覆盖所有手机型号，我需要把什么作为容器的高度？

代码：

Container(
height: 500,
child: GridView.builder(
itemCount: 20,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
itemBuilder: (BuildContext context, int index){
return GestureDetector(
onTap: () => showDialog(
context: context, builder: (context) => AlertDialog(
actions: [
Image.asset(widget.user.imageUrl),
Text(widget.user.name),
],
)
),
child: Card(
elevation: 5,
child: Image.asset(widget.user.imageUrl),
),
);
},
),
),

在这个特定的情况下，高度是500，这对一些手机来说是好的，但对其他手机来说不是，请告诉我。

Answer 1

您可以使用屏幕高度宽度使其根据设备做出响应：

height: MediaQuery.of(context).size.height * 0.1 //It takes 1 of 10 proportion of screen height
width: MediaQuery.of(context).size.width* 0.2 //It takes 2 of 10 proportion of screen width

Answer 2

您可以将GridView或ListView放置在Expanded小部件中。CCD_ 5小部件将占用所有可用空间&您可以轻松地显示您的GridView或ListView小部件。

这种解决方案可以在多种屏幕尺寸上工作，也不会有任何问题，因为它会单独占用可用空间。

Column(
children: [
// Any other widget
Expanded(
child: GridView.builder(
itemCount: 20,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
itemBuilder: (BuildContext context, int index){
return GestureDetector(
onTap: () => showDialog(
context: context, builder: (context) => AlertDialog(
actions: [
Image.asset(widget.user.imageUrl),
Text(widget.user.name),
],
),
),
child: Card(
elevation: 5,
child: Image.asset(widget.user.imageUrl),
),
);
},
),
),
// Any other widget
],
),