如何与具有textfield（autofocused为true）的键盘一起移动底页？ [英] How to Move bottomsheet along with keyboard which has textfield(autofocused is true)?

问题描述

我正在尝试制作一个具有文本字段的底表，并且将自动对焦设置为true，以便弹出键盘。但是，底纸被键盘重叠。有没有办法将底页移到键盘上方？

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

推荐答案

flutter 1.7.X及更高版本已将
更多功能添加到 BottomSheetDialog 中，因此您可以添加 isScrollControlled = true 到 showModalBottomSheet ，它将允许底部工作表ke达到要求的全部高度，这使 TextField 没有被键盘覆盖。

In flutter 1.7.X and later more functionalities have been added to BottomSheetDialog so you can add isScrollControlled = true to showModalBottomSheet it'll allow the bottom sheet to take the full required height which gives more insurance that TextField is not covered by the keyboard.

就像这样：

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

它是不需要。

更新

如果您的 BottomSheetModel 是 Column ，请确保添加 mainAxisSize：MainAxisSize.min，，否则工作表将覆盖整个屏幕。

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

这篇关于如何与具有textfield（autofocused为true）的键盘一起移动底页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！