如何将底页与具有文本字段的键盘一起移动（自动对焦为真）？

小编典典

如何将底页与具有文本字段的键盘一起移动（自动对焦为真）？

all

我正在尝试制作一个具有文本字段且自动对焦设置为 true 的底页，以便弹出键盘。但是，底页与键盘重叠。有没有办法将底页移到键盘上方？

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,
    ),]);

阅读 76

2022-08-24

共1个答案

小编典典

要解决此问题
添加isScrollControlled = true到BottomSheetDialog它将使底部片材占据所需的全部高度，从而提供TextField键盘未涵盖的更多保险。
使用添加键盘填充MediaQuery.of(context).viewInsets.bottom
笔记

如果你BottomSheetModel是Column确保你添加 mainAxisSize: MainAxisSize.min,否则工作表将覆盖整个屏幕。

例子

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: [
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),
            ],
          ),
    ));
```

请注意：

shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),

这不是必需的。只是我正在创建一个圆形底部表。

更新

Flutter 2.2 再次打破了这些变化！”现在您需要再次提供底部填充，这样键盘就不会与底部表重叠。

2022-08-24