我正在尝试显示图像的GridView,以允许用户从对话框中进行选择,并且出现了渲染问题。我的UI消失了,好像 View 出现在其顶部,但什么也没有显示。这是我的代码...
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();
})
],
),
);
}
最佳答案
问题是,AlertDailog
尝试获取子项的固有宽度。但是GridView
懒惰不提供固有的属性。只需尝试将GridView
包装在带有一些Container
的width
中即可。
例子:
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();
})
],
),
);
}
您可以阅读有关如何为不同 View here计算固有属性的更多信息。
希望能有所帮助!
关于user-interface - Flutter-如何在AlertDialog框中显示GridView?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49375050/