如何在 Flutter 中将 Bottom Sheet 的最大高度设置为屏幕高度的 2/3

Question

我目前正在尝试制作如下底页：

Container(
  child: TextButton(
    onPressed: () {
      showModalBottomSheet(
        context: context,
        builder: (context) {
          return LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              double maxHeight = (2 / 3) * MediaQuery.of(context).size.height;
              return Container(
                height: constraints.maxHeight > maxHeight
                    ? maxHeight
                    : constraints.maxHeight,
                child: _BottomSheetWidget(),
              );
            },
          );
        },
        isScrollControlled: true, // Ensures the sheet is fully visible on smaller screens
      );
    },
    child: Text('Open Bottom Sheet'),
  ),
)

这是我的底表小部件：

class _BottomSheetWidget extends StatelessWidget {
    const _BottomSheetWidget();

    @override
    Widget build(BuildContext context) {
        return SafeArea(
            child: SingleChildScrollView(
                child: Column(
                    [
                        // ...Some dynamic content 
                    ]
                )
            )
        )
    }
}

我目前所做的是使底部工作表始终具有 2 / 3 屏幕宽度（即使内容高度小于屏幕尺寸的 2 / 3，因此始终在底部工作表中创建一个空白部分）。

列内容是动态的（基于获取的计数数据）。如果内容高度小于屏幕尺寸的 2 / 3，我希望底部工作表高度 适合内容。但是 如果内容高度超过屏幕尺寸的 2 / 3，我希望底部工作表高度是屏幕尺寸的 2 / 3，因此底部工作表是可滚动的。那该怎么办呢？

Answer 1

Container(
  child: TextButton(
    onPressed: () {
      showModalBottomSheet(
        context: context,
        builder: (context) {
          return ConstrainedBox(
                      constraints:  BoxConstraints(
                        maxHeight: (2 / 3) * MediaQuery.of(context).size.height,
                      ),
                child: _BottomSheetWidget(),
              );
            },
          );
        },
      );
    },
    child: Text('Open Bottom Sheet'),
  ),
)