Flutter showModalBottomSheet被软键盘遮挡，Dialog在软键盘上面；

最新推荐文章于 2024-08-12 15:30:08 发布

Cui晨

最新推荐文章于 2024-08-12 15:30:08 发布

阅读量2.5k

点赞数 2

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.csdn.net/qq_35605213/article/details/116798395

版权

flutter 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

showModalBottomSheet弹出的底部Dialog难免会有输入框，在输入时软键盘会遮盖住Dialog；

解决方法：让showModalBottomSheet弹出的Dialog在软键盘之上；

1、给 showModalBottomSheet 设置 isScrollControlled: true ；设置后Dialog会全屏、然后在用 SizedBox 限制弹框宽高；

2、showModalBottomSheet 的 Widget最外层使用AnimatedPadding，让软键盘弹出后布局可以滑动到软键盘上面；

          showModalBottomSheet<bool>(
                  context: context,
                  builder: (BuildContext context) {
                    return AnimatedPadding(
                      padding: MediaQuery.of(context).viewInsets,
                      duration: const Duration(milliseconds: 100),
                      child: SizedBox(
                        height: ScreenUtil().screenHeight * 0.5,
                        // color: Colors.white,
                        child: TextField(
                          maxLength: 100,
                          maxLines: 5,
                        ),
                      ),
                    );
                  },
                  isDismissible: false,
              isScrollControlled: true,);

如果集成到原生里面，例如Android 需要在清单文件配置上 android:windowSoftInputMode="adjustResize" 属性

如果是showDialog（）的方式弹出的Dialog，最外层的布局使用 Scaffold 就可以自动上移了；