Flutter升级到2.2.0后，包含TextField的ShowModalBottomSheet会随着键盘的出现而隐藏。

Question

Flutter升级到2.2.0后，包含TextField的ShowModalBottomSheet会随着键盘的出现而隐藏。

flutterkeyboardtextfieldflutter-showmodalbottomsheet

8

在我的应用程序中，当用户点击FAB时，会触发一个包含文本字段的ModalBottomSheet。直到今天（我更新到flutter 2.2.0），下面的代码都能正常工作：当用户点击文本字段时，BottomSheet会向上移动，我们可以正确使用键盘。

现在，当我们点击文本字段时，键盘会隐藏BottomSheet。

更新是否有更改？

以下是代码：

floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.blue[800],
          child: Icon(Icons.add),
          onPressed: () {
            showModalBottomSheet<void>(
              isScrollControlled: true,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  topRight: Radius.circular(20.0),
                ),
              ),
              context: context,
              builder: (BuildContext context) {
                return Container(
                  height: 250,
                  child: Center(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(26.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: [
                              Padding(
                                padding: const EdgeInsets.only(top: 8.0),
                                child: Text(
                                  'Ajouter une liste au carnet',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    color: Colors.blue[800],
                                    fontSize: 22.0,
                                  ),
                                ),
                              ),
                              SizedBox(
                                height: 30,
                              ),
                              Column(
                                children: [
                                  TextFormField(
                                    keyboardType: TextInputType.emailAddress,
                                    decoration: InputDecoration(
                                        focusColor: Colors.blue,
                                        border: OutlineInputBorder(
                                          borderRadius:
                                              BorderRadius.circular(10.0),
                                        ),
                                        labelText:
                                            'Titre de la nouvelle liste'),
                                    onChanged: (value) {
                                      titre = value;
                                    },
                                  ),

- SylvainJack

Flutter 3中的正确答案：https://stackoverflow.com/a/76219183/11626514 - Julio Cesar Reis

4个回答

9

我使用了LayoutBuilder和AnimatedPadding来解决这个问题。因为LayoutBuilder会在键盘弹起时更新MediaQuery.of(context).viewInsets.bottom(使用你的上下文)

例子:

  showModalBottomSheet(
      context: context,
      isScrollControlled:true,
      isDismissible: true,  
      builder: (_) {
        return LayoutBuilder(
          builder: (context, _) { //<----- very important use this context
            return AnimatedPadding(
              padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
              duration: Duration(milliseconds: 150),
              curve: Curves.easeOut,
              child: Container(
                constraints: BoxConstraints(
                  maxHeight: 500,
                  minHeight: 150
                ),
                child: ...,
              )
            );
          }
        );
      });

- Filipe Ferreira

我正在尝试这个，但它不起作用。Flutter 3.3.10 - Luke Irvin

4

您可以将底部视图插入底部工作表的底部，将键盘高度添加到填充中，以避免键盘被遮挡。

例如：

return Container(
       padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
       height: 250,
       child: Center(...

- CbL

2

不幸的是，它不起作用，我得到了“一个renderFlex在底部溢出了117个像素”。我确实很困惑，为什么这个屏幕已经工作了几周，现在却不再工作了... - SylvainJack

我不确定您是否在同一设备上测试现有代码。就我而言，仅仅查看代码，这很有可能在某些小屏幕手机上溢出。建议您将SingleChildScrollView添加到最外层Column中，以避免键盘隐藏内容。 - CbL

是的，我正在同一台设备上进行测试。三星A21S。这是我唯一拥有的设备;) SingleChildScrollView解决了溢出问题。但我的BottomSheet仍然被隐藏...我真的相信它与Flutter升级有关，因为昨晚一切都运行正常...几周没有碰过代码...升级后，它不再工作...它似乎又回到了旧问题。我看到很多2或3年前的帖子提到了同样的问题... - SylvainJack

0

CommonBottonSheet({required Widget childView,required BuildContext context}){
  showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        top: Radius.circular(25.0),
      ),
    ),
    backgroundColor: AppColors.backGroundColor,
    builder: (BuildContext context) {
      return StatefulBuilder(
        builder: (BuildContext context, setState) {
          setState(() {});
          return Padding(
            padding:  EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
            child: ListView(
              shrinkWrap: true,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    InkWell(
                      child: Container(
                        width: 100,
                        height: 5,
                        color: AppColors.yallow,
                      ),
                      onTap: (){
                        Navigator.of(context).pop();
                      },
                    )
                  ],
                ),
                childView
              ],
            ),
          );
        },
      );
    },
  );
}

- Diwakar Tiwari

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SylvainJack · Accepted Answer

我找到了一种解决方法：我将SingleChildScrollView作为ModalBottomSheet的第一个子元素添加，并直接在那里添加了"CbL"提供的padding元素，而不是添加到容器中。

 return SingleChildScrollView(
                  padding: EdgeInsets.only(
                      bottom: MediaQuery.of(context).viewInsets.bottom),
                  child: Container(
                    height: 250,

感谢CbL的帮助 :)