Question

我正在从服务器检索数据。使用 GridView.builder 提供数据。每个网格都包含一个 Listview。 listview 的长度未知，因为它取决于从服务器返回的项目数。无论检索的项目数量如何，我都需要每个网格都具有相同的高度（因此可能无法使用 staggered grid ）并且不希望列表视图项目溢出。为此，我需要知道具有最多项目（最高网格）的网格的高度。我知道可以用比率 childAspectRatio 调整高度。这是您可以在 dartpart 中使用的最小示例。基本上在这个例子中，项目在“长列”中溢出。我希望能够将项目添加到列中而不会导致溢出并保持网格的高度相同。

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

GridView.count( crossAxisCount: 2, 孩子：List.generate（12，（索引）{ 返回扩展（子：容器（））； })),

这会起作用

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

1 个答案: