颤振：背景调整大小和表单输入问题

Question

目前，我正在尝试在具有圆角边缘的容器顶部创建一个用户输入表单，该容器占据了整个屏幕。在那后面，有一个脚手架。

如果我单击文本框，则会调整整个容器的大小。 我尝试使用"调整大小以避免底部填充"选项修复它，但如果文本框太低并且被键盘覆盖，那将不是一件好事。

下面是它的外观： 通过自动调整大小调整容器大小

我找到了一个解决问题的"解决方法"，但我很确定这不是应该解决的方式。我尝试这样做的方法是将脚手架放入脚手架中，如下所示：

Scaffold(
resizeToAvoidBottomPadding: false,
body: SafeArea(
child: Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,
margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
padding: EdgeInsets.symmetric(vertical: 30.0, horizontal: 20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.green,
),
),
Scaffold(
backgroundColor: Colors.transparent,
body: ListView(
children: <Widget>[
TextField(),
],
),
),
],
),
),
);

最后看起来像这样：我的解决方法

我要问你的两个问题是：

• 有没有"正确"的方法可以做到这一点？
• 如果不是，这是解决它的"合理"方法吗？

感谢您的帮助和最好的问候，

卢卡斯

Answer 1

这就是为我修复它的原因。

具有一个Stack，其fit属性设置为StackFit.expand。确保这是第一个孩子，以便所有其他孩子都将在背景之上。

Positioned.fill(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage('assets/backdrop.png'),
fit: BoxFit.fitWidth,
alignment: Alignment.topCenter,
),
),
),
),

这里的魔术代码是fit: BoxFit.fitWidth,所以无论键盘是否显示，图像都会尊重它的宽度并相应地填充它。

希望以后能帮助别人！

Answer 2

当我有太多输入字段时，我经常会遇到这个问题。这是一个已知的错误，并且正在处理中(所以我们希望如此(，但我发现的最佳解决方法是拥有一个基于 mediaQuery 的底部填充容器。视图仍然不关注所选输入，但至少用户可以滚动并查看它。

MediaQueryData mediaQuery = MediaQuery.of(context);
Container(
padding: EdgeInsets.only(
bottom: mediaQuery.viewInsets.bottom,
),
),