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

Posted

技术标签:

【中文标题】在 Flutter 中保持响应的同时制作持久的背景图像【英文标题】:Making a persistent background image while staying responsive in Flutter 【发布时间】:2018-09-05 00:43:26 【问题描述】:

我正在创建一个登录屏幕,我有这个背景图片, 问题是当用户单击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 ],
        ),
      ),
    );

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

这就是我所说的改变尺寸的意思: No Keyboard / With Keyboard

【问题讨论】:

也许这会有所帮助...***.com/questions/46551268/… 【参考方案1】:

将您的 Scaffold 作为 Container 的子级并使其透明

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

【讨论】:

另外,如果您想要背景颜色和图像,请在BoxDecoration 下添加color。你也可以在DecorationImage下用alignment改变图像的对齐方式 感谢您的洞察力。【参考方案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
        ],
      ),
    ),
  ],
);

【讨论】:

我必须将顶部、左侧和右侧设置为 0.0,并将高度设置为 MediaQuery.of(context).size.height【参考方案3】:

尝试去你的脚手架(或使用一个)并设置 resizeToAvoidBottomPadding = false

【讨论】:

【参考方案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 中保持响应的同时制作持久的背景图像的主要内容,如果未能解决你的问题,请参考以下文章

如何在更改屏幕宽度的同时保持响应式背景图像高度?

是否可以使用背景图像制作响应式 div,并像 <img> 一样保持背景图像的比例?

如何让我们的列表持久化,同时在 Flutter 应用程序中导航到不同的屏幕?

在 Flutter 中保持滚动视图偏移的同时添加列表视图项

如何在 Flutter 中制作带背景的抠图图标?

Flutter 导航推送,同时保持 Appbar 不变