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

当前回答

给那些不能解决问题的人尝试所有的答案。这些答案是正确的,但不太清楚。

当使用

MediaQuery.of(上下文).viewInsets.bottom)

make sure your context variable is using the one provided by bottom sheet builder property.

c builder:(* * * *) = > MediaQuery.of (c * * * *)

其他回答

我通过增加打开键盘时子部件的高度来解决这个问题。 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(),
              ],
            ),
          ),
        );
      },
    );

为了专注于键盘在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,
                    ),
                  ),
                );
              }); 

用脚手架小部件包装表单,然后用SingleChildScrollView包装TextFormField:


 return Container(
          height: screenHeight * .66,
          child: Scaffold(
             body: Form(
               key: _form,
               child: SingleChildScrollView(
                 child:TextFormField()
               )
              )
             )
           )

包:https://pub.dev/packages/modal_bottom_sheet

将小部件包装到Padding中,并像这样设置Padding ==>

padding: MediaQuery.of(context).viewInsets // viewInsets will decorate your screen

你可以使用 showMaterialModalBottomSheet或showModalBottomSheet或showCupertinoModalBottomSheet

showModalBottomSheet(
        context: context,
        barrierColor: popupBackground,
        isScrollControlled: true, // only work on showModalBottomSheet function
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(borderRadiusMedium),
                topRight: Radius.circular(borderRadiusMedium))),
        builder: (context) =>  Padding(
            padding: MediaQuery.of(context).viewInsets,
            child: Container(
                   height: 400, //height or you can use Get.width-100 to set height
                   child: <Your Widget here>
             ),)),)

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

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

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