[英]How to make keyboard open and textFormField hover over keyboard while opening Dart Flutter showModalBottomSheet?
I have an application like this:我有一个这样的应用程序:
When I press the floatActionButton
below, this is what happens:当我按下下面的floatActionButton
时,会发生以下情况:
When I come to this screen, I want the keyboard to open automatically.当我来到这个屏幕时,我希望键盘自动打开。
When I press the textFormField myself, a screen like this happens:当我自己按下 textFormField 时,会出现这样的屏幕:
The keyboard is getting ahead of the textFormField.键盘领先于 textFormField。 How do I prevent this?我该如何防止这种情况?
So, when showModalBottomSheet is opened, I want both the keyboard to open automatically and the keyboard not to get in front of the textFormField.因此,当打开 showModalBottomSheet 时,我希望键盘自动打开并且键盘不要位于 textFormField 的前面。 How can I do that?我怎样才能做到这一点?
I want to do like this:我想这样做:
Codes:代码:
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
backgroundColor: Colors.white,
context: context,
builder: (context) {
return Container(
height: 125,
child: Column(
children: [
Expanded(
child: TextFormField(
decoration: InputDecoration(
labelText: 'Add new task',
labelStyle: TextStyle(
color: Colors.black,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
),
),
style: TextStyle(
color: Colors.black,
),
),
)
],
),
);
},
);
Thanks in advance for the help.先谢谢您的帮助。
Wrap your Container with another Container and give用另一个 Container 包裹你的 Container 并给
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),
and also give isScrollControlled: true
in showModalBottomSheet()
并在showModalBottomSheet()
中给出isScrollControlled: true
Like In your example,就像在你的例子中,
showModalBottomSheet(
isScrollControlled: true,
backgroundColor: Colors.white,
context: context,
builder: (context) {
return Container(
padding: EdgeInsets.only(
bottom: MediaQuery
.of(context)
.viewInsets
.bottom,
),
child: Container(
height: 125,
child: Column(
children: [
Expanded(
child: TextFormField(
decoration: InputDecoration(
labelText: 'Add new task',
labelStyle: TextStyle(
color: Colors.black,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
),
),
style: TextStyle(
color: Colors.black,
),
),
)
],
),
),
);
},
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.