带有覆盖部分屏幕的 GridView 弹出窗口

Question

更新：我想通了。看我的回答below

我将GridView 呈现为一个弹出路由，它会产生

下面的代码

class GridPopup extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          color: Colors.blue,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              RaisedButton(
                child: Text('Close popup'),
                onPressed: () => Navigator.of(context).pop(),
              ),
              // Expanded(
              //   child: GridView.count(
              GridView.count(
                crossAxisCount: 5,
                crossAxisSpacing: 2.0,
                mainAxisSpacing: 2.0,
                childAspectRatio: 1.0,
                shrinkWrap: true,
                children: List.generate(
                  25,
                  (index) => Container(color: Colors.green),
                ),
              ),
              // ),
            ],
          ),
        ),
      ),
    );
  }
}

此处提供的代码：gistdartpad

问题是当GridView中的项目数增加时，会溢出

可以通过用Expanded 包裹GridView 来修复它，但是弹出窗口总是覆盖整个屏幕

我可以在不使用Expanded 小部件且不指定大小的情况下修复溢出吗？换句话说，我希望弹出窗口的高度尽可能小（项目少时少，项目多时多），同时仍包含 GridView，以免溢出。

Answer 1

我想通了。 GridView 应该用Flexible 小部件而不是Expanded 包裹。其余代码保持不变。

...
Flexible(
  child: GridView.count(
    crossAxisCount: 5,
    crossAxisSpacing: 2.0,
    mainAxisSpacing: 2.0,
    childAspectRatio: 1.0,
    shrinkWrap: true,
    children: List.generate(
      25,
      (index) => Container(color: Colors.green),
    ),
  ),
),
...

更新了gist 和dartpad

Answer 2

[![在此处输入图片描述][1]][1]您需要提供scrollDirection功能并且需要将shrinkWrap设为false。你需要覆盖我们的一半。

class GridPopup extends StatelessWidget {
int countContainer = 35;
@override
Widget build(BuildContext context) {
double heightPopup = MediaQuery.of(context).size.height *
            (((countContainer / 5).toDouble()) / 10) >
        MediaQuery.of(context).size.height
    ? MediaQuery.of(context).size.height
    : MediaQuery.of(context).size.height *
        ((((countContainer / 5) + 1) / 10));

print(MediaQuery.of(context).size.height.toString());
print("heightPopup" + heightPopup.toString());
return SafeArea(
  child: Align(
    alignment: Alignment.bottomCenter,
    child: Container(
      height: heightPopup,
      color: Colors.blue,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            child: RaisedButton(
              child: Text('Close popup'),
              onPressed: () => Navigator.of(context).pop(),
            ),
          ),

          Expanded(
            child: GridView.count(
              crossAxisCount: 5,
              crossAxisSpacing: 2.0,
              mainAxisSpacing: 2.0,
              childAspectRatio: 1.0,
              scrollDirection: Axis.vertical,
              children: List.generate(
                countContainer,
                (index) => Container(color: Colors.green),
              ),
            ),
          ),
          // ),
        ],
      ),
    ),
   ),
 );
}
}

Answer 3

将 GripPop 更改为，删除 mainAxisSize: MainAxisSize.min 和 shrinkWrap: true:

  void _presentGridPopup(BuildContext context){
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (context) {
          return FractionallySizedBox(
            heightFactor: 0.8,
            child: GridPopup(),
          );
        });
  }

    class GridPopup extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              color: Colors.blue,
              child: Column(
                children: [
                  RaisedButton(
                    child: Text('Close popup'),
                    onPressed: () => Navigator.of(context).pop(),
                  ),
                  Expanded(
                    child: GridView.count(
                      crossAxisCount: 5,
                      crossAxisSpacing: 2.0,
                      mainAxisSpacing: 2.0,
                      childAspectRatio: 1.0,
                      children: List.generate(
                        100,
                        (index) => Container(color: Colors.green),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }