Flutter 包含文本字段的ShowModalBottomSheet在颤振升级2.2.0后使用键盘隐藏
在我的应用程序中,当用户单击FAB时,它会触发一个包含文本字段的ModalBottomSheet。直到今天(当我更新到Flatter2.2.0时),下面的代码工作得很好:当用户点击文本字段时,底部页面向上移动,我们可以很好地使用键盘。 现在,当我们点击文本字段时,键盘会隐藏底部 更新是否有更改 代码如下:Flutter 包含文本字段的ShowModalBottomSheet在颤振升级2.2.0后使用键盘隐藏,flutter,keyboard,textfield,flutter-showmodalbottomsheet,Flutter,Keyboard,Textfield,Flutter Showmodalbottomsheet,在我的应用程序中,当用户单击FAB时,它会触发一个包含文本字段的ModalBottomSheet。直到今天(当我更新到Flatter2.2.0时),下面的代码工作得很好:当用户点击文本字段时,底部页面向上移动,我们可以很好地使用键盘。 现在,当我们点击文本字段时,键盘会隐藏底部 更新是否有更改 代码如下: floatingActionButton: FloatingActionButton( backgroundColor: Colors.blue[800],
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blue[800],
child: Icon(Icons.add),
onPressed: () {
showModalBottomSheet<void>(
isScrollControlled: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
context: context,
builder: (BuildContext context) {
return Container(
height: 250,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(26.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text(
'Ajouter une liste au carnet',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.blue[800],
fontSize: 22.0,
),
),
),
SizedBox(
height: 30,
),
Column(
children: [
TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
focusColor: Colors.blue,
border: OutlineInputBorder(
borderRadius:
BorderRadius.circular(10.0),
),
labelText:
'Titre de la nouvelle liste'),
onChanged: (value) {
titre = value;
},
),
floatingActionButton:floatingActionButton(
背景颜色:颜色。蓝色[800],
子:图标(Icons.add),
已按下:(){
showModalBottomSheet(
是的,
形状:圆形矩形边框(
borderRadius:仅限borderRadius(
左上:半径。圆形(20.0),
右上角:半径。圆形(20.0),
),
),
上下文:上下文,
生成器:(BuildContext上下文){
返回容器(
身高:250,
儿童:中心(
子:列(
mainAxisSize:mainAxisSize.min,
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
填充物(
填充:常数边集全部(26.0),
子:列(
crossAxisAlignment:crossAxisAlignment.stretch,
儿童:[
填充物(
填充:仅限常量边集(顶部:8.0),
子:文本(
“一张明信片”,
textAlign:textAlign.center,
样式:TextStyle(
颜色:颜色。蓝色[800],
字体大小:22.0,
),
),
),
大小盒子(
身高:30,
),
纵队(
儿童:[
TextFormField(
键盘类型:TextInputType.emailAddress,
装饰:输入装饰(
调焦颜色:颜色。蓝色,
边框:大纲输入边框(
边界半径:
边界半径。圆形(10.0),
),
标签文本:
“新利斯特税”(Titre de la nouvelle liste),
一旦更改:(值){
滴度=值;
},
),
您可以将底部视图插图添加到底部工作表的底部,从而将键盘高度添加到键盘的填充位置
例如
我找到了解决这个问题的方法: 我将SingleChildScrollView作为第一个子元素添加到ModalBottomSheet中,并将由“CbL”给出的padding元素直接添加到那里,而不是添加到容器中
return SingleChildScrollView(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Container(
height: 250,
感谢CbL的帮助:)不幸的是,它不起作用,我得到了“底部117个piwels溢出的renderFlex”。我确实很困惑为什么这个屏幕已经工作了几个星期,现在它不再工作了…我不确定你是否正在同一台设备上测试你的现有代码。只需看一下代码,对我来说,这在一些小屏幕手机上很有可能溢出。建议你将SingleChildScrollView添加到为了避免键盘隐藏东西,我正在同一台设备上测试。三星A21S。这是我仅有的一台;)SingleChildScrollView解决了溢出问题。但我的底片仍然被隐藏…我真的相信这与颤振升级有关,因为昨晚一切都很好…已经好几个星期没有接触代码了…升级后,它不再工作了…似乎又回到了老问题。我看到很多2到3年前的问题d帖子提到了同样的问题。。。
return SingleChildScrollView(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Container(
height: 250,