我正在使用 showModalBottomSheet,开始时给它设定了高度为90%。底部有两个选项卡(重复和一次性),重复选项卡有很多内容,高度为90%,表现完美。但是当我点击一次性选项卡时,我想将底部菜单的高度减少到40%,因为它没有更多内容,并且看起来不太好看。但是我无法在按下一次性选项卡按钮时动态更改底部菜单的高度。请问是否有人可以帮助我在Flutter中实现此功能?
您可以将以下代码用于自定义小部件,只需将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(),
));
});
}
动态设置高度并使内容居中
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)])));
});
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),
...
);