//先上效果图(咱们是高度固定的,高度动态的咱们下篇文章见)
底部弹窗视图
使用官方控件
showModalBottomSheet
注意点:showModalBottomSheet是官方的底部弹窗,但是正常情况高度是固定的
showModalBottomSheet的isScrollControlled属性,设置为true,弹窗会覆盖整个手机。设置为false,弹窗大概是整个屏幕的9/16高。
废话不多说,看代码
showModalBottomSheet(
isScrollControlled: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.w),
topRight: Radius.circular(10.w),
),
),
context: context,
builder: (BuildContext context) {
return SizedBox(
height: Get.height-44.w,
child: Container(
height: Get.height,
child: Text('Hello'),
),
);
});
注意,此处必须先设置isScrollControlled为:true,(全屏展示) 接着设置里面内容高度(此处是固定高度),这样才能是我们自己设置的高度,否则视图高度就只能是整个屏幕的9/16高。
网友评论