Flutter

Question

我正在尝试显示图像的 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();
              })
        ],
      ),
    );
  }

Answer 1

我认为您必须在内容中使用滚动小部件，这样它才能处理溢出的小部件。

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

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

Answer 2

问题在于，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。

希望对您有所帮助！

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

Flutter - How to display a GridView within an AlertDialog box?

user-interface

gridview