美文网首页
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