如何移动底页随着键盘有文本域(自动聚焦是真的)?

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

当前回答

在github上找到这个

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

2020-12-06 08:43:43

其他回答

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

更新2020 !

这个答案是正确的，但是你现在不需要给底部填充! 找到并删除这一行:

填充:MediaQuery.of .viewInsets(上下文)

2021-03-23 15:47:53

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

2018-12-21 06:00:08

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

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

2020-07-30 09:08:17

只需添加

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

在键盘和隐藏所有其他内容下面的文本框与

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

2021-07-09 09:29:01

要修复此问题

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

2019-08-15 20:39:31

如何移动底页随着键盘有文本域(自动聚焦是真的)?

推荐文章

最新文章

标签