如何将底页与具有文本字段的键盘一起移动(自动对焦为真)? [英] How to Move bottomsheet along with keyboard which has textfield(autofocused is true)?
问题描述
我正在尝试制作一个具有文本字段且自动对焦设置为 true 的底页,以便弹出键盘.但是,底页与键盘重叠.有没有办法将底页移到键盘上方?
填充(填充:EdgeInsets.only(底部:MediaQuery.of(context).viewInsets.bottom),child: Column(children: <Widget>[文本域(自动对焦:真,装饰:InputDecoration(提示文本:'标题'),),文本域(装饰:InputDecoration(hintText:'详细信息!'),键盘类型:TextInputType.multiline,最大线数:4,),文本域(装饰:InputDecoration(hintText:'附加细节!'),键盘类型:TextInputType.multiline,最大线数:4,),]);
将 isScrollControlled = true
添加到 BottomSheetDialog
它将允许底部工作表占据所需的全部高度这为 TextField
不被键盘覆盖提供了更多保障.
使用 MediaQuery.of(context).viewInsets.bottom
注意
如果您的 BottomSheetModel
是 Column
确保添加 mainAxisSize: MainAxisSize.min,
否则工作表将覆盖整个屏幕.p>
示例
showModalBottomSheet(形状:圆角矩形边框(边界半径:边界半径.vertical(顶部:半径.圆形(25.0))),背景颜色:颜色.黑色,上下文:上下文,isScrollControlled:真,建设者:(上下文)=>填充(填充:常量 EdgeInsets.symmetric(水平:18),孩子:列(crossAxisAlignment:CrossAxisAlignment.start,mainAxisSize: MainAxisSize.min,孩子们:<小部件>[填充(填充:const EdgeInsets.symmetric(水平:12.0),child: Text('请输入您的地址',样式:TextStyles.textBody2),),大小盒(高度:8.0,),填充(填充:EdgeInsets.only(底部:MediaQuery.of(context).viewInsets.bottom),孩子:文本字段(装饰:输入装饰(提示文本:'addrss'),自动对焦:真,控制器:_newMediaLinkAddressController,),),大小盒(高度:10),],),));
请注意:
形状:RoundedRectangleBorder(边界半径:边界半径.vertical(顶部:半径.圆形(25.0))),
这不是必需的.只是我正在创建一个圆形底片.
填充:MediaQuery.of(context).viewInsets
更新 Flutter 2.2 再次打破了这些变化!"现在您需要再次提供底部填充,这样键盘就不会与底部表重叠.
I'm trying to make a bottomsheet that has a text field and autofocus is set to true so that the keyboard pops up. But, bottomsheet is overlapped by the keyboard. Is there a way to move bottomsheet above the keyboard?
Padding(
padding:
EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: Column(children: <Widget>[
TextField(
autofocus: true,
decoration: InputDecoration(hintText: 'Title'),
),
TextField(
decoration: InputDecoration(hintText: 'Details!'),
keyboardType: TextInputType.multiline,
maxLines: 4,
),
TextField(
decoration: InputDecoration(hintText: 'Additional details!'),
keyboardType: TextInputType.multiline,
maxLines: 4,
),]);
Add isScrollControlled = true
to BottomSheetDialog
it'll allow the bottom sheet to take the full required height which gives more insurance that TextField
is not covered by the keyboard.
Add Keyboard padding using MediaQuery.of(context).viewInsets.bottom
Note
If your BottomSheetModel
is Column
make sure you add mainAxisSize: MainAxisSize.min,
otherwise the sheet will cover the whole screen.
Example
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),
backgroundColor: Colors.black,
context: context,
isScrollControlled: true,
builder: (context) => Padding(
padding: const EdgeInsets.symmetric(horizontal:18 ),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Text('Enter your address',
style: TextStyles.textBody2),
),
SizedBox(
height: 8.0,
),
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: TextField(
decoration: InputDecoration(
hintText: 'adddrss'
),
autofocus: true,
controller: _newMediaLinkAddressController,
),
),
SizedBox(height: 10),
],
),
));
Please note that:
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),
It's not required. It's just that I'm creating a rounded bottom sheet.
padding: MediaQuery.of(context).viewInsets
UPDATED Flutter 2.2 breaks the changes again!" Now you need to give bottom padding once again so keyboard don't overlaps bottomsheet.
这篇关于如何将底页与具有文本字段的键盘一起移动(自动对焦为真)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!