Flutter - 自动调整大小的 AlertDialog 以适应列表内容 [英] Flutter - Auto size AlertDialog to fit list content
问题描述
我需要从 REST Web 服务动态加载列表城市,并让用户从警报对话框中选择一个城市.我的代码:
I need to load list cities dynamically from rest webservice and let user choice one city from alert dialog. My code:
createDialog() {
fetchCities().then((response) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Wybierz miasto'),
content: Container(
height: 200.0,
width: 400.0,
child: ListView.builder(
shrinkWrap: true,
itemCount: response.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(response[index].name),
onTap: () => citySelected(response[index].id),
);
},
),
),
);
}
);
});
}
结果 - 对话框始终为 200x400,即使只有 2 个城市可用,底部仍有不必要的空间:
Result - dialog is always 200x400, even if only 2 cities are available, there is unnecesary room left at the bottom:
如何使对话框宽度/高度适合实际项目大小?如果我省略 height
和 width
参数,我会得到异常并且没有显示对话框.在原生 Android Java 中,我从不需要指定任何尺寸,因为对话框会自动调整大小以适应.
How to make dialog width/height to fit actual items size? If I ommit height
and width
parameters, I'm getting exception and no dialog shown. In native Android Java I never need to specify any dimensions, because dialog sizes itself automatically to fit.
如何修复我的代码以正确调整对话框大小?请注意,我不知道项目数,它是动态的.
How to fix my code to get dialog sized correctly? Note that I don't know item count, it's dynamic.
按照建议,我用列包装了内容:
As suggested, I wrapped content with column:
createDialog() {
fetchCities().then((response) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Wybierz miasto'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: ListView.builder(
shrinkWrap: true,
itemCount: response.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(response[index].name),
onTap: () => citySelected(response[index].id),
);
},
),
)
]
),
);
}
);
});
}
结果 - 异常:
I/flutter (5917): ══╡ 渲染库发现异常╞═════════════════════════════════════════════════════════ I/颤振 (5917):在 performLayout() 期间引发了以下断言:I/flutter (5917): RenderViewport 不支持返回内在方面.I/flutter(5917):计算内在尺寸将需要实例化视口的每个孩子,这I/flutter (5917):击败视口懒惰的观点.
I/flutter ( 5917): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 5917): The following assertion was thrown during performLayout(): I/flutter ( 5917): RenderViewport does not support returning intrinsic dimensions. I/flutter ( 5917): Calculating the intrinsic dimensions would require instantiating every child of the viewport, which I/flutter ( 5917): defeats the point of viewports being lazy.
要测试的更通用代码:
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Select city'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: ListView.builder(
shrinkWrap: true,
itemCount: 2,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text("City"),
onTap: () => {},
);
},
),
)
]
),
);
}
);
推荐答案
将你的 Container
包装在 Column
中,在 content 参数中,在其中设置 mainAxisSize.min
,在 Column 属性中
Wrap your Container
inside a Column
, in the content paramenter, inside of it, set the mainAxisSize.min
, in Column property
这篇关于Flutter - 自动调整大小的 AlertDialog 以适应列表内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!