写弹窗时发现弹窗里的输入框没有使界面上移,挡住了部分界面,很难受
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,这样在支持界面上移的同时也不耽误点击背景关闭弹窗的事件了
网友评论