包含 Textfield 的 ShowModalBottomSheet 在 Flutter 升级 2.2.0 后被键盘隐藏

Question

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

Answer 1

您可以将底部视图插入到底部底部 sheet，这会将键盘高度添加到填充中，避免隐藏键盘。

例如

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

Answer 2

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

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

感谢 CbL 的帮助:)

Answer 3

我使用 LayoutBuilder 和 AnimatedPadding 解决了这个问题。因为 LayoutBuilder 在键盘升起时更新 MediaQuery.of(上下文)。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: ...,
              )
            );
          }
        );
      });

包含 Textfield 的 ShowModalBottomSheet 在 Flutter 升级 2.2.0 后被键盘隐藏

ShowModalBottomSheet containing Textfield gets hidden with keyboard following Flutter upgrade 2.2.0

flutter

keyboard

textfield

flutter-showmodalbottomsheet