Flutter:背景调整大小和表单输入问题

Question

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

如果我点击一个文本框，整个容器的大小都会被调整。我尝试使用“resizeToAvoidBottomPadding”选项修复它，但如果文本框太靠下并被键盘覆盖，这将不是一件好事。

这是它的样子: resized container with automatic resizing

我找到了解决问题的“变通方法”，但我很确定这不是解决问题的方法。我尝试这样做的方法是将脚手架放入脚手架，如下所示:

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(),
            ],
          ),
        ),
      ],
    ),
  ),
);

最后看起来像这样:my workaround

我的两个问题是:

• 是否有“正确”的方法来做到这一点？
• 如果不是，这是解决问题的“合理”方法吗？

感谢您的帮助和最诚挚的问候，

卢卡斯

Answer 1

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

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

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

这里的魔法代码是 fit: BoxFit.fitWidth, 因此，无论键盘是否显示，图像都会遵守其宽度并相应地填充它。

我希望将来能帮助到其他人!