如何在Flutter中动态减小底部表单的高度？

Question

我正在使用 showModalBottomSheet，开始时给它设定了高度为90%。底部有两个选项卡（重复和一次性），重复选项卡有很多内容，高度为90%，表现完美。但是当我点击一次性选项卡时，我想将底部菜单的高度减少到40%，因为它没有更多内容，并且看起来不太好看。但是我无法在按下一次性选项卡按钮时动态更改底部菜单的高度。请问是否有人可以帮助我在Flutter中实现此功能？

- Umair

---

上传您的代码，这样我们就可以更好地理解它。 - Bilaal Abdel Hassan

Answer 1

您可以将以下代码用于自定义小部件，只需将PutYourWidgetHere()替换为您的自定义小部件即可。

void showBottomSheet() {
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (BuildContext context) {
          return SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.bottom),
                child: PutYourWidgetHere(),
              ));
        });
  }

- Sanjay Sharma

---

在添加了isScrollControlled属性后，我注意到底部工作表正在获取我的容器高度（由builder属性返回），因此我添加了一个方法来根据屏幕大小获取高度。谢谢！ - Ramiro G.M.

Answer 2

动态设置高度并使内容居中

showCupertinoModalBottomSheet(
  expand: false,
  enableDrag: true,
  isDismissible: true,
  barrierColor: ColorUtils.disableBackground.withAlpha(128),
  backgroundColor: ColorUtils.enableBackground,
  topRadius: Radius.circular(SizeUtils.minBlock * 4),
  context: globalKey.currentState!.context,
  builder: (builder) {
    return Padding(
        padding: EdgeInsets.all(SizeUtils.minBlock * 8),
        child: Container(
            constraints: BoxConstraints(
                minHeight: SizeUtils.blockHeight * 30,
                maxHeight: SizeUtils.blockHeight * 60),
            child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [SingleChildScrollView(child: widget)])));
  });

- seliote

Answer 3

你可以查看showModalBottomSheet中_ModalBottomSheetLayout的源代码。

maxHeight: isScrollControlled
  ? constraints.maxHeight
  : constraints.maxHeight * 9.0 / 16.0,

maxHeight的值取决于isScrollControlled和constraints，默认的最大高度是屏幕高度的9/16。

因此，您必须分配这两个属性来实现动态的最大高度：

showModalBottomSheet(
  isScrollControlled: true,
  constraints: BoxConstraints(maxHeight: your dynamic height),
  ...
);

- 无夜之星辰