移動(dòng)端有圖片背景視圖的應(yīng)用有很多,這是一個(gè)常見問題,出現(xiàn)的問題如下GIF:

animation.gif
大家仔細(xì)看背景圖片在鍵盤升起的時(shí)候被擠壓,可以理解為,視圖在根據(jù)鍵盤的位置在動(dòng)態(tài)改變自己的位置,這樣的效果是我們不想要的,而且很卡頓
return Scaffold(
body: Container(
child: Stack(
children: <Widget>[
InkWell(
child: Container(
width: ScreenUtil().setWidth(750),
height: ScreenUtil().setHeight(1334),
child: Image.asset(
'images/login_background.png',
fit: BoxFit.fill,
),
),
onTap: (){
cunrrentNode.unfocus();
},
),
Positioned(
top: 0,
left: 0,
child: Column(
children: <Widget>[
_logoWidget(),
_titleWidgt(),
_userNameWidget(),
_passwordWidget()
],
),
)
],
)),
);
大家可以看到我的層級(jí)結(jié)構(gòu)是Scaffold->Container->Stack->InkWell+Column
此時(shí)就會(huì)出現(xiàn)上面GIF視圖的效果,怎么解決捏,辦法如下,Scaffold有個(gè)屬性resizeToAvoidBottomPadding將其設(shè)置為false,代碼如下
return Scaffold(
resizeToAvoidBottomPadding: false,//防止鍵盤談起的時(shí)候?qū)е卤尘耙晥D升起*********
body: Container(
child: Stack(
children: <Widget>[
InkWell(
child: Container(
width: ScreenUtil().setWidth(750),
height: ScreenUtil().setHeight(1334),
child: Image.asset(
'images/login_background.png',
fit: BoxFit.fill,
),
),
onTap: (){
cunrrentNode.unfocus();
},
),
Positioned(
top: 0,
left: 0,
child: Column(
children: <Widget>[
_logoWidget(),
_titleWidgt(),
_userNameWidget(),
_passwordWidget()
],
),
)
],
)),
);
添加之后,背景視圖不會(huì)被拉伸了,而且卡頓也消失了,希望幫助到大家,求喜歡,求關(guān)注!