在上一篇中,我们讲了Flutter页面嵌入Android Activity,那么在这一篇中,我们来实现让Flutter页面嵌入Android Fragment中,并且补充上一篇中未说明的内容(另一种嵌入方式)
在了解了上一篇内容,如何嵌入Fragment其实就非常容易实现了。在上一篇中,我们了解到了一个叫做
FlutterView
的哥们,它是继承了SurfaceView,显然它就是用来渲染在flutter端的widget页面的,先不理它是如何渲染显示的。首先它是一个SurfaceView,现在我们要实现的是,将Flutter页面嵌入到Fragment中,可能我们还不清楚,那如何将一个SurfaceView添加到Fragment中显示出来,想必还是比较简单的吧先创建一个MyFlutterFragment
public class MyFlutterFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
return Flutter.createView(getActivity(),getLifecycle(),"fragment_flutter");
}
}
- 然后显示出来
class MyFlutterFragmentActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_my_flutter_fragment)
supportFragmentManager.beginTransaction().add(R.id.fl_container,MyFlutterFragment()).commit()
}
}
- 为了避免错觉(没有找到就会默认启动home配置的MyHomePage),我们新建一个flutter page
fragment_page.dart
来测试
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class FragmentPage extends StatefulWidget {
@override
State createState() {
return _FragmentPageState();
}
}
class _FragmentPageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(appBar: _buildAppBar(), body: _buildBody(),);
}
///构建AppBar
_buildAppBar() {
return AppBar(
backgroundColor: Colors.white,
elevation: 0,
leading: IconButton(
icon: Image.asset(
'static/imgs/icon_back.png', height: 20,),
onPressed: () {
}),
title: new Text("Flutter in Fragment", style: new TextStyle(
color: Color(0xff333333), fontWeight: FontWeight.bold, fontSize: 18),
maxLines: 1,),
centerTitle: true,);
}
_buildBody() {
return Container(constraints: BoxConstraints(
minWidth: double.infinity, maxHeight: double.infinity),
child: Center(child: Text("我是嵌入Fragment中的flutter界面"),),);
}
}
- 还是在
MainActivity
中进行跳转
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val dumpIntent = Intent(this, MainFlutterActivity::class.java)
btnJumpToFlutter.setOnClickListener { startActivity(dumpIntent) }
//跳转到flutter fragment
val dumpIntent2 = Intent(this, MyFlutterFragmentActivity::class.java)
btnJumpToFlutterFragment.setOnClickListener { startActivity(dumpIntent2) }
}
}
-
到在这一步应该都没有很难理解的内容,我们先启动跳转过去看看效果
可以看到,直接跳转成功了,看过上一篇文章的可能会有个疑问,上一篇需要一个
FlutterFragmentActivity
的辅助,怎么到了Fragment就直接继承之前的Fragment就可以了,然后承载Fragment的MyFlutterFragmentActivity继承 AppCompatActivity也可以?这个问题其实也不难理解,在上一篇中,我们了解到了
FlutterFragmentActivity
本质上还是一个FragmentActivity
,只不过是实现了Provider, PluginRegistry, ViewFactory
public class FlutterFragmentActivity extends FragmentActivity implements Provider, PluginRegistry, ViewFactory {
private final FlutterActivityDelegate delegate = new FlutterActivityDelegate(this, this);
private final FlutterActivityEvents eventDelegate;
private final Provider viewProvider;
private final PluginRegistry pluginRegistry;
//other code
}
//可以自己重写方法创建FlutterView 和FlutterNativeView
public interface ViewFactory {
FlutterView createFlutterView(Context var1);
FlutterNativeView createFlutterNativeView();
boolean retainFlutterNativeView();
}
//提供获取FlutterView 方法
public interface Provider {
FlutterView getFlutterView();
}
//提供插件注册等功能,用于android native端和flutter端通讯
public interface PluginRegistry {
PluginRegistry.Registrar registrarFor(String var1);
boolean hasPlugin(String var1);
T valuePublishedByPlugin(String var1);
public interface PluginRegistrantCallback {
void registerWith(PluginRegistry var1);
}
public interface ViewDestroyListener {
boolean onViewDestroy(FlutterNativeView var1);
}
public interface UserLeaveHintListener {
void onUserLeaveHint();
}
public interface NewIntentListener {
boolean onNewIntent(Intent var1);
}
public interface ActivityResultListener {
boolean onActivityResult(int var1, int var2, Intent var3);
}
public interface RequestPermissionsResultListener {
boolean onRequestPermissionsResult(int var1, String[] var2, int[] var3);
}
public interface Registrar {
//other code
}
- 而接口就是一种规范,通过接口抽象出来这些公共的行为,或者说封装出变化性,除了
FlutterFragmentActivity
,还有FlutterActivity
也实现了这三个接口
public class FlutterActivity extends Activity implements Provider, PluginRegistry, ViewFactory {
//other code
}
它们各自有各自的实现,那么在嵌入Activity的时候,需要
FlutterFragmentActivity
的辅助,实际上就是需要它提供的注册插件、生命周期委托等功能,用于实现两端之间的通讯和管理flutter的生命周期等,那么没有继承FlutterFragmentActivity
是因为在这里仅仅演示了如何嵌入fragment,并没有实现通讯等功能,所以即使没有继承FlutterFragmentActivity
也是可以实现的。实际上若是单纯将flutter嵌入Activity中,不继承FlutterFragmentActivity
也是可以实现的回到
MainFlutterActivity
中修改如下
//注意区别,这里直接继承AppCompatActivity
class MainFlutterActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
FlutterMain.startInitialization(applicationContext)
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main_flutter)
// val mFlutterView: View = Flutter.createView(this, lifecycle, "main_flutter")
//为了区别是可以成功的(前面说过,如果找不到,会默认走home配置的MyHomePage),把嵌入fragment中的page嵌入activity中
val mFlutterView: View = Flutter.createView(this, lifecycle, "fragment_flutter")
val mParams = FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
FrameLayout.LayoutParams.MATCH_PARENT)
addContentView(mFlutterView, mParams)
}
}
- 可以看到没有继承
FlutterFragmentActivity
依旧可以实现嵌入。FlutterView就是一个SurfaceView,添加一个SurfaceView到Activity中或者Fragment相信大家都可以理解的,只不过这个SurfaceView稍稍有些特别,它渲染的内容是Flutter界面,至于是哪一个界面的内容是由传入的initialRoute
指定的,那么为什么要继承FlutterFragmentActivity 就可以理解了,而嵌入Fragment中的Flutter如果想要进行通讯等功能的话,承载该Fragment的Activity也是需要继承FlutterFragmentActivity
,但是单纯显示出来不继承也是可以实现的
-
另外说个小贴士,当我们创建出项目的时候,flutter 工具就已经告知我们如何将Flutter页面嵌入Fragment中了。在引入的Flutter module中,有个自动生成的文件
FlutterFragment
里面的内容很简单
package io.flutter.facade;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v4.app.Fragment;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import io.flutter.view.FlutterView;
/**
* A {@link Fragment} managing a {@link FlutterView}.
*
* Warning: This file is auto-generated by Flutter tooling.
* DO NOT EDIT.
*/
public class FlutterFragment extends Fragment {
public static final String ARG_ROUTE = "route";
private String mRoute = "/";
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mRoute = getArguments().getString(ARG_ROUTE);
}
}
@Override
public void onInflate(Context context, AttributeSet attrs, Bundle savedInstanceState) {
super.onInflate(context, attrs, savedInstanceState);
}
@Override
public FlutterView onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return Flutter.createView(getActivity(), getLifecycle(), mRoute);
}
}
可以看到它就是这么干的,所以我们也是“模仿”的有理有据
到了这里,就已经实现将Flutter页面嵌入Fragment了,下面继续补充上一篇中遗留下来的部分--用另外一种方式将Flutter页面嵌入Activity中
还记得
FlutterActivityDelegate
吗,FlutterFragmentActivity
的生命周期就交由FlutterActivityDelegate
管理,再把它拿过来看看
public void onCreate(Bundle savedInstanceState) {
//other code
//重点看下面的部分
if(!this.loadIntent(this.activity.getIntent())) { //查看activity 的Intent中的内容是否符合条件,返回true说明loadIntent自己完成了启动处理,不走下面的流程
if(!this.flutterView.getFlutterNativeView().isApplicationRunning()) { //没有running
//获取flutter资源路径
String appBundlePath = FlutterMain.findAppBundlePath(this.activity.getApplicationContext());
if(appBundlePath != null) {
//配置启动参数
FlutterRunArguments arguments = new FlutterRunArguments();
arguments.bundlePath = appBundlePath;
arguments.entrypoint = "main";
//启动 该方法兜兜转转最后会调用native方法private static native void nativeRunBundleAndSnapshotFromLibrary(long var0, String var2, String var3, String var4, String var5, AssetManager var6); ,暂时先不管底层是如何启动的
this.flutterView.runFromBundle(arguments);
}
}
}
}
- 看看
loadIntent
方法里面做了什么
private boolean loadIntent(Intent intent) {
String action = intent.getAction();
if("android.intent.action.RUN".equals(action)) { //匹配action
String route = intent.getStringExtra("route"); //获取key为‘route’的String
String appBundlePath = intent.getDataString(); //获取data路径,在这也就是flutter资源路径
if(appBundlePath == null) {
//为空,获取flutter资源路径
appBundlePath = FlutterMain.findAppBundlePath(this.activity.getApplicationContext());
}
//又见到了老朋友
if(route != null) {
//如果route不为空的话,指定flutterView渲染的界面是哪一个
this.flutterView.setInitialRoute(route);
}
if(!this.flutterView.getFlutterNativeView().isApplicationRunning()) { //没有running
//配置启动参数
FlutterRunArguments args = new FlutterRunArguments();
args.bundlePath = appBundlePath;
args.entrypoint = "main";
//同样的,启动,该方法兜兜转转最后会调用native方法private static native void nativeRunBundleAndSnapshotFromLibrary(long var0, String var2, String var3, String var4, String var5, AssetManager var6); ,暂时先不管底层是如何启动的
this.flutterView.runFromBundle(args);
}
return true;
} else {
return false;
}
}
看到这里,相信可以想到另外一种方法是如何实现的
新建一个
MainFlutterActivity2
class MainFlutterActivity2 : FlutterFragmentActivity() {
companion object {
fun startCurrentActivity(context: Context, initRoute: String) {
//配置启动Intent
val intent = Intent(context, MainFlutterActivity2::class.java)
intent.action = "android.intent.action.RUN"
intent.putExtra("route", initRoute)
context.startActivity(intent)
}
}
override fun onCreate(savedInstanceState: Bundle?) {
FlutterMain.startInitialization(applicationContext)
super.onCreate(savedInstanceState)
//需要注意的是在这没有setContentView()
}
}
- 在flutter module写一个新的
other_page.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class OtherPage extends StatefulWidget {
@override
State createState() {
return _OtherPageState();
}
}
class _OtherPageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(appBar: _buildAppBar(), body: _buildBody(),);
}
///构建AppBar
_buildAppBar() {
return AppBar(
backgroundColor: Colors.white,
elevation: 0,
leading: IconButton(
icon: Image.asset(
'static/imgs/icon_back.png', height: 20,),
onPressed: () {
}),
title: new Text("Flutter in Activity", style: new TextStyle(
color: Color(0xff333333), fontWeight: FontWeight.bold, fontSize: 18),
maxLines: 1,),
centerTitle: true,);
}
_buildBody() {
return Container(constraints: BoxConstraints(
minWidth: double.infinity, maxHeight: double.infinity),
child: Center(child: Text("我是嵌入Activity中的flutter界面(intent方式启动)"),),);
}
}
- 在
main.dart
中配置
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
routes: {
"main_flutter": (context) => MyHomePage(title: 'Flutter in Android'),
"fragment_flutter": (context) => FragmentPage(),
"other_flutter": (context) => OtherPage()
},
);
}
}
- 依旧在
MainActivity启动
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val dumpIntent = Intent(this, MainFlutterActivity::class.java)
btnJumpToFlutter.setOnClickListener { startActivity(dumpIntent) }
val dumpIntent2 = Intent(this, MyFlutterFragmentActivity::class.java)
btnJumpToFlutterFragment.setOnClickListener { startActivity(dumpIntent2) }
//另外一种方式跳转
btnJumpToFlutter2.setOnClickListener { MainFlutterActivity2.startCurrentActivity(this, "other_flutter") }
}
}
-
看看运行效果
可以看到,在intent中配置action为
android.intent.action.RUN
,再在key为route的extra中指定FlutterView渲染的界面也可以完成嵌入,在这里需要注意的是去掉了setContentView,否则FlutterView渲染的界面会被setContentView的内容覆盖,因为FlutterView渲染的界面是在super.onCreate()
之前被添加进来的,所以super.onCreate()
之后的setContentView理所当然就会覆盖之前的界面至此,将flutter页面嵌入activity以及fragment中就已经实现了,在下一篇,我们继续了解一下两端是如何进行通讯的。如果喜欢这篇文章的话,希望可以点个喜欢支持一下,谢谢大家