小编典典

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

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

阅读 71

收藏
2022-08-24

共1个答案

小编典典

  • 要解决此问题

  • 添加isScrollControlled = trueBottomSheetDialog它将使底部片材占据所需的全部高度,从而提供TextField键盘未涵盖的更多保险。

  • 使用添加键盘填充MediaQuery.of(context).viewInsets.bottom

  • 笔记

如果你BottomSheetModelColumn确保你添加 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