上篇文章我們介紹了如何將Flutter模塊混入iOS項(xiàng)目中脚乡，本篇文章我們來(lái)介紹下Android項(xiàng)目混入Flutter模塊的方法副硅。
建議先閱讀一下Flutter混合開發(fā)—iOS篇处铛，本文中提到的一些與iOS篇中相同的內(nèi)容就不會(huì)再介紹了。
現(xiàn)在就進(jìn)入Flutter和Android進(jìn)行混合開發(fā)的實(shí)現(xiàn)過(guò)程痒筒。
搭建Android項(xiàng)目
首先我們搭建一個(gè)首頁(yè)為Bottom Navigation Activity的安卓項(xiàng)目悉抵，然后修改代碼將三個(gè)Fragment重命名為HomeFragment，ChannelFragment和MineFragment见擦。
項(xiàng)目
fragment_home.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2196F3"
tools:context=".ui.home.HomeFragment">
// 這個(gè)FrameLayout會(huì)被用來(lái)顯示Flutter Module內(nèi)容
<FrameLayout
android:id="@+id/main_fl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="56dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
搭建完成后钉汗，App的效果如下圖所示：
效果圖
我們接下來(lái)的工作是把Flutter的MainApp(),ChannelApp()和MineApp()分別加入到上面提到的三個(gè)Fragment中。
Android項(xiàng)目引入Flutter Module
首先確保Android Studio安裝了Flutter plugin(安裝Flutter插件的過(guò)程略過(guò))
使用 File > New > Import Module ... -> 選擇flutter module 锡宋，然后指定一個(gè)module name
新建Module
- 填寫相應(yīng)的信息
信息
圖中有一個(gè)警告叉钥，是因?yàn)槲业谝徊僮鞯臅r(shí)候沒(méi)有截圖届吁，第二次重復(fù)操作的警告。
- 點(diǎn)擊確定，等待
Gradle sync完成
Android項(xiàng)目集成Flutter Module
創(chuàng)建一個(gè)FlutterEngineGroup對(duì)象
FlutterEngineGroup可以用來(lái)管理多個(gè)FlutterEngine對(duì)象反镇，多個(gè)FlutterEngine之間是可以共享資源的，這樣建立多個(gè)FlutterEngine占用的資源相對(duì)會(huì)少一下虫啥。
FBApplication.kt
class FBApplication: Application() {
lateinit var engineGroup: FlutterEngineGroup
override fun onCreate() {
super.onCreate()
// 創(chuàng)建FlutterEngineGroup對(duì)象
engineGroup = FlutterEngineGroup(this)
}
}
AndroidManifest.xml
<application
android:name=".FBApplication"
// 省略...
>
<activity
android:name=".MainActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
創(chuàng)建一個(gè)FBFlutterEngineManager緩存管理類
我們?cè)?code>FBFlutterEngineManager中創(chuàng)建一個(gè)靜態(tài)方法flutterEngine:
object FBFlutterEngineManager {
fun flutterEngine(context: Context, engineId: String, entryPoint: String): FlutterEngine {
// 1. 從緩存中獲取FlutterEngine
var engine = FlutterEngineCache.getInstance().get(engineId)
if (engine == null) {
// 如果緩存中沒(méi)有FlutterEngine
// 1. 新建FlutterEngine掺逼，執(zhí)行的入口函數(shù)是entryPoint
val app = context.applicationContext as FBApplication
val dartEntrypoint = DartExecutor.DartEntrypoint(FlutterInjector.instance().flutterLoader().findAppBundlePath(), entryPoint)
engine = app.engineGroup.createAndRunEngine(context, dartEntrypoint)
// 2. 存入緩存
FlutterEngineCache.getInstance().put(engineId, engine)
}
return engine!!
}
}
這里我們使用了
FlutterEngineCache緩存類，先從中獲取緩存的FlutterEngine衡奥，如果沒(méi)有取到爹袁，則新建一個(gè)FlutterEngine，然后緩存起來(lái)矮固。
Fragment中嵌入Flutter Module
我們這一步是將FlutterEngine和FlutterFragment進(jìn)行綁定失息，然后顯示譬淳。
class HomeFragment : Fragment() {
// 1. FlutterEngine對(duì)象
private lateinit var engine: FlutterEngine
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_home, container, false)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// 2. 通過(guò)FBFlutterEngineManager獲取FlutterEngine對(duì)象
engine = FBFlutterEngineManager.flutterEngine(requireActivity(), R.id.main_fl.toString(), "main")
// 3. 用FlutterEngine對(duì)象構(gòu)建出一個(gè)FlutterFragment
val flutterFragment = FlutterFragment.withCachedEngine(R.id.main_fl.toString()).build<FlutterFragment>()
// 4. 顯示FlutterFragment
parentFragmentManager.beginTransaction().replace(R.id.main_fl, flutterFragment).commit()
}
}
我們這里使用緩存的FlutterEngine更能節(jié)省資源，因?yàn)?strong>Bottom Navigation Activity的Fragment來(lái)回切換的時(shí)候盹兢，Fragment是會(huì)重新新建和銷毀的邻梆。
下面就是實(shí)現(xiàn)的效果圖：
效果圖
編寫插件代碼
和iOS類似，我們需要在進(jìn)入將二級(jí)頁(yè)面時(shí)候绎秒，將activity_main.xml中的BottomNavigationView隱藏浦妄，回到一級(jí)頁(yè)面的時(shí)候?qū)?strong>BottomNavigationView顯示出來(lái)。
- 添加顯示和隱藏的方法
class MainActivity : AppCompatActivity() {
fun switchBottomView(show: Boolean) {
val navView: BottomNavigationView = findViewById(R.id.nav_view)
if (show) {
navView.visibility = View.VISIBLE
} else {
navView.visibility = View.GONE
}
}
}
- MethodChannel 注冊(cè)回調(diào)
var channel: MethodChannel = MethodChannel(engine.dartExecutor.binaryMessenger, "fbmovie.com/tab_switch")
channel.setMethodCallHandler { call, result ->
when (call.method) {
"showTab" -> {
val activity = requireActivity() as MainActivity
activity.switchBottomView(true)
result.success(null)
}
"hideTab" -> {
val activity = requireActivity() as MainActivity
activity.switchBottomView(false)
result.success(null)
}
else -> {
result.notImplemented()
}
}
}
代碼
FBApplication.kt
class FBApplication: Application() {
lateinit var engineGroup: FlutterEngineGroup
override fun onCreate() {
super.onCreate()
engineGroup = FlutterEngineGroup(this)
}
}
FBFlutterEngineManager.kt
object FBFlutterEngineManager {
fun flutterEngine(context: Context, engineId: String, entryPoint: String): FlutterEngine {
var engine = FlutterEngineCache.getInstance().get(engineId)
if (engine == null) { //如果是空的就新建见芹，然后存起來(lái)
val app = context.applicationContext as FBApplication
val dartEntrypoint = DartExecutor.DartEntrypoint(FlutterInjector.instance().flutterLoader().findAppBundlePath(), entryPoint)
engine = app.engineGroup.createAndRunEngine(context, dartEntrypoint)
FlutterEngineCache.getInstance().put(engineId, engine)
}
return engine!!
}
}
MainActivity.kt
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
// 修改狀態(tài)欄顏色
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
}
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val navView: BottomNavigationView = findViewById(R.id.nav_view)
val navController = findNavController(R.id.nav_host_fragment)
navView.setupWithNavController(navController)
}
fun switchBottomView(show: Boolean) {
val navView: BottomNavigationView = findViewById(R.id.nav_view)
if (show) {
navView.visibility = View.VISIBLE
} else {
navView.visibility = View.GONE
}
}
}
HomeFragment.kt
class HomeFragment : Fragment() {
private lateinit var engine: FlutterEngine
private lateinit var channel: MethodChannel
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_home, container, false)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
engine = FBFlutterEngineManager.flutterEngine(requireActivity(), R.id.main_fl.toString(), "main")
val flutterFragment = FlutterFragment.withCachedEngine(R.id.main_fl.toString()).build<FlutterFragment>()
parentFragmentManager.beginTransaction().replace(R.id.main_fl, flutterFragment).commit()
channel = MethodChannel(engine.dartExecutor.binaryMessenger, "fbmovie.com/tab_switch")
channel.setMethodCallHandler { call, result ->
when (call.method) {
"showTab" -> {
val activity = requireActivity() as MainActivity
activity.switchBottomView(true)
result.success(null)
}
"hideTab" -> {
val activity = requireActivity() as MainActivity
activity.switchBottomView(false)
result.success(null)
}
else -> {
result.notImplemented()
}
}
}
}
}
總結(jié)
目前原生移動(dòng)應(yīng)用能集成多個(gè)Flutter Module剂娄，這樣使用起來(lái)就方便多了。
Android中也可以使用FlutterView, 在一個(gè)Activity或者Fragment中可以展示多個(gè)FlutterView玄呛，但是使用個(gè)FlutterView需要綁定生命周期阅懦，使用起來(lái)稍顯復(fù)雜。
