Flutter - 出现键盘时出现底部溢出问题

Question

我有一个包含Column 或Widgets 的视图。其中一个Widgets 包含一个用于打开底部工作表的按钮。在该底部表中，用户可以点击TextField 并打开键盘，这将使底部表保持在键盘上方。

当我按原样执行此操作时，我得到Bottom Overflowed by XXX Pixels。黄色框在我的底页后面，就在键盘的正上方。

我曾尝试将Column 包装在SingleChildScrollView 中，但是当我这样做时，Column 中的所有Widgets 都会消失。

我也尝试过用脚手架包裹，但也没有用：

示例：

Scaffold(
  resizeToAvoidBottomInset: false, // tried setting to true as well
  body: Column...

有什么建议吗？

以下是一些基本设置：

@override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
         _buildWidget1(),
         _buildWidget2(),
         _buildWidget3(),
         // When wrapped in a SingleChildScrollView
         // this seems to be making everything in the column
         // disappear...
         Expanded(child: Container()),
         etc.
      ],
    );
}


void _bottomSheetButtonPressed(context) {
    showModalBottomSheet(
      barrierColor: Colors.transparent,
      backgroundColor: Colors.transparent,
      context: context,
      isScrollControlled: true,
      builder: (context) {
        return Padding(
          padding:
              EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.transparent,
              borderRadius: BorderRadius.only(
                topLeft: const Radius.circular(24),
                topRight: const Radius.circular(24),
              ),
            ),
            child: _showBottomSheetItemsWidget(),
          ),
        );
      },
    );
  }

颜色是透明的，所以我可以看到底片后面发生了什么。

因此，我遇到了Bottom Overflowed 问题...这就是我要解决的问题。

更新： 在进一步调试之后，我确实看到了我认为使我所有的Widgets 消失的原因。我有一个Expanded Widget 有一个Container 的孩子来分隔我的一些Widgets。

Answer 1

正确的解决方案确实是将您看到的内容包装到一个可滚动的小部件中，例如SingleChildScrollView。但是，当且仅当您的可滚动小部件的内容不是无限的时，才会发生这种情况。

确实，您的小部件只是“消失”的原因是一个内部小部件强制无限高度（在这种情况下，Expanded 小部件），而父级不强制最大高度（SingleChildScrollView），因为它期望显示任意数量的小部件。这会导致内在/概念错误（如果您考虑一下），因此框架会引发错误。

这有点取决于您想要实现的目标，但根据经验，在这种情况下，您可能希望将可滚动小部件包装在 SizedBox / Container / ConstrainedBox 中，这样您指定一个高度，因此你强制它不是无限的。

在这种情况下，您的子小部件可以毫无问题地使用 Expanded 逻辑。 让我知道这是否有帮助。