美文网首页
Flutter showDialog键盘上移

Flutter showDialog键盘上移

作者: 倪大头 | 来源:发表于2022-11-08 14:37 被阅读0次

写弹窗时发现弹窗里的输入框没有使界面上移,挡住了部分界面,很难受


alert.png

想要界面随键盘上移需要把弹窗Widget按如下结构嵌套:
Scaffold-->SingleChildScrollView-->弹窗Widget

PS:最外层没有Scaffold的话SingleChildScrollView也无法触发滚动

套完以后会产生一个新问题,Scaffold会挡住showDialog的点击dismiss事件,需要自己来处理点击空白处关闭弹窗的事件。

层级结构变为:

return Scaffold(
      backgroundColor: Colors.transparent,
      body: Stack(
        children: [
          GestureDetector(
            child: Container(
              color: Colors.transparent,
            ),
            onTap: () => Navigator.pop(context),
          ),
          Center(
            child: SingleChildScrollView(
              child: Container(
                width: _contentWidth,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20.w),
                  color: Colors.white,
                ),
                clipBehavior: Clip.antiAlias,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Padding(
                      padding: EdgeInsets.only(top: 110.w, bottom: 30.w),
                      child: Text(
                        '我是一段很长的文字',
                        style: TextStyle(
                          fontSize: 35.sp,
                          fontWeight: FontWeight.w500,
                          color: Colors.black,
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 110.w, bottom: 30.w),
                      child: Text(
                        '我是一段很长的文字',
                        style: TextStyle(
                          fontSize: 35.sp,
                          fontWeight: FontWeight.w500,
                          color: Colors.black,
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 110.w, bottom: 30.w),
                      child: Text(
                        '我是一段很长的文字',
                        style: TextStyle(
                          fontSize: 35.sp,
                          fontWeight: FontWeight.w500,
                          color: Colors.black,
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 110.w, bottom: 30.w),
                      child: Text(
                        '我是一段很长的文字',
                        style: TextStyle(
                          fontSize: 35.sp,
                          fontWeight: FontWeight.w500,
                          color: Colors.black,
                        ),
                      ),
                    ),
                    // 输入框
                    _inputView(),
                    // 底部按钮栏
                    _bottomView(),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );

Scaffold的body是Stack,Stack里是背景层以及SingleChildScrollView,这样在支持界面上移的同时也不耽误点击背景关闭弹窗的事件了

相关文章

网友评论

      本文标题:Flutter showDialog键盘上移

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