在Flutter中保持响应的同时制作持久的背景图像

Question

我正在创建一个登录屏幕，并且我有此背景图片，问题是当用户单击之一时，TextFields键盘弹出，背景图片更改了其尺寸以适合新的屏幕尺寸（不包括键盘）。

我希望背景保持不变且大小相同BoxFit.none，但我担心这会损害应用程序的响应能力。

这是代码：

new Container(
      decoration: new BoxDecoration(
          color: Colors.red,
          image: new DecorationImage(
              fit: BoxFit.cover,
              image: new AssetImage(
                  'assets/images/splash_screen/background.png'))),
      child: new Center(
        child: new ListView(
          physics: new PageScrollPhysics(),
          children: <Widget>[ //Login screen content ],
        ),
      ),
    );

我也尝试定义设备屏幕的BoxConstraintswith minHeight，但是它没有帮助，并且Stack也很好用，但是运气不好。

这就是我更改尺寸的意思： 无键盘 / 带键盘

Answer 1

将您的脚手架放在容器中，使其透明

final emailField = TextFormField(
  decoration: InputDecoration(
    hintText: "Email",
  ),
);

return Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/bg.png'),
      fit: BoxFit.cover,
    ),
  ),
  child: Scaffold(
    backgroundColor: Colors.transparent,
    body: ListView(
      children: <Widget>[
        emailField,
      ],
    ),
  ),
);

Answer 2

尝试使用BoxFit为的堆栈，将图像放在“已定位”位置fill。然后，设置top: 0.0。这样，它的高度应该不受屏幕底部高度的影响（即，当键盘抬起时，它的高度不应该改变），并且其大小应该保持不变。例：

return Stack(
  children: <Widget>[
    Positioned(
      top: 0.0,
      child: Image.asset(
        'assets/images/splash_screen/background.png',
        fit: BoxFit.fill,
      ),
    ),
    Center(
      child: ListView(
        physics: PageScrollPhysics(),
        children: <Widget>[ //Login screen content ],
      ),
    ),
  ],
);