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

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

MediaQueryData mediaQuery = MediaQuery.of(context);

Container(
  padding: EdgeInsets.only(
  bottom: mediaQuery.viewInsets.bottom,
  ),
),

Answer 2

这就是为我解决的问题。

具有Stack属性设置为fit的{{1}}。确保这是第一个孩子，以便其余所有孩子都在背景之上。

StackFit.expand

这里的魔术代码是 Positioned.fill( child: Container( decoration: BoxDecoration( image: DecorationImage( image: ExactAssetImage('assets/backdrop.png'), fit: BoxFit.fitWidth, alignment: Alignment.topCenter, ), ), ), ), ，因此无论是否显示键盘，图像都会尊重其宽度并相应地填充。

希望以后能对其他人有所帮助！

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

2 个答案: