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

Question

我有一个视图，其中包含

Column

的

Widgets

。其中一个

Widgets

包含一个可打开底页的按钮。在该底部工作表中，用户可以点击

TextField

并打开键盘，这将使底部工作表保持在键盘上方。

当我按原样这样做时，我得到

Bottom Overflowed by XXX Pixels

。黄色框位于我的底板后面，键盘正上方。

我尝试过将

Column

包裹在

SingleChildScrollView

中，但是当我这样做时，我的

Widgets

中的所有

Column

都消失了。

我也尝试过用脚手架包裹，但也不起作用：

示例：

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

逻辑。 如果有帮助请告诉我。

Answer 2

它很旧，但我的解决方案是将 SingleChildScrollView 放在中心内，并且这个工作

body: Center(
      child: SingleChildScrollView(
         child: Column(
             children: [...]
         )
      )
),