我正在创建一个登录屏幕,我有这个背景图片,问题是当用户点击其中一个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
将您的脚手架作为容器的子项并使其透明
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,
],
),
),
);
尝试使用Stack,使用BoxFit为fill
,将您的图像放置在Positioned中。然后,设置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 ],
),
),
],
);
尝试去你的脚手架(或使用一个)并设置resizeToAvoidBottomPadding = false