出现键盘时的颤振-底部溢出问题

Question

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

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

我曾尝试在SingleChildScrollView中包装Column，但当我这样做时，我的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消失。我有一个ExpandedWidget，它有一个Container的孩子来分离我的一些Widgets。

Answer 1

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

确实，你的小部件只是"消失"的原因是一个强制无限高度的内部小部件(在本例中是Expanded小部件)，而父部件不强制最大高度(SingleChildScrollView)，因为它期望显示任意数量的小部件。这会导致一个内在的/概念上的错误(如果你仔细想想的话)，因此框架会抛出一个错误。

这有点取决于你想要达到的效果，但是作为经验法则，在这种情况下，你可能想要将可滚动的小部件包装在SizedBox/Container/ConstrainedBox中，这样你就可以指定一个高度，因此你强制它不是无限的。

在这种情况下，您的子部件可以毫无问题地使用Expanded逻辑。如果有帮助，请告诉我。