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

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

• 解决这个问题

1. 将 isScrollControlled = true 添加到 BottomSheetDialog 它将允许底部工作表占据所需的全部高度，从而更加确保键盘不会覆盖 文本字段。

2. 使用 MediaQuery.of(context).viewInsets.bottom 添加键盘填充

• 注意

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

2. 使用多个 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 再次打破变化!现在您需要再次提供底部填充，这样键盘就不会与 bottomsheet 重叠。