Android Flutter 混合开发高仿大厂App

这篇文章将概述 Android组件化的架构搭建 及 Flutter 和 Android 如何混合开发 (整个App只有首页是用原生Android完成，其他页面都是引入之前的做好的Flutter页面) ，主宿主程序由 Android 搭建，采用了组件化的架构搭建整个 App ，不同业务，对应不同的 module 工程，业务之间采用接口通信 (ARouter)，以 module 的形式混入 Flutter，通过 MethodChannel 和 Flutter 端进行数据通信等，且这些功能实现源码开源，感兴趣的小伙伴可以移步至 GitHub。

 

---

以下博文会分为4个部分概述：

• 项目完成的功能预览
• 项目组件化结构分析
• 项目功能详细概述（所用知识点）
• Android Flutter 混合开发

 

项目组件化结构分析

项目结构图预览

其次，分析梳理下项目结构，项目的结构大致如图，还有一些细枝末节的没有体现在图里：

项目结构分析

业务工程

把具体独立的业务都拆分成单独的 module 减小项目的维护压力

• ft_home: 首页模块，这个模块其实还可以继续拆分，可把4个 tab (精选、附近、景点、美食) 页都拆成模块，这里我暂时没有拆分，后续会完成
• ft_destination: 目的地模块，其实并没有建立这个模块，因为直接引入了之前做好的 flutter 页面
• ft_travel: 旅拍模块，同样也使用了 flutter 页面
• flutter: flutter模块，这个模块是从 flutter_module 中自动生成的，后面介绍到

基础库工程

把具体的功能都封装成独立的库供业务模块使用，降低项目的维护成本及代码之间耦合性

• lib_network: 网络库，使用 okhttp 插件二次封装，业务层简单的调用即可
• lib_webview: 打开网页的webview库，使用了 agentweb 插件二次封装，业务层只需要一句代码即可完成网页的跳转
• lib_image_loader: 图片加载库，使用了 glide 插件二次封装，业务层只需一句代码即可加载不同参数的图片
• lib_asr: 百度AI语音库，通过 Android 集成好供 Flutter 端使用
• lib_common_ui: 公共UI库，重复多次使用的页面集中管理
• lib_base: 基础库，通过 ARouter 的 service 功能暴露接口提供服务给业务层，当然业务层也可以在这里暴露接口供外界使用

这里有一些使用的插件并没有在项目结构图里体现出来(结构图空间有限)。

插件

在这里把项目使用的插件整理列举出来供大家参考：

• magicindicator 强大、可定制、易扩展的 ViewPager 指示器框架，首页的4个 tab (精选、附近、景点、美食) 就是用这个实现的。
• immersionbar 一句代码轻松实现状态栏、导航栏沉浸式管理
• pagerBottomTabStrip 页面底部和侧边的导航栏，首页、目的地、旅拍、我的页面切换就是用这个实现的。
• rxjava/rxandroid 异步和链式编程
• butterknife view注入插件，配合Android插件使用，可快速自动生成 init view的代码，不用写一句 findViewById 的代码。
• gson json解析，配合Android插件使用，可快速生成实体类
• smartRefreshLayout 智能下拉刷新框架，携程二楼及下拉刷新加载更多就是用这个实现的
• eventbus 发布/订阅事件总线，优雅的完成组件之间通信
• arouter 依赖注入、路由跳转、注册service，优雅的完成模块之间的通信
• okhttp 网络请求插件
• agentweb webview框架，进行简单的二次封装可优雅的进行网页跳转
• glide 高性能、可扩展的图片加载插件
• banner 图片轮播控件

基本就是这些了，应该没有漏的，插件的详细使用，请进入各插件的 GitHub 主页。

在此，把我项目的插件引入代码及版本管理的 gradle 代码贴出来，如下：

插件引入代码：

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])

    implementation rootProject.depsLibs.appcompat
    implementation rootProject.depsLibs.legacy
    implementation rootProject.depsLibs.recyclerview
    implementation rootProject.depsLibs.constraintlayout
    implementation rootProject.depsLibs.cardview

    //tab指示器
    implementation rootProject.depsLibs.magicindicator
    //沉浸式
    implementation rootProject.depsLibs.immersionbar
    //导航栏
    implementation rootProject.depsLibs.pagerBottomTabStrip
    //rxjava
    implementation rootProject.depsLibs.rxjava
    //rxandroid
    implementation rootProject.depsLibs.rxandroid
    //view 注入
    implementation rootProject.depsLibs.butterknife
    //view 注入
    annotationProcessor rootProject.depsLibs.butterknifeCompiler
    //gson
    implementation rootProject.depsLibs.gson
    //banner
    implementation rootProject.depsLibs.banner
    //smartRefreshLayout 上下拉刷新
    implementation rootProject.depsLibs.smartRefreshLayout
    implementation rootProject.depsLibs.refreshHeader
    implementation rootProject.depsLibs.refreshHeaderTwoLevel
    implementation rootProject.depsLibs.refreshFooter
    //eventbus
    implementation rootProject.depsLibs.eventbus
    //arouter库
    implementation(rootProject.depsLibs.arouterapi) {
        exclude group: 'com.android.support'
    }
    annotatio