Flutter笔记--Flutter页面嵌入Android Fragment中

  • 在上一篇中,我们讲了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) }
    }
}
  • 到在这一步应该都没有很难理解的内容,我们先启动跳转过去看看效果


    Flutter笔记--Flutter页面嵌入Android Fragment中_第1张图片
    跳转到flutter fragment.gif
  • 可以看到,直接跳转成功了,看过上一篇文章的可能会有个疑问,上一篇需要一个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)
    }
}
Flutter笔记--Flutter页面嵌入Android Fragment中_第2张图片
Activity直接继承AppCompatActivity.gif
  • 可以看到没有继承FlutterFragmentActivity依旧可以实现嵌入。FlutterView就是一个SurfaceView,添加一个SurfaceView到Activity中或者Fragment相信大家都可以理解的,只不过这个SurfaceView稍稍有些特别,它渲染的内容是Flutter界面,至于是哪一个界面的内容是由传入的initialRoute指定的,那么为什么要继承FlutterFragmentActivity 就可以理解了,而嵌入Fragment中的Flutter如果想要进行通讯等功能的话,承载该Fragment的Activity也是需要继承FlutterFragmentActivity,但是单纯显示出来不继承也是可以实现的
  • 另外说个小贴士,当我们创建出项目的时候,flutter 工具就已经告知我们如何将Flutter页面嵌入Fragment中了。在引入的Flutter module中,有个自动生成的文件FlutterFragment

    Flutter笔记--Flutter页面嵌入Android Fragment中_第3张图片
    自动生成的FlutterFragment.png

  • 里面的内容很简单

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") }
    }
}
  • 看看运行效果


    Flutter笔记--Flutter页面嵌入Android Fragment中_第4张图片
    Intent方式嵌入.gif
  • 可以看到,在intent中配置action为android.intent.action.RUN,再在key为route的extra中指定FlutterView渲染的界面也可以完成嵌入,在这里需要注意的是去掉了setContentView,否则FlutterView渲染的界面会被setContentView的内容覆盖,因为FlutterView渲染的界面是在super.onCreate()之前被添加进来的,所以super.onCreate()之后的setContentView理所当然就会覆盖之前的界面

  • 至此,将flutter页面嵌入activity以及fragment中就已经实现了,在下一篇,我们继续了解一下两端是如何进行通讯的。如果喜欢这篇文章的话,希望可以点个喜欢支持一下,谢谢大家

你可能感兴趣的:(Flutter笔记--Flutter页面嵌入Android Fragment中)