如何将底部表与具有文本字段的键盘一起移动(自动对焦为真)? [英] How to Move bottomsheet along with keyboard which has textfield(autofocused is true)?

问题描述

我正在尝试制作一个包含文本字段和自动对焦设置为 true 以便键盘弹出的底部表.但是，底板与键盘重叠.有没有办法在键盘上方移动底部?

填充(填充:EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),孩子:列(孩子:<小部件>[文本域(自动对焦:真，装饰:InputDecoration(提示文本:'标题')，),文本域(装饰:InputDecoration(提示文本:'详细信息！')，键盘类型:TextInputType.multiline，最大线数:4，),文本域(装饰:InputDecoration(提示文本:'附加细节！')，键盘类型:TextInputType.multiline，最大线数:4，),]);

解决方案

将 isScrollControlled = true 添加到 BottomSheetDialog 它将允许底部工作表占据所需的全部高度这提供了更多的保证 TextField 不被键盘覆盖.

使用 MediaQuery.of(context).viewInsets.bottom

添加键盘填充

注意

如果您的 BottomSheetModel 是 Column，请确保添加了 mainAxisSize: MainAxisSize.min, 否则表格将覆盖整个屏幕.>

示例

 showModalBottomSheet(形状:RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),backgroundColor: Colors.black,上下文:上下文，isScrollControlled: 真,构建器:(上下文)=>填充(填充:const EdgeInsets.symmetric(水平:18)，孩子:列(crossAxisAlignment: CrossAxisAlignment.start,mainAxisSize: MainAxisSize.min,孩子们:<小部件>[填充(填充:const EdgeInsets.symmetric(水平:12.0)，孩子:文本('输入您的地址'，样式:TextStyles.textBody2),),大小盒(高度:8.0，),填充(填充:EdgeInsets.only(底部:MediaQuery.of(context).viewInsets.bottom),孩子:文本字段(装饰:输入装饰(提示文本:'地址'),自动对焦:真，控制器:_newMediaLinkAddressController，),),SizedBox(高度:10)，],),));

请注意:

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

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

padding: MediaQuery.of(context).viewInsets

更新 Flutter 2.2 再次打破了这些变化！"现在您需要再次提供底部填充，以便键盘不会与底部重叠.

I'm trying to make a bottomsheet that has a text field and autofocus is set to true so that the keyboard pops up. But, bottomsheet is overlapped by the keyboard. Is there a way to move bottomsheet above the keyboard?

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

解决方案

Add isScrollControlled = true to BottomSheetDialog it'll allow the bottom sheet to take the full required height which gives more insurance that TextField is not covered by the keyboard.

Add Keyboard padding using MediaQuery.of(context).viewInsets.bottom

Note

If your BottomSheetModel is Column make sure you add mainAxisSize: MainAxisSize.min, otherwise the sheet will cover the whole screen.

Example

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

Please note that:

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

It's not required. It's just that I'm creating a rounded bottom sheet.

padding: MediaQuery.of(context).viewInsets

UPDATED Flutter 2.2 breaks the changes again!" Now you need to give bottom padding once again so keyboard don't overlaps bottomsheet.

这篇关于如何将底部表与具有文本字段的键盘一起移动(自动对焦为真)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！