修复: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));
  }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陆康永

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值