Android原生和Flutter使用过程的差异对比（一）

Posted 2023-05-10

参考技术A 1、界面搭建过程中各种大小单位

android：通常采用dp设置View宽高（和px像素的换算关系是dp值 × density逻辑密度），sp设置字体大小（会随着系统字体设置的大小而改变）。

Flutter：没有具体的大小单位描述， 和尺寸相关的MediaQueryData类中较为重要的几个值如下：

（一）devicePixelRatio（设备像素比），对应Android中的density

（二）size.width和height，设备的逻辑像素宽高，并非绝对物理像素（例如iphone6的设备像素比是2，通过size获取到的逻辑像素宽高为375  ×  667，实际物理像素则为750 × 1334，即分辨率）

（三）textScaleFactor：单位逻辑像素字体像素数，默认为1，设置成1.5则字体变大50%，如果想让Text组件的字体大小不随系统设置的变化而变化，需将这个值设定成固定值1

UI适配解决方案：

1、采用ScreenUtil插件，初始化时候传入设计稿大小，当发现一屏显示的大小有差异时候采用插件提供的setWidth和setHeight来设置具体的宽高（会根据设计稿大小和实际设备逻辑像素宽高比进行缩放）。

2、TextButton、Text等按钮和文本组件，通过设置字体大小和内边距来控制整体的宽高，而非固定其宽高。

2、本地资源文件的引用方式

Android：图片通常存放在res/mipmap或res/drawable下，不同分辨率对应不同后缀名，如mipmap-hdpi、mipmap-xhdpi

Flutter：需在pubspec.yaml中配置，如下图所示

如果只配置父级目录例如（assets/images/common_status）则无法再存放不同尺寸的图片。不同尺寸的图片需建立对应的2.0x、3.0x目录后存放，设备在读取时候会自行根据分辨率去找对应的图片，弊端是每有一张图片就需在pubspec.yaml文件中声明这些图片

FlutterLib以AAR形式集成到Android原生工程中

        项目开发过程中，要求使用Flutter来进行混合开发，可以将整个Flutter项目以module的形式引入到Android原生项目，优点是方便Flutter模块的调试工作，缺点是需要项目组中所有的成员都去配置flutter环境成本太大，项目灵活性差；还有一种是以Flutter产物AAR的形式集成，优点是其他项目组成员不需要搭建flutter环境，项目灵活性好，缺点是不利于Flutter模块的调试（每次都得重新打包aar并集成的项目中编译）；

        最终我们选型以产物AAR形式集成到原生项目中；以下是总结的经验：

        为了方便项目管理，在项目的根目录下，创建一个用于存放Flutter AAR资源文件的文件夹，例如命名为“Flutterlibs”

        使用flutter的模块中增加以下依赖

dependencies {
  // ...
  debugImplementation 'com.example.flutter_module:flutter_debug:1.0'
  profileImplementation 'com.example.flutter_module:flutter_profile:1.0'
  releaseImplementation 'com.example.flutter_module:flutter_release:1.0'
}

情景一：单个模块使用flutter aar

1.需flutter项目执行flutter build aar或Build->Flutter->Build AAR
2.flutter项目根目录的build文件夹中会生成/host/outputs/repo文件夹，
3.将repo文件夹全部复制，粘贴到Flutterlibs目录中
4.在使用flutter模块的model中的build.gradle文件中，repositories结构中增加如下
repositories {
    ......
    maven {
        url '..\\\\Flutterlibs\\\\repo'
    }
    maven {
        url 'https://storage.flutter-io.cn/download.flutter.io'
    }
}

5.若使用profile维度，则需要在buildTypes结构中增加如下，
buildTypes {
      ......
        profile {
            initWith debug
        }
   }
6.同步项目，运行

情景二：整个项目都可以使用flutter aar

只需将情景一中的代码抽离到项目根目录下的build.gradle文件中,代码如下
allprojects {
    //String storageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?: "https://storage.googleapis.com"// https://storage.flutter-io.cn国内使用这个，国外使用https://storage.googleapis.com
    repositories {
        ......
        maven {
            url '..\\\\Flutterlibs\\\\repo'
        }
        maven {
            url 'https://storage.flutter-io.cn/download.flutter.io'
        }
    }
}
 

如有疑问，欢迎留言交流~

如有不对，欢迎留言指出~