天天看點

修複:flutter 鍵盤出現時候導緻固定底部的按鈕被頂上來目标

目标

修複flutter 鍵盤出現時候導緻固定底部的按鈕被頂上來

未擷取焦點時候

修複:flutter 鍵盤出現時候導緻固定底部的按鈕被頂上來目标

鍵盤出來時候

修複:flutter 鍵盤出現時候導緻固定底部的按鈕被頂上來目标

這個login按鈕會遮擋一部分内容,我們并不想這樣

resizeToAvoidBottomInset

 添加了如下代碼,沒有達到預期目的:

resizeToAvoidBottomInset: false, /// 這裡必須禁止重繪
           

SingleChildScrollView

使用SingleChildScrollView配合Container後實作,具體代碼如下:

Widget build(BuildContext context) {
    return Scaffold(
      body:
      Container(
        alignment: Alignment.topLeft,
         height:MediaQuery.of(context).size.height,
        child: SingleChildScrollView(
            child:SizedBox(
              height:MediaQuery.of(context).size.height,

              child:Stack(
                children: [
	                //其他。。。
                 	//Expanded(child: Container()),//自動填充剩餘空間
		//固定底部的按鈕
                ],
              )

            )
        )
      ),
           

代碼解說

MediaQuery.of(context).size.height是拿到裝置工作區域的邏輯高度,上面的代碼的意思是設定一個可滾動的容器,滾動容器裡面的Contaainer的高度等于裝置工作區的高度,單鍵盤出來的時候,SingleChildScrolVeiw的高度約等于裝置的螢幕高度減去鍵盤的高度,但是Container的高度還是之前的裝置工作區的高度,是以SingleChildScrollView可滾動

封裝:

innerScrollBox支援嵌套innerScrollBox

double contentHeight = MediaQuery.of(context).size.height -
        appBarWidget.preferredSize.height -
        MediaQuery.of(context).padding.top -
        MediaQuery.of(context).padding.bottom;


  
Widget innerScrollBox(
      {required Widget child,
      required double contentHeight,
      required Color color}) {
    return Container(
        alignment: Alignment.topLeft,
        height: contentHeight,
        margin: EdgeInsets.only(top: 10),
        color: color,
        child: SingleChildScrollView(child: child));
  }