昨天被问到一个非常类似的问题，关于在AlertDialog中显示GridView，并得到了将Widget包装在容器中并添加宽度的完美答案。现在我决定使用SimpleDialog以提供更多功能/自定义，即搜索文本字段和多个操作按钮。在显示文本字段和IconButton时，我得到了所需的结果，但是当我尝试添加GridView时，它会出错。我应用了之前的规则但是我得到了类似的错误，其中UI消失，但没有小部件显示。我已经尝试将宽度添加到不同的小部件而没有运气。这是我的代码......
Future<Null> _neverSatisfied() async {
return showDialog<Null>(
context: context,
barrierDismissible: false, // user must tap button!
child: new SimpleDialog(
contentPadding: const EdgeInsets.all(10.0),
title: new Text(
'CHOOSE YOUR GIF PROFILE IMAGE',
style: new TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
textAlign: TextAlign.center,
),
children: <Widget>[
new Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Padding(padding: new EdgeInsets.all(10.0)),
new Expanded(
child: new TextField(
decoration:
new InputDecoration(labelText: "SEARCH GIF'S"),
controller: _searchController,
onSubmitted: (str) {
setState(() {
str = _searchController.text;
});
})),
new Padding(padding: new EdgeInsets.all(2.0)),
new IconButton(
icon: new Icon(
Icons.search,
color: Colors.blue,
),
onPressed: () {
print('${_searchController.text}');
},
highlightColor: Colors.amber,
splashColor: Colors.amber,
iconSize: 25.0,
),
]),
new Padding(padding: new EdgeInsets.all(2.0)),
new Container(
// Specify some width
width: MediaQuery.of(context).size.width * .5,
child: new InkWell(
splashColor: Colors.blue,
onTap: null,
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()),
)
),
new Padding(padding: new EdgeInsets.all(2.0)),
new IconButton(
splashColor: Colors.green,
icon: new Icon(
Icons.cancel,
color: Colors.blue,
),
onPressed: () {
Navigator.of(context).pop();
})
],
),
],
),
);
}
这是我的错误日志...
= = R翻译图书馆的例外情况 ╞═════════════════════════════════════════════════ ════════ 在performLayout（）期间抛出以下断言：RenderViewport 不支持返回内在维度。计算 内在维度需要实例化每个孩子 视口，它击败了懒惰的视点。如果你是 只是试图在主轴方向上收缩包装视口， 考虑一个RenderShrinkWrappingViewport渲染对象 （ShrinkWrappingViewport小部件），无需实现该效果 实现内在维度API。
答案 0 :(得分：2)
That error essentially means that there is a scroll region or a widget that can grow, and you're trying to put another scroll region inside it without specifying how big the inner scroll region should be. When flutter attempts to calculate the size of various things, it can't because there are two different things that can grow/shrink; in particular the vertical direction of the grid is the problem in your case. If the gridview calculated the size of all of its children, it could then sort out all the rest of the sizes according to that (as the error message says). But the whole point of gridview it to display a large amount of data that most likely scrolls off the screen, and so if it were to do that calculation it could slow things down in the normal case of using gridview.
I'd bet that AlertDialog has a constraint for height and/or doesn't scroll, and that's why you didn't see a problem for it.
To fix your problem, you have two options. If you are going to have a large amount of items (it'd help me answering if you described what you were actually trying to make), keep using the gridview but simply assign a height as well it to the container it's in. That way the dialog can size itself happily knowing the height of all of its children, and the grid can size itself within the height you've given (TBH I'm not sure if you even need width defined any more).
The other option, if you don't have a large amount of items (i.e. they will more or less fit on the screen and/or you don't want them to scroll), use a wrap instead of a grid which will directly layout all of your items. This has the advantage that it will lay everything out nicely when your orientation changes as well.