前言

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

先给大家说说项目背景，项目原为 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、封面图都给距离右边有很大一片空白。每次打开第一次进来都会出现这样的布局错乱问题，第二次进来就恢复正常。

解决问题

当时一度以为是 flutter_screenutil 库在 Android 上的 bug ，后来单独写了一个混编的 demo ，发现不会出现布局错乱情况，于是把矛头对准了原生端的适配 AndroidAutoSize。只要是 Flutter 页面，取消今日头条适配方案（有提供 interface 接口），就不会出现布局错乱问题了。以上问题是两个适配方案相互影响导致！

import me.jessyan.autosize.internal.CancelAdapt


open class BaseFlutterActivity : FlutterActivity(), CancelAdapt {

    ...

}

实现 CancelAdapt 接口就可解决，如下图：布局错乱问题已解决，恢复正常。

总结

大家遇到疑难杂症问题，先思考可能导致这个问题的原因，然后逐个排查试错。 有时候项目太庞大，可以写一个 demo 来快速验证对错，从而得出原因，对症下药解决。