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

问题是，AlertDailog试图获得孩子的内在宽度。但GridView懒惰并不提供内在属性。只需尝试将GridView包裹在一个Container的{{1}}中。

示例：

width

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

希望有所帮助！

Answer 2

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

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

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

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

2 个答案: