在 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> 一样保持背景图像的比例?