Flutter 使用stack層疊布局時(shí)背景視圖被鍵盤頂出或圖片拉伸問題

移動(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)注!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,797評(píng)論 1 45
  • 1、ie訪問皕杰報(bào)表時(shí),點(diǎn)擊工具條上打印按鈕,彈出新頁面空白? 解決方案:ie加載項(xiàng)沒有加載applet插件,ie...
    勤奮的表妹閱讀 872評(píng)論 0 0
  • 唉:-(為什么這么累呢
    01d73ac8a0f4閱讀 199評(píng)論 0 0
  • 依據(jù)學(xué)校行政履歷表的安排,本周進(jìn)入第一輪賽課。按進(jìn)度應(yīng)該處理習(xí)題,但總歸沒有跟規(guī)范的模式來上習(xí)題課,所以還...
    偷閑躲靜閱讀 374評(píng)論 0 2

友情鏈接更多精彩內(nèi)容