0%

解决 Flutter showModalBottomSheet 被键盘遮挡

在使用 showModalBottomSheet 底部弹出内容时,如果唤起了键盘、输入法,showModalBottomSheet 中的内容往往会被挡住,给 showModalBottomSheet 设置 isScrollControlled,再套一个 SingleChildScrollView 以及 设定一个 padding 一般就能解决问题了。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
showModalBottomSheet(
isScrollControlled: true,
builder: (BuildContext context) {
return SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextField(
keyboardType: TextInputType.text,
autofocus: true,
),
],
),
),
);
},
);