我正在参与「·启航计划」
前言
我们好,我是未央歌,一个默默无闻的移动开发搬砖者~
先给我们说说项目背景,项目原为 Android 原生开发,所用语言为 Java/Kotlin ;后边引入了 Flutter 混编,如果我们有爱好,谈论区留言,后边再独自开一篇文章为我们讲解一下如何完成 Android 和 Flutter 混编。
Android 适配
提到适配,Android 原生端我们通常采用今日头条适配计划:AndroidAutoSize 。而 AndroidAutoSize的使用也非常简单,按照以下过程填写大局设计图尺度 (单位 dp),无需别的操作。
step1
dependencies {
implementation 'com.github.JessYanCoding:AndroidAutoSize:v1.2.1'
}
step2
<manifest>
<application>
<meta-data
android:name="design_width_in_dp"
android:value="375"/>
<meta-data
android:name="design_height_in_dp"
android:value="667"/>
</application>
</manifest>
Flutter 适配
而 Flutter 我们常采用的适配计划则是 flutter_screenutil 。传入设计稿的宽度和高度,进行初始化(只需设置一次)即可。
step1
dependencies:
flutter:
sdk: flutter
# add flutter_screenutil
flutter_screenutil: ^{latest version}
step2
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//填入设计稿中设备的屏幕尺度,单位dp
return ScreenUtilInit(
designSize: const Size(375, 667),
minTextAdapt: true,
splitScreenMode: true,
builder: (context , child) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'First Method',
// You can use the library anywhere in the app even in theme
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: Typography.englishLike2018.apply(fontSizeFactor: 1.sp),
),
home: child,
);
},
child: const HomePage(title: 'First Method'),
);
}
}
遇到问题
在做项目需求的时候会遇到如下布局紊乱状况,如下图:高空环景、VR、封面图都给间隔右边有很大一片空白。每次打开第一次进来都会呈现这样的布局紊乱问题,第2次进来就恢复正常。
解决问题
当时一度以为是 flutter_screenutil 库在 Android 上的 bug ,后来独自写了一个混编的 demo ,发现不会呈现布局紊乱状况,于是把锋芒对准了原生端的适配 AndroidAutoSize。只要是 Flutter 页面,撤销今日头条适配计划(有供给 interface 接口),就不会呈现布局紊乱问题了。以上问题是两个适配计划相互影响导致!
import me.jessyan.autosize.internal.CancelAdapt
open class BaseFlutterActivity : FlutterActivity(), CancelAdapt {
...
}
完成 CancelAdapt 接口就可解决,如下图:布局紊乱问题已解决,恢复正常。
总结
我们遇到疑难杂症问题,先考虑或许导致这个问题的原因,然后逐个排查试错。
有时候项目太巨大,能够写一个 demo 来快速验证对错,从而得出原因,对症下药解决。
最后
如果你对 Flutter 感爱好,能够看看我的专栏:Flutter
感谢我们的支撑,码字实在不易,其中如若有过错,望指出,记得点赞重视加保藏哦 ~