背景:为了能够跟在技术潮流的尾巴上,我们原生工程是决定混合一些跨平台语言,找了资料看了看,最终选的是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("账号列表"),
)
确实也达到了和原生高度很接近的导航条,这种方法也不确定是否正确,如果有更多好更方法的方法欢迎留言。
网友评论