【问题标题】:How to constrain height of AlertDialog如何限制 AlertDialog 的高度
【发布时间】:2018-10-09 08:48:06
【问题描述】:

我显示对话框,里面有列表。

    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(...),
            ),
          );
        });

但无论有多少元素 - 对话框都会填充所有可用高度。在不计算列表元素高度的情况下,有什么解决方案可以解决这个问题吗?

【问题讨论】:

    标签: flutter


    【解决方案1】:

    Column 包装您的内容并将mainAxisSize 设置为MainAxisSize.min

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

    【讨论】:

    • 这应该是公认的答案。你不需要计算高度,就像开瓶器希望的那样。
    • 嗯,这有点骇人听闻。我相信有更优雅的解决方案。
    • 我想创建一个固定大小为 150 x 150 像素的 showDialog。我已将容器宽度和高度更新为 return Container( height: 150, width: 150, );但仍然无法正常工作。我得到的是 3:2 比例的矩形框,而不是方形份额。任何建议。
    • @Kamlesh 你最好发布一个新问题
    • 这个解决方案对我不起作用。 AlertDialog( content: Column( mainAxisSize: MainAxisSize.min, children: &lt;Widget&gt;[ //your content ], ), 非常感谢。
    【解决方案2】:

    您可以将其包装在 SizedBoxConstrainedBox

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

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

    ListView(
      shrinkWrap: true,
      ...
    )
    

    【讨论】:

    • 这很奇怪。我已经尝试过 shrinkWrap,但没有成功。但现在它可以工作了
    • 我想创建一个固定大小为 150 x 150 像素的 showDialog。我已将容器宽度和高度更新为 return Container( height: 150, width: 150, );但仍然无法正常工作。我得到的是 3:2 比例的矩形框而不是方形份额。任何建议。
    • ConstrainedBox( constraints: BoxConstraints(maxHeight: 100.0), child: 不适合我。谢谢
    【解决方案3】:

    DialoginsetPadding 属性控制对话框周围的填充,因此您可以设置值以有效减小对话框的高度/宽度,例如

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-05-01
      • 2015-08-01
      • 2012-08-05
      • 1970-01-01
      • 2014-11-05
      • 2014-12-03
      • 1970-01-01
      相关资源
      最近更新 更多