showModalBottomSheet 键盘问题

showModalBottomSheet 是 Flutter 中用于显示底部弹出框的一个方法。然而，在某些页面上显示 showModalBottomSheet 弹出框时，键盘可能会影响该弹出框。

问题

通过调用 showModalBottomSheet 方法，在页面底部显示弹出框时，如果键盘已弹出，showModalBottomSheet 弹出的内容会被键盘遮挡。这种情况下，用户可能无法看到或访问弹出框内的内容。

解决办法

为了解决这个问题，我们需要对 showModalBottomSheet 做一些调整，以防止键盘遮挡弹出框内容。下面是一些解决方案：

解决方案1：使用 resizeToAvoidBottomInset 属性

一个最简单的解决方案是在 Scaffold 中设置 resizeToAvoidBottomInset 属性为 false。这个属性默认为 true，意味着当软键盘弹出时，它会自动调整页面布局以避免键盘遮挡主要内容。但是，如果你这样做，你的底部弹出框将会直接覆盖住键盘。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: ...
    )
  }
}

解决方案2：使用 SingleChildScrollView 包装 Column 或 ListView

如果你的页面布局比较简单，只需要一个 Column 或 ListView 来放置你的内容，你可以使用 SingleChildScrollView 包装你的 Column 或 ListView 来避免键盘遮挡问题。 SingleChildScrollView 可以允许你的页面滚动，以便用户可以看到页面中的所有内容。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
          child: Column(
            children: [
              ...
              ElevatedButton(
                child: Text('Show Bottom Sheet'),
                onPressed: () {
                  showModalBottomSheet(
                    context: context,
                    builder: (BuildContext context) {
                      return Container(
                        height: 200.0,
                        child: Center(
                          child: Text('Bottom Sheet Content'),
                        )
                      );
                    },
                  );
                },
              ),
            ]
          ),
      ),
    );
  }
}

解决方案3：手动调整底部弹出框高度

如果你不能使用 SingleChildScrollView 或你需要一个自定义的弹出框，你可以根据键盘高度手动调整弹出框的高度。可以使用 MediaQuery.of(context).viewInsets.bottom 获取键盘高度。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ...
              ElevatedButton(
                child: Text('Show Bottom Sheet'),
                onPressed: () {
                  double sheetHeight = 200.0;
                  double keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
                  double screenHeight = MediaQuery.of(context).size.height;
                  double availableHeight = screenHeight - keyboardHeight;
                  if (sheetHeight > availableHeight) sheetHeight = availableHeight;
                  showModalBottomSheet(
                    context: context,
                    builder: (BuildContext context) {
                      return Container(
                        height: sheetHeight,
                        child: Center(
                          child: Text('Bottom Sheet Content'),
                        )
                      );
                    },
                  );
                },
              ),
            ]
      ),
    );
  }
}

结论

以上是三种十分简单易行的解决方法，可以帮助你避免 showModalBottomSheet 与键盘之间的冲突。使用这些技巧，你可以轻松创建干净而整洁的页面布局，同时保持良好的用户体验。