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

Posted 2023-02-23

【中文标题】Flutter - 出现键盘时出现底部溢出问题

【英文标题】：Flutter - Bottom Overflowed Issue when Keyboard is Presented

【发布时间】：2021-12-06 16:00:22

【问题描述】：

我有一个包含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。

【问题讨论】：

尝试 isScrollControlled: false,。如果不工作，那么用 Container 包裹你的列并给它高度和宽度。如果仍然无法正常工作，则使用单子控制器包装容器。

@ShailandraRajput isScrollControlled 需要为真，以便工作表保持在键盘上方。我尝试了其他建议，但仍然没有运气。在我看到所有小部件都消失的场景中，我还添加了更多上下文。

【参考方案1】：

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

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

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

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

【讨论】：

用户正在浏览一个提要，他们可以在提要中的一个项目上停下来，该项目将与他们可以交互的各种事物。其中一个将显示自定义底部表，他们可以点击文本字段。此底部表应与键盘一起向上滑动，能够在用户完成后向下滑动并消失。我习惯于原生 ios 开发，所以这个颤振错误对我来说是新的。我对高度部分感到困惑，因为我正在做的很多事情都是动态调整，因为屏幕上的一些小部件会根据它们中的内容量改变高度。

如果我执行诸如 --> return SingleChildScrollView( child: IntrinsicHeight( child: Column( 那么此时我可以看到我所有的小部件，但现在它们都被压扁并且有额外的填充上下。