android flutter 混合开发初探

Android中使用Flutter来进行UI的展示步骤也很简单，在此简单做个笔记总结下。

使用Android studio在FA_DEMO目录下创建一个Android项目，项目名称在此为Android
在FAndroid目录下使用flutter create -t module module_flutter命令创建一个名为module_flutter的flutter module工程。当然也可以直接用Android Studio的new
flutter project 创建一个flutter工程。
创建好的目录在Windows系统下如下所示：
修改setting.gradle文件，加入如下代码：

include ':app'//加入如下代码，可能Binding会显示红色，as提示让你import一个包，不必理会setBinding(new Binding([gradle: this]))evaluate(new File(  settingsDir.parentFile,  'module_flutter\\.android\\include_flutter.groovy'))

修改app的build.gradle,加入下面一行：

 implementation project(':flutter')

然后在sync一下项目，或者在Android项目下执行gradlew build命令。即可成功构建一个Flutter和android 混合的项目。

需要注意的是，在flutter这个module的build.gralde其minSdkVersion=16，如图：
android flutter 混合开发初探_第2张图片
所以Android app 的build.gralde的minSdkVersion也需要设置为>=16.然后将我们的MainActivity修改为如下即可

//注意继承的是AppCompatActivity public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        //使用Flutter创建一个VIew        View flutterView = Flutter.createView(this,getLifecycle(),"rout");        //设置全屏        FrameLayout.LayoutParams params =                new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);        //使用flutterView        setContentView(flutterView,params);    }}

运行效果如下：
android flutter 混合开发初探_第3张图片

其实，学过Flutter的应该熟悉这个页面，我们创建Flutter工程的时候默认的就是这个应用界面。其源码就在FA_DEMO\module_flutter\lib文件加下的main.dart文件。如果想要使用其他的flutter页面修改这个main.dart文件即可。

Android flutter的混合开发就是这么简单（从战略上藐视），本篇只是简单的介绍一下混合flutter的基础步骤，至于Android flutter怎么传值和交互，后面对另外说明。

另外发现了没有，既然Flutter.createView创建的是一个View，我们可以把这个FlutterView放在Android 某个ViewGroup的子View中，所以上面代码修改如下：

public class MainActivity extends AppCompatActivity {   //flutterView的parentView    FrameLayout frameLayout;     protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        //设置跟布局        setContentView(R.layout.activity_main);               frameLayout = findViewById(R.id.flutter_content);        View flutterView = Flutter.createView(this,getLifecycle(),"rout");        FrameLayout.LayoutParams params =                new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);//             //将flutterView作为childView 添加到frameLayout中。        frameLayout.addView(flutterView,params);    }}

对应的activity_main.xml如下：

<?xml version="1.0" encoding="utf-8"?>

运行走起，效果见下图：
android flutter 混合开发初探_第4张图片

另外我们知道flutter是由路由跳转的页面的，那么我们将博主之前写的flutter的demo嵌入到我们这个项目中会如何呢（该demo的说明详见博主的此篇博客--Flutter动画初探）？
替换也很简单，下载demo的源码，结构如下：
android flutter 混合开发初探_第5张图片将上图中红色矩形框里的文件复制粘贴到module_flutter文件加下并替换原有的lib和pubspec.yaml文件，然后在module_flutter运行flutter packages get。而后重新运行Android项目，效果如下（粉红色的部分为Android原生的View）：

android flutter 混合开发初探_第6张图片
上图粉红色背景下面的内容就是flutter的一个listView,点击其中某一个item进行路由跳转，效果如下 :
android flutter 混合开发初探_第7张图片
其实通过flutter路由跳转这一特性，我们可以在一个Activity的UI中进行局部页面跳转效果。

到此为止博文结束，如有不当的地方欢迎批评指正

更多相关文章

随机推荐