键盘将 modalBottomSheet 推出边界，resizeToAvoidBottomInset 不起作用

Question

我运行在 Flutter 应用程序中遇到问题。即使脚手架将 resizeToAvoidBottomInset 设置为 false，键盘也会将模态底部 sheet 向上推。我希望模态底部 sheet 保持在其初始位置。我将向您展示我用于显示模态底部的代码 sheet，我将附上一个视频来向您展示错误。

Scaffold(
    resizeToAvoidBottomInset: false,
    key: _scaffoldKey,
    body: ...
)

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  builder: (context) => Container(
      height: MediaQuery.of(context).size.height * 0.8,
      decoration: new BoxDecoration(
        color: Colors.white,
        borderRadius: new BorderRadius.only(
          topLeft: const Radius.circular(25.0),
          topRight: const Radius.circular(25.0),
        ),
      ),
      child: SearchPlace((place, alreadyExists) {
        Navigator.pop(context);
        didSelectPlace(place, alreadyExists);
      })),
);

希望您能帮帮我，谢谢！

Answer 1

好的，所以我自己找到了解决这个问题的方法。

我想让模态底部sheet占据屏幕的80%，但它总是被键盘按下。为了解决这个问题，我将主要的 Container 包装在 Column 小部件中，并添加了一个带有 GestureDetector[= 的透明容器20=]（关闭底部 sheet），高度为屏幕的 20%。之后，我将列包装在 SingleChildScrollView 中。现在一切都按预期工作了！我在下面添加了一个视频。

showModalBottomSheet( context: context, isScrollControlled: true, backgroundColor: Colors.transparent, builder: (context) => SingleChildScrollView( child: Column(children: [ GestureDetector( onTap: () { Navigator.pop(context); }, child: Container( color: Colors.transparent, height: MediaQuery.of(context).size.height * 0.2, ), ), Container( height: MediaQuery.of(context).size.height * 0.8, decoration: new BoxDecoration( color: Colors.white, borderRadius: new BorderRadius.only( topLeft: const Radius.circular(25.0), topRight: const Radius.circular(25.0), ), ), child: SearchPlace((place, alreadyExists) => { Navigator.pop(context), didSelectPlace(place, alreadyExists), })), ]), ), );

Answer 2

类似问题已在此处解决请看一看 ->

或使用

padding: MediaQuery.of(context).viewInsets // viewInsets will decorate your screen

完整代码 ->

showModalBottomSheet(
        context: context,
        barrierColor: popupBackground,
        isScrollControlled: true, // only work on showModalBottomSheet function
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(borderRadiusMedium),
                topRight: Radius.circular(borderRadiusMedium))),
        builder: (context) =>  Padding(
            padding: MediaQuery.of(context).viewInsets,
            child: Container(
                   height: 400, //height or you can use Get.width-100 to set height
                   child: <Your Widget here>
             ),)),)

键盘将 modalBottomSheet 推出边界，resizeToAvoidBottomInset 不起作用

Keyboard pushes modalBottomSheet out of the bounds, resizeToAvoidBottomInset not working

flutter

keyboard

flutter-layout

flutter-showmodalbottomsheet