响应式 GridView 全屏颤动

Question

我想让我的 gridview 占据整个屏幕，但我找不到这样做的方法。 我已经检查了多个博客，例如： https://medium.com/nusanet/flutter-gridview-bad48c1f216c

但这似乎不适用于我的情况。 即使我使用 MediaQuery Data 来获取屏幕宽度和高度以适应 childAspectRation。

这是我的网格视图：

GridView.count(
                childAspectRatio: (widthScreen / heightScreen),
                shrinkWrap: true,
                crossAxisCount: 2,
                physics: NeverScrollableScrollPhysics(),
                crossAxisSpacing: 15,
                mainAxisSpacing: 10,
                padding: const EdgeInsets.all(5),
                children: <Widget>[
                  CardItem(
                    imageUrl: 'assets/images/apprendreajouer.jpg',
                    title: 'Apprendre à jouer',
                    function: () {
                      Navigator.push(
                        context,
                        CupertinoPageRoute(
                          builder: (context) => ListLevelsPage(
                            pageTitle: "Cours",
                            pageKey: 1,
                            context: context,
                          ),
                        ),
                      );
                    },
                  ),
                  CardItem(
                    imageUrl: 'assets/images/exercices.jpeg',
                    title: 'Exercice',
                    function: () {
                      Navigator.push(
                        context,
                        CupertinoPageRoute(
                          builder: (context) => ListLevelsPage(
                            pageTitle: "Exercices",
                            pageKey: 2,
                            context: context,
                          ),
                        ),
                      );
                    },
                  ),
                  CardItem(
                    imageUrl: 'assets/images/partition.jpg',
                    title: 'Partition',
                    function: () {
                      Navigator.push(
                        context,
                        CupertinoPageRoute(
                          builder: (context) => ListLevelsPage(
                            pageTitle: "Partition",
                            pageKey: 3,
                            context: context,
                          ),
                        ),
                      );
                    },
                  ),
                  CardItem(
                    imageUrl: 'assets/images/dictionnaire.jpeg',
                    title: 'Mon dictionnaire',
                    function: () {
                      Navigator.push(
                        context,
                        CupertinoPageRoute(
                          builder: (context) => ListLevelsPage(
                            pageTitle: "Dictionnaire d'accords",
                            pageKey: 4,
                            context: context,
                          ),
                        ),
                      );
                    },
                  ),
                  CardItem(
                    imageUrl: 'assets/images/examen.jpeg',
                    title: 'Examen',
                  ),
                  CardItem(
                    imageUrl: 'assets/images/apropos.jpg',
                    title: 'A propos',
                  ),
                ],
              ),

下面是我想要的图片：

我使用@Thierry 源代码获得的更新：

任何帮助都会很棒。

Answer 1

您的代码中存在一些差异。

你不能定义：

• 6 children 为您的GridView
• childAspectRatio 的 widthScreen / heightScreen
• crossAxisCount: 2

如果您将 children 的数量减少到 4 个，您可以保留您的 childAspectRatio 和 crossAxisCount。

如果你想要 6 个 children 对 3 个 Rows，则将 childAspectRatio 更改为 MediaQuery.of(context).size.aspectRatio * 3 / 2。

如果你想要 6 个 children 对 2 个 Rows，则将 crossAxisCount 增加到 3，并将 childAspectRatio 更改为 MediaQuery.of(context).size.aspectRatio * 2 / 3。

注意：你可以这样继续。如果你想要 n 个 children 中的 m 个 Rows，childAspectRatio 应该是 m/n。

完整源代码（6 children on 3 Rows）

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GridView Demo')),
      body: LayoutBuilder(
        builder: (context, constraints) => GridView.count(
          childAspectRatio: constraints.biggest.aspectRatio * 3 / 2,
          shrinkWrap: true,
          crossAxisCount: 2,
          physics: NeverScrollableScrollPhysics(),
          children: List.generate(
            6,
            (index) => Padding(
              padding: const EdgeInsets.all(4.0),
              child: CardItem(
                imageUrl: 'assets/images/abstract$index.jpg',
                title: 'Abstract $index',
              ),
            ),
          ).toList(),
        ),
      ),
    );
  }
}

class CardItem extends StatelessWidget {
  final String imageUrl;
  final String title;
  final VoidCallback function;

  const CardItem({Key key, this.imageUrl, this.title, this.function})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: function,
      child: Card(
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage(imageUrl),
              fit: BoxFit.cover,
              alignment: Alignment.topCenter,
            ),
          ),
          child: Text(title),
        ),
      ),
    );
  }
}