美文网首页
Flutter 控件之底部弹窗视图

Flutter 控件之底部弹窗视图

作者: 我是卖报的小行家 | 来源:发表于2021-07-16 11:39 被阅读0次

//先上效果图(咱们是高度固定的,高度动态的咱们下篇文章见)


底部弹窗视图

使用官方控件
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高。

相关文章

网友评论

      本文标题:Flutter 控件之底部弹窗视图

      本文链接:https://www.haomeiwen.com/subject/ovfypltx.html