在具有 MainAxisSize.min 的列内具有可滚动容器的对话框

Question

我有一个

Dialog

和

AppBar

和

Column

，其中包含我想要滚动的内容。为此，我在

SingleChildScrollView

内使用

Expanded

来包裹我的

Column

。所以代码看起来像这样：

@override
  Widget build(BuildContext context) {
    return StatefulBuilder(
      builder: (context, StateSetter setState) {
        return Dialog(
          elevation: 0,
          backgroundColor: Colors.transparent,
          child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(12)),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                  AppBar(...),
                  Expanded(
                    child: SingleChildScrollView(
                      child: ClipRRect(
                        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(12), bottomRight: Radius.circular(12)),
                        child: Container(...),
                      ),
                    ),
                  ),
              ],
            ),
          ),
        );
      },
    );
  }

但是，

Dialog

占据了所有高度，忽略了

MainAxisSize.min

列字段。根据我的理解，这是因为

Expanded

小部件而发生的，但我需要它才能使

SingleChildScrollView

工作...有没有办法通过不可滚动的标题实现可滚动内容，同时保持

MainAxisSize.min

字段不被忽略？

Answer 1

用

ConstrainedBox

小部件包裹对话框并为其设置 maxHeight：

Dialog(
  elevation: 0,
  backgroundColor: Colors.transparent,
  // set max height for dialog here with ConstrainedBox
  child: ConstrainedBox(
    constraints: const BoxConstraints(
      maxHeight: 450,
    ),
    child: ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(12)),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
            ...
        ],
      ),
    ),
  ),
),