美文网首页
flutter与ios原生混编appbar高不相同

flutter与ios原生混编appbar高不相同

作者: 東玖零 | 来源:发表于2022-09-29 11:17 被阅读0次

    背景:为了能够跟在技术潮流的尾巴上,我们原生工程是决定混合一些跨平台语言,找了资料看了看,最终选的是flutter,当我们跟着官方文档完成了iOS和Android的混编。

    问题:我们安卓用户更多,就选择了material安卓风格的设计,写了一些页面在iOS平台发现flutter页面的导航条和原生的导航条要高一些。

    搜索了很多相关资料就是flutter中如何修改appbar的高,我就很好奇,难道就我们是混合工程,而且还选择了material设计风格?

    flutter也是自学写,写的也不久,不怎么会封装,无奈之下就来一个简单方法,直接修改appbar的高,源码如下:
    1.写两个公共方法

    bool isIPhoneX(BuildContext context) {
      if (Platform.isIOS) {
        return MediaQuery.of(context).padding.bottom > 0;
      }
      return false;
    }
    
    double? getAppbarHeight(BuildContext context) {
      if (Platform.isAndroid) {
        return null;
      }
      //double height = isIPhoneX(context) ? 64 : 44;
      //print("----------------------------->$height");
      //return height;
      //经过测试iphonex以上的设备这个toolbar的高也是设置为44!
      retrun 44;
    }
    

    2.调用getAppbarHeight方法

    AppBar(
      toolbarHeight: getAppbarHeight(context),
      leading: TextButton(
        child: Icon(
          Icons.arrow_back_ios,
          color: Colors.white,
        ),
        onPressed: backAction,
      ),
      titleSpacing: 0,
      title: Text("账号列表"),
    )
    

    确实也达到了和原生高度很接近的导航条,这种方法也不确定是否正确,如果有更多好更方法的方法欢迎留言。

    相关文章

      网友评论

          本文标题:flutter与ios原生混编appbar高不相同

          本文链接:https://www.haomeiwen.com/subject/intkartx.html