在GridView.builder中动态获取项目的高度

Question

我正在从服务器检索数据。数据使用GridView.builder提供。每个网格包含一个Listview。listview的长度是未知的，因为它取决于从服务器返回的项目的数量。我需要每个网格是相同的高度(所以可能无法使用交错网格)，无论检索的项目数量，不希望从listview项目溢出。要做到这一点，我需要知道网格的高度与最多的项目(最高的网格)。我知道高度可以用比例childAspectRatio来调整。这里有一个您可以在达特part中使用的最小示例。基本上在这个例子中，项目在"长列"中溢出。我希望能够将项目添加到列中，而不会导致溢出并保持网格相同的高度。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: GridView.builder(
primary: false,
padding: const EdgeInsets.all(20),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 10, mainAxisSpacing: 10, crossAxisCount: 3),
itemCount: 6,
itemBuilder: (BuildContext context, int index) {
Widget widget;
switch (index) {
case 0:
widget = Container(
padding: const EdgeInsets.all(8),
child: Column(
children: [
const Text('Long Column'),
const Text('Long Column'),
const Text('Long Column'),
const Text('Long Column'),
const Text('Long Column'),
const Text('Long Column'),

],
),
color: Colors.teal[100],
);
break;
case 1:
widget = Container(
padding: const EdgeInsets.all(8),
child: const Text('Short Column'),
color: Colors.teal[200],
);
break;
case 2:
widget = Container(
padding: const EdgeInsets.all(8),
child: const Text('Short Column'),
color: Colors.teal[300],
);
break;
case 3:
widget = Container(
padding: const EdgeInsets.all(8),
child: const Text('Short Column'),
color: Colors.teal[400],
);
break;
case 4:
widget = Container(
padding: const EdgeInsets.all(8),
child: const Text('Short Column'),
color: Colors.teal[500],
);
break;
default:
widget = Container(
padding: const EdgeInsets.all(8),
child: const Text('Short Column'),
color: Colors.teal[600],
);
}
return widget;
},
)),
),
);
}
}

Answer 1

crossAxisCount: 2孩子们:列表。生成(12，(index) {返回扩展(孩子:容器());})),

这将工作