Flutter 如何平衡GridView和第行中列的高度？

我希望它们的高度（黄色

列

和

网格视图

）相等，c1、c2、c3、c4与

网格视图

成比例

我试过了；我用

IntrinsicHeight

包装。像这样,

IntrinsicHeight (child: Row (children:[
                                   Column (),
                                   GridView (),
                                       ]
                            ))

如果我用

容器包装
网格视图
，并给出高度；c1、c2、c3、c4与高度成正比。但是
GridView
的高度也会改变。我们不知道
GridView
的高度

另一个我试过了；我将
GridView
的
行
包装为
展开的
。即使c1、c2、c3、c4按比例分布，高度也不等于
网格视图的高度

如何获得图像中显示的预期结果

完整代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Menu Screen"),
        ),
        body: Column(
          children: [
            Row(
              children: [
                Expanded(child: Container()),
                Expanded(
                    flex: 22,
                    child: Container(
                      color: Colors.red,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [Text("abcd"), Text("abcd"), Text("abcd")],
                      ),
                    ))
              ],
            ),
            Row(
              children: [
                Expanded(
                  child: Container(
                    color: Colors.yellow,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Text("c1"),
                        Text("c2"),
                        Text("c3"),
                        Text("c4"),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  flex: 22,
                  child: Container(
                    child: GridView(
                      shrinkWrap: true,
                      children: [
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                      ],
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        childAspectRatio: 1,
                        crossAxisSpacing: 2,
                        mainAxisSpacing: 2,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ));
  }
}

在您的示例中，GridView占用了所有可用空间，因为您使用Expanded对其进行了包装。所以你无法控制它的宽度和高度。该问题的解决方案是获取GridView中每个正方形的宽度（或高度）。您将GridView的flex设置为22，因此一个正方形的宽度将为（屏幕宽度*（22/23）-2*2）/3。（这2*2是因为GridView中有空格）您可以通过在返回脚手架行之前添加这行代码来获得屏幕的宽度：

var my_width = MediaQuery.of(context).size.width;

然后创建一个可变的黄色容器高度，并给它一个值（my_width*（22/23）-2*2）/3

之后，用容器包装所有文本（c1、c2、c3、c4）

然后只需向黄色容器（c1、c2、c3、c4）添加一个height属性，其值为yellow_container_height

最终代码应如下所示：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var my_width = MediaQuery.of(context).size.width;
    var yellow_container_height = (my_width*(22/23)-2*2)/3;
    return Scaffold(
        appBar: AppBar(
          title: Text("Menu Screen"),
        ),
        body: Column(
          children: [
            Row(
              children: [
                Expanded(child: Container()),
                Expanded(
                    flex: 22,
                    child: Container(
                      color: Colors.red,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [Text("abcd"), Text("abcd"), Text("abcd")],
                      ),
                    ))
              ],
            ),
            Row(
              children: [
                Expanded(
                  child: Container(
                    color: Colors.yellow,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Container(
                          height: yellow_container_height + 2, // these 2 are because of spaces in your GridView
                          child: Text("c1")),
                        Container(
                          height: yellow_container_height + 2,
                          child: Text("c2")),
                        Container(
                          height: yellow_container_height + 2,
                          child: Text("c3")),
                        Container(
                          height: yellow_container_height, // here we don't have 2 because this is the last square in our GridView
                          child: Text("c4")),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  flex: 22,
                  child: Container(
                    child: GridView(
                      shrinkWrap: true,
                      children: [
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                      ],
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        childAspectRatio: 1,
                        crossAxisSpacing: 2,
                        mainAxisSpacing: 2,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ));
  }
}

尝试添加
crossAxisAlignment:crossAxisAlignment.stretch
到您的行
它应该将行中的所有项目拉伸到最大高度

如果您想拉伸项目的宽度，列也是如此。
我尝试过使用它。但我收到了以下错误消息：
BoxConstraints强制无限高。