在 Flutter 升级 2.2.0 之后，包含文本字段的 ShowModalBottomSheet 被键盘隐藏

编程问答 2022-04-30

问题描述

在我的应用中，当用户点击 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;
                                    },

解决方法

我找到了解决这个问题的方法： 我将 SingleChildScrollView 作为第一个 Child 添加到 ModalBottomSheet 并直接在那里添加了“CbL”给出的填充元素，而不是容器。

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

感谢 CbL 的帮助 :)

,

您可以将底部视图插入到底部工作表的底部，从而将键盘高度添加到填充以避免隐藏键盘。

例如

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