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

我还尝试使用设备屏幕的BoxConstraints定义minHeight，但它没有帮助，并且也使用了Stack，但没有运气。

以下是改变尺寸的意思： No Keyboard / With Keyboard

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

尝试使用Stack，将您的图片置于Positioned中，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 ],
      ),
    ),
  ],
);

Answer 3

尝试转到您的脚手架（或使用一个脚手架）并进行设置 resizeToAvoidBottomPadding = false

Answer 4

你可以试试这个，效果很好

import 'package:flutter/material.dart';
class SignUpView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Container(
          decoration: BoxDecoration(
              image: DecorationImage(
        image: AssetImage("assets/images/background.png"),
        fit: BoxFit.cover,
      ))),
      Scaffold(
          resizeToAvoidBottomInset: false,
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            title: Text('NEW USER'),
            backgroundColor: Colors.transparent,
            elevation: 0,
          ),
          body: Padding(
              padding: EdgeInsets.all(10),
              child: ListView(children: <Widget>[])))
    ]);
  }
}

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

4 个答案: