我正在参与「·启航计划」

前言

我们好，我是未央歌，一个默默无闻的移动开发搬砖者~

先给我们说说项目背景，项目原为 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

感谢我们的支撑，码字实在不易，其中如若有过错，望指出，记得点赞重视加保藏哦 ~