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

Question

我正在尝试制作一个带有文本字段的底页，并将自动对焦设置为 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,
    ),]);

Answer 1

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

Answer 2

解决这个问题

将 isScrollControlled = true 添加到 BottomSheetDialog 它将允许底部 sheet 达到所需的全部高度，这比 TextField 更保险不被键盘覆盖。
使用 MediaQuery.of(context).viewInsets.bottom
添加键盘填充

备注

如果您的 BottomSheetModel 是 Column，请务必添加 mainAxisSize: MainAxisSize.min,，否则 sheet 将覆盖整个屏幕。

例子

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: <Widget>[
                  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))),

不需要。只是我在创建一个圆底 sheet.

padding: MediaQuery.of(context).viewInsets

已更新

Flutter 2.2 再次打破改变！现在你需要再次给底部填充，这样键盘就不会与底部重叠sheet.

Answer 3

用 Scaffold 小部件包裹 Form，然后用 SingleChildScrollView 包裹 TextFormField :


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

Answer 4

只需添加：

isScrollControlled: true 显示模态底部表
padding: MediaQuery.of(context).viewInsets 到构建器中的小部件
column/wrap 都有效

showModalBottomSheet<void>(
  isScrollControlled: true,
  context: context,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(30.0),
        topRight: Radius.circular(30.0)),
  ),
  builder: (BuildContext context) {
    return Padding(
        padding: MediaQuery.of(context).viewInsets,
        child: Container(
            child: Wrap(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: 'Enter a search term'),
            ),
            TextField(
              decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: 'Enter a search term'),
            ),
            TextField(
              decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: 'Enter a search term'),
            ),
            TextField(
              decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: 'Enter a search term'),
            )
          ],
        )));
  },
);

2020 年 2 月 25 日更新更好的解决方案

showModalBottomSheet(
 isScrollControlled: true,
 builder: (BuildContext context) {

    return SingleChildScrollView(
      child: Container(
        padding:
            EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 0.0), // content padding
          child: Form(...)) // From with TextField inside


});

Answer 5

结合不同的解决方案后，我得到了这个：

如果您不想全屏并且不想使用填充解决方法，请使用

  showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      enableDrag: true,
      isDismissible: true,
      useRootNavigator: true,
      builder: (BuildContext ctx) {
        return Scaffold( // use CupertinoPageScaffold for iOS
          backgroundColor: Colors.transparent,
          resizeToAvoidBottomInset: true, // important
          body: SingleChildScrollView(
            child: Form(
              child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    TextFormField(),
                    TextFormField(),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );

关于 Flutter（Channel master，v1.15.3-pre.37，关于 Mac OS X 10.15.2 19C57，语言环境 en-US）

Answer 6

试试这个

我的解决方案是

使用isScrollControlled: true

添加填充

padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)

将您的布局包装在 SingleChildScrollView

示例代码

Future<void> future = showModalBottomSheet(
  context: context,
  isDismissible: true,
  isScrollControlled: true,
  backgroundColor: Colors.white.withOpacity(0.2),
  builder: (context) => SingleChildScrollView(
    child: GestureDetector(
      child: Padding(
        padding: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom
        ),
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Column(
            children: <Widget>[
              // add your widget here
            ],
          ),
        ),
      )
    ),
  )
);

Answer 7

我通过在键盘打开时增加子窗口小部件的高度来修复它。 MediaQuery.of(context).viewInsets.bottom 的初始值为 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(),
              ],
            ),
          ),
        );
      },
    );

Answer 8

如果你有全屏或固定尺寸 showModalBottomSheet 不要使用 padding 它不会解决你的问题。像这样使用 margin 而不是 padding :

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

Answer 9

在最新版本的 flutter 中，您可以使用 isScrollControlled property/named 参数移动 bottomSheet。假设我有一个函数（_showModal），它将在按下按钮时调用。我在该函数上定义了底部 sheet 功能。

void _showModal() {
  showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    builder: (BuildContext context) {
      return Column(
        children: <Widget>[
          TextField(// your other code),
          SizedBox(height: 5.0),
          TextField(// your other code),
          SizedBox(height: 5.0),
          TextField(// your other code),
        ]
      );
    },
  );
}

此处将出现一个 ModalBottomSheet，但高度为全屏。你不需要那个高度。所以，你需要将 Column 的 mainAxisSize 改为 min.

Column(
  mainAxisSize: MainAxisSize.min,
  // your other code
)

全屏高度问题已解决，但出现键盘时ModalBottomSheet不会移动到顶部。好的，要解决此问题，您需要为您的 ModalBottomSheet 设置 viewInsets 底部填充。因此，要设置填充，我们需要用 Container 或 Padding 包裹我们的 Column，然后设置填充。最终代码将如下所示

void _showModal() {
  showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    builder: (BuildContext context) {
      return Container(
        padding: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom,
        ),
        // You can wrap this Column with Padding of 8.0 for better design
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            TextField(// your other code),
            SizedBox(height: 5.0),
            TextField(// your other code),
            SizedBox(height: 5.0),
            TextField(// your other code),
          ]
        ),
      );
    },
  );
}

希望您的问题得到解决。谢谢

Answer 10

showModalBottomSheet(
 isScrollControlled: true,
 builder: (BuildContext context) {

    return SingleChildScrollView(
      child: Container(
        padding:
            EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
        child: Padding(
          padding: const EdgeInsets.all(15.0), // content padding
          child: Container())});

注意：这一行可以发挥所有作用

Answer 11

不要在生成器中使用 builder: (BuildContext context) { }，而是使用 builder: (context) { }

有了这个解决方案，我的模态底部 sheet 会粘在状态栏上（就像 Scaffold 和 resizeToAvoidBottomInset: false 一样）并允许查看所有表单字段并滚动浏览表单（如果有）仍然需要查看底部文本字段。

有关详细信息，请参阅我找到解决方案的 link - https://github.com/flutter/flutter/issues/18564#issuecomment-602604778

Answer 12

在 github

上找到这个

Padding(
  padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
  child: TextField()
)

Answer 13

对于尝试所有答案都无法解决问题的人。这些答案是正确的，但不是很清楚。

使用时

MediaQuery.of(context).viewInsets.bottom)

确保您的上下文变量使用的是 bottom sheet builder 属性提供的变量。

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

Answer 14

已更新 2021 年 5 月 flutter 2.2！ 现在你需要给底部填充。下面写的是一个错误。

2020 年更新！

这是对的，但你现在不必给底边距了！找到并删除这一行：

padding: MediaQuery.of(context).viewInsets

Answer 15

试试这个。

showModalBottomSheet(
        isScrollControlled: true,
        context: context,
        builder: (context) {
          return AnimatedPadding(
              padding: MediaQuery.of(context).viewInsets,
              duration: const Duration(milliseconds: 100),
              curve: Curves.decelerate,
              child: Container(
                  child: Wrap(
                children: [
                  TextField(
                    decoration: InputDecoration(labelText: "1"),
                  ),
                  TextField(
                    decoration: InputDecoration(labelText: "2"),
                  ),
                  TextField(
                    decoration: InputDecoration(labelText: "3"),
                  ),
                ],
              )));
        },
      )

Answer 16

那你应该用这个，

showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    shape: RoundedRectangleBorder(
      // <-- for border radius
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(10.0),
        topRight: Radius.circular(10.0),
      ),
    ),
    builder: (BuildContext context) {
      return SingleChildScrollView(
        padding:
            EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
        child: drunkenWidget()...

//BTW, Never ever Drink

Answer 17

简单的解决方案，您可以自定义：

Container(
          margin: EdgeInsets.only(left: 15),
          child: InkWell(
              onTap: () {
                showModalBottomSheet(
                    isScrollControlled : true,
                    context: context,
                    backgroundColor: Colors.transparent,
                    builder: (context) {
                      return Container(
                        padding: EdgeInsets.only(top: 15, left: 15, right: 15, bottom: 10),
                        width: double.infinity,
                        decoration: BoxDecoration(
                          color: AppTheme.leadItemColor1,
                          borderRadius: BorderRadius.only(topLeft: Radius.circular(12), topRight: Radius.circular(12)),
                        ),
                        child: Column(
                          children: [
                            _assignTo(widget.viewModel, context),
                            SizedBox(height: 12,),
                            txtComment(widget.viewModel),
                            SizedBox(height: 12,),
                            CRMButton(
                              title: 'Select',
                              onTap: () async {
                                Navigator.pop(context);
                                await widget.viewModel.updateStatus(7, why: "${ConstantData.lostOptions[_selectedNumber]}");
                              },
                            )
                          ],
                        ),
                      );
                    },
                );
              },
              child: CustomTabBarItem1(
                image: widget.viewModel.leadDetail.success.lStatus == 7 ? 'assets/appimages/LeadDetail/icons-03-01.png' : 'assets/appimages/LeadDetail/icons-04-01.png',
                bottomTitle: 'Lost',
                topTitle: widget.viewModel.leadDetail.success.lStatus > 7 ? 'assets/appimages/LeadDetail/Ellipse 61@2x.png' : widget.viewModel.leadDetail.success.lStatus == 7 ? 'assets/appimages/LeadDetail/Group 486-1.png' : 'assets/appimages/LeadDetail/Ellipse-61@3x.png',
                height : widget.viewModel.leadDetail.success.lStatus == 7 ? "0" : "1",
              )),
        ),

Answer 18

只需添加

if (_isEditing) SizedBox(height: MediaQuery.of(context).viewInsets.bottom),

在键盘下方并使用

隐藏文本字段下方的所有其他内容

if (!_isEditing) Widget(...),

Answer 19

包裹：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>
             ),)),)

Answer 20

在你底部的最后一个小部件之后添加这个 sheet

Padding(padding: EdgeInsets.only(bottom:MediaQuery.of(context).viewInsets.bottom))

Answer 21

如果您还没有找到您的问题。所以我认为您在 BuilderContext 中遗漏了。有时，当您实施 modalBottomSheet 时，它只会为您提供 context 参数。因此，使用 BuildContext 添加上下文。

 builder: (BuildContext context) {  //-Here is your issue add BuilderContext class name as it as 
          return Padding(
            padding: MediaQuery.of(context).viewInsets,
            child: SingleChildScrollView(
              child: Padding(
                padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
                child: new Container(

Answer 22

showModalBottomSheet(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      context: context,
      isScrollControlled: true,
      builder: (builder) {
        return Container(
          height: MediaQuery.of(context).size.height - 40,
          padding: MediaQuery.of(context).viewInsets,
          child: <Your Widget Here>,
        );
      },
    );

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

How to Move bottomsheet along with keyboard which has textfield(autofocused is true)?

dart

flutter

flutter-layout

使用时