Flutter - 如何在 AlertDialog 框中显示 GridView？答案

【问题标题】：Flutter - How to display a GridView within an AlertDialog box?Flutter - 如何在 AlertDialog 框中显示 GridView？
【发布时间】：2018-08-28 17:26:03
【问题描述】：

我正在尝试显示图像的 GridView 以允许用户从对话框中进行选择，但我遇到了渲染问题。我的 UI 消失了，就好像一个视图出现在它上面一样，但什么也没有显示。这是我的代码...

Future<Null> _neverSatisfied() async {
    return showDialog<Null>(
      context: context,
      barrierDismissible: false, // user must tap button!
      child: new AlertDialog(
        title: new Text(
          'SAVED !!!',
          style:
          new TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
        ),
        content: new GridView.count(
            crossAxisCount: 4,
            childAspectRatio: 1.0,
            padding: const EdgeInsets.all(4.0),
            mainAxisSpacing: 4.0,
            crossAxisSpacing: 4.0,
            children: <String>[
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
            ].map((String url) {
              return new GridTile(
                  child: new Image.network(url, fit: BoxFit.cover, width: 12.0, height: 12.0,));
            }).toList()),
        actions: <Widget>[
          new IconButton(
              splashColor: Colors.green,
              icon: new Icon(
                Icons.done,
                color: Colors.blue,
              ),
              onPressed: () {
                Navigator.of(context).pop();
              })
        ],
      ),
    );
  }

【问题讨论】：

标签： user-interface gridview flutter

【解决方案1】：

问题在于，AlertDailog 试图获取子元素的固有宽度。但是GridView 懒惰并没有提供内在属性。只需尝试用一些 width 将 GridView 包装在 Container 中。

例子：

Future<Null> _neverSatisfied() async {
  return showDialog<Null>(
    context: context,
    barrierDismissible: false, // user must tap button!
    child: new AlertDialog(
      contentPadding: const EdgeInsets.all(10.0),
      title: new Text(
        'SAVED !!!',
        style:
        new TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
      ),
      content: new Container(
        // Specify some width
        width: MediaQuery.of(context).size.width * .7,
        child: new GridView.count(
            crossAxisCount: 4,
            childAspectRatio: 1.0,
            padding: const EdgeInsets.all(4.0),
            mainAxisSpacing: 4.0,
            crossAxisSpacing: 4.0,
            children: <String>[
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
            ].map((String url) {
              return new GridTile(
                  child: new Image.network(url, fit: BoxFit.cover, width: 12.0, height: 12.0,));
            }).toList()),
      ),
      actions: <Widget>[
        new IconButton(
            splashColor: Colors.green,
            icon: new Icon(
              Icons.done,
              color: Colors.blue,
            ),
            onPressed: () {
              Navigator.of(context).pop();
            })
      ],
    ),
  );
}

您可以阅读更多关于如何为不同视图计算内在属性here。

希望有帮助！

【讨论】：

工作正常，谢谢！但是你能解释一下MediaQuery.of(context).size.width * .7 到底做了什么吗？
MediaQuery 提供了保存屏幕宽度和高度的 size 属性。通过在上面做* .7，我得到了 70% 的宽度。
很好，它还有助于将Scrollbar 和Markdown 小部件嵌套到AlertDialog 中。我确信用Container 包裹它会有所帮助，但根据屏幕尺寸设置尺寸并不那么明显。谢谢！

【解决方案2】：

我认为您必须在内容中使用滚动小部件，以便它可以处理溢出的小部件。

https://docs.flutter.io/flutter/material/AlertDialog-class.html

如果内容太大而无法垂直显示在屏幕上，对话框将显示标题和动作并让内容溢出。考虑使用滚动小部件（例如 ListView）来避免内容溢出。

【讨论】：