我试着做一个底部表,有一个文本字段,自动聚焦设置为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,
    ),]);

当前回答

为了专注于键盘在BottomSheet - Wrap TextField在Padding Widget如下:

showModalBottomSheet(
              context: context,
              builder: (context) {
                return Container(
                  child: Padding(
                    padding: EdgeInsets.only(
                        bottom: MediaQuery.of(context).viewInsets.bottom),
                    child: TextField(
                      autofocus: true,
                    ),
                  ),
                );
              }); 

其他回答

如果你有全屏或固定大小的showModalBottomSheet,不要使用填充,这不会解决你的问题。使用边距代替填充,就像这样:

  showModalBottomSheet(
          context: context,
          builder: (context) {
            return Container(
                marign: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.bottom),
                child: TextField()
            );
          }); 

为了专注于键盘在BottomSheet - Wrap TextField在Padding Widget如下:

showModalBottomSheet(
              context: context,
              builder: (context) {
                return Container(
                  child: Padding(
                    padding: EdgeInsets.only(
                        bottom: MediaQuery.of(context).viewInsets.bottom),
                    child: TextField(
                      autofocus: true,
                    ),
                  ),
                );
              }); 

要修复此问题

你所需要的就是使用MediaQuery.of(context).viewInsets.bottom填充键盘 为了更保险,设置底部表格对话框的isScrollControlled = true,这将允许底部表格获得所需的全部高度。

请注意

如果您的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又打破了改动!”现在你需要再次给底部填充,这样键盘就不会重叠在底部。

不要在构建器中使用builder:(BuildContext context){},而是使用builder: (context) {}

有了这个解决方案,我的模态底部表坚持状态栏(行为像脚手架与resizeToAvoidBottomInset: false),并允许查看所有的表单字段和滚动的形式,如果它仍然需要查看底部文本字段。

要了解更多细节,这里是我找到解决方案的链接- https://github.com/flutter/flutter/issues/18564#issuecomment-602604778

我通过增加打开键盘时子部件的高度来解决这个问题。 MediaQuery.of(context). viewinsets的初始值。底部为0,当键盘聚焦时它会改变。

showModalBottomSheet<void>(
      enableDrag: true,
      isScrollControlled: true,
      context: context,
      builder: (BuildContext context) {
        return Card(
          color: Colors.white,
          child: Container(
            height: MediaQuery.of(context).size.height / 2 +
                MediaQuery.of(context).viewInsets.bottom,
            child: Column(
              children: <Widget>[
                TextField(),
                TextField(),
              ],
            ),
          ),
        );
      },
    );