上篇文章我們介紹瞭如何將Flutter模組混入iOS專案中，本篇文章我們來介紹下Android專案混入Flutter模組的方法。
建議先閱讀一下Flutter混合開發—iOS篇，本文中提到的一些與iOS篇中相同的內容就不會再介紹了。
現在就進入Flutter和Android進行混合開發的實現過程。
搭建Android專案
首先我們搭建一個首頁為Bottom Navigation Activity的安卓專案，然後修改程式碼將三個Fragment重新命名為HomeFragment，ChannelFragment和MineFragment。
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">
// 這個FrameLayout會被用來顯示Flutter Module內容
<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的效果如下圖所示：
我們接下來的工作是把Flutter的MainApp(),ChannelApp()和MineApp()分別加入到上面提到的三個Fragment中。
Android專案引入Flutter Module
-
首先確保Android Studio安裝了Flutter plugin(安裝Flutter外掛的過程略過)
-
使用 File > New > Import Module ... -> 選擇flutter module ，然後指定一個module name
- 填寫相應的資訊
圖中有一個警告，是因為我第一操作的時候沒有截圖，第二次重複操作的警告。
- 點選確定，等待
Gradle sync完成
Android專案整合Flutter Module
建立一個FlutterEngineGroup物件
FlutterEngineGroup可以用來管理多個FlutterEngine物件，多個FlutterEngine之間是可以共享資源的，這樣建立多個FlutterEngine佔用的資源相對會少一下。
FBApplication.kt
class FBApplication: Application() {
lateinit var engineGroup: FlutterEngineGroup
override fun onCreate() {
super.onCreate()
// 建立FlutterEngineGroup物件
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>
複製程式碼建立一個FBFlutterEngineManager快取管理類
我們在FBFlutterEngineManager中建立一個靜態方法flutterEngine:
object FBFlutterEngineManager {
fun flutterEngine(context: Context, engineId: String, entryPoint: String): FlutterEngine {
// 1. 從快取中獲取FlutterEngine
var engine = FlutterEngineCache.getInstance().get(engineId)
if (engine == null) {
// 如果快取中沒有FlutterEngine
// 1. 新建FlutterEngine，執行的入口函式是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，如果沒有取到，則新建一個FlutterEngine，然後快取起來。
Fragment中嵌入Flutter Module
我們這一步是將FlutterEngine和FlutterFragment進行繫結，然後顯示。
class HomeFragment : Fragment() {
// 1. FlutterEngine物件
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. 通過FBFlutterEngineManager獲取FlutterEngine物件
engine = FBFlutterEngineManager.flutterEngine(requireActivity(), R.id.main_fl.toString(), "main")
// 3. 用FlutterEngine物件構建出一個FlutterFragment
val flutterFragment = FlutterFragment.withCachedEngine(R.id.main_fl.toString()).build<FlutterFragment>()
// 4. 顯示FlutterFragment
parentFragmentManager.beginTransaction().replace(R.id.main_fl, flutterFragment).commit()
}
}
複製程式碼我們這裡使用快取的FlutterEngine更能節省資源，因為Bottom Navigation Activity的Fragment來回切換的時候，Fragment是會重新新建和銷燬的。
下面就是實現的效果圖：
編寫外掛程式碼
和iOS類似，我們需要在進入將二級頁面時候，將activity_main.xml中的BottomNavigationView隱藏，回到一級頁面的時候將BottomNavigationView顯示出來。
- 新增顯示和隱藏的方法
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 註冊回撥
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) { //如果是空的就新建，然後存起來
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?) {
// 修改狀態列顏色
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()
}
}
}
}
}
複製程式碼總結
目前原生移動應用能整合多個Flutter Module，這樣使用起來就方便多了。
Android中也可以使用FlutterView, 在一個Activity或者Fragment中可以展示多個FlutterView，但是使用個FlutterView需要繫結生命週期，使用起來稍顯複雜。