我正在尝试制作一个具有文本字段且自动对焦设置为 true 的底页,以便弹出键盘。但是,底片被键盘覆盖。有没有办法将 bottomsheet 移到键盘上方?
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,
),]);
最佳答案
- 解决这个问题
将
isScrollControlled = true
添加到BottomSheetDialog
它将允许底部工作表占据所需的全部高度,从而更加确保键盘不会覆盖文本字段
。使用
MediaQuery.of(context).viewInsets.bottom
添加键盘填充
- 注意
如果您的
BottomSheetModel
是Column
,请确保添加mainAxisSize: MainAxisSize.min,
否则工作表将覆盖整个屏幕.使用多个 TextField 或 TextFormField
- 示例
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),
backgroundColor: Colors.black,
context: context,
isScrollControlled: true,
builder: (context) => Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
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,
),
TextField(
decoration: InputDecoration(
hintText: 'adddrss'
),
autofocus: true,
controller: _newMediaLinkAddressController,
),
SizedBox(height: 10),
],
),
));
请注意:
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),
这不是必需的。只是我正在创建一个圆形的底部工作表。
- 已更新
Flutter 2.2 再次打破变化!现在您需要再次提供底部填充,这样键盘就不会与 bottomsheet 重叠。
关于dart - 如何将底页与具有文本字段的键盘一起移动(自动对焦是真的)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53869078/