如何约束AlertDialog的高度

13

我展示一个带有列表的对话框。

    showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text(select_conference),
            content: ListView.separated(
              itemCount: selected.length,
              separatorBuilder: (context, index) => CommonDivider(),
              itemBuilder: (context, index) => ListTile(...),
            ),
          );
        });

但无论有多少元素,对话框都会填满所有可用的高度。是否有解决方案可以在不计算列表元素高度的情况下解决此问题?

但是,无论该列表有多少个元素,对话框都将占据所有可用高度。是否有一种解决方案可以在不需要计算列表元素高度的情况下解决这个问题呢?

3个回答

44

使用 Column 包装你的内容,并将 mainAxisSize 设置为 MainAxisSize.min

AlertDialog(
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      //your content
    ],
  ),

1
这应该是被接受的答案。你不需要像提问者所希望的那样计算高度。 - BHuelse
嗯,那有点像是hack。我相信还有更优雅的解决方案。 - Andrey Gordeev
我想创建一个固定大小为150 x 150像素的showDialog。我已经将容器的宽度和高度更新为return Container(height:150,width:150,);但仍然无法正常工作。我得到了一个3:2比例的矩形框,而不是正方形。有什么建议吗? - Kamlesh
@Kamlesh,你最好发布一个新问题。 - Andrey Gordeev
这个解决方案对我没用。AlertDialog( content: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ //你的内容 ], ), 非常感谢。 - Kamlesh

9

您可以将其包装在SizedBoxConstrainedBox中。

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 100.0),
  child: AlertDialog(
    ...
  ),
);

或者,您可以在ListView中将shrinkWrap设置为true,以便它只占用必要的最少垂直空间。

ListView(
  shrinkWrap: true,
  ...
)

很奇怪,我之前已经尝试过shrinkWrap但是没有起作用。但现在它可以工作了。 - Andrii Turkovskyi
我想创建一个固定大小为150 x 150像素的showDialog。我已经将容器的宽度和高度更新为return Container(height:150,width:150,);但仍然无法正常工作。我得到了一个3:2比例的矩形框,而不是正方形。有什么建议吗? - Kamlesh
2
ConstrainedBox( constraints: BoxConstraints(maxHeight: 100.0), child: 对我没用。谢谢 - Kamlesh

2
一个对话框的insetPadding属性控制着对话框周围的填充,因此您可以设置值来有效地减小对话框的高度/宽度,例如:

    showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            insetPadding: EdgeInsets.symmetric(
              horizontal: 50.0,
              vertical: 100.0,
            ),
            title: Text('...'),
            content: Text('...'),
          );
        });


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接