flutter合并组件,flutter子组件重复渲染

Flutter（六）Android与Flutter混合开发（Hybird）

如果我们目前的项目是Android的，但是接下来我们希望部分页面可以使用Flutter进行开发，甚至我们希望在Native页面中嵌入FlutterUI组件，那么我们该如何实现呢？

假设你现在Android项目的目录的结构是这样的

这时候如果你想创建一个Flutter模块，使得Android模块和Flutter模块之间可以进行交互，我们可以通过Android Studio新建一个Flutter Module，具体过程是：File — New — New Module ，之后选择Flutter Module，指定Project Location的路径为

也就是说，最终你的项目结构会是这样的

接下来在Android Module的 build.gradle 文件中添加flutter依赖

先创建一个Flutter页面

这里比较重要的是 window.defaultRouteName 这个字段，这个字段可以接收从Native传递过来的参数 （下文我们会介绍原生传递参数的方法），也就是说通过这个字段我们就可以进行Flutter页面的路由的分发

我们可以直接在Android的 MainActivity 中启动一个 FlutterActivity ，这里的 initialRoute 方法中传递的参数就对应Flutter层的 window.defaultRouteName

注意：需要在 AndroidManifest.xml 注册 FlutterActivity

自己创建一个 FlutterAppActivity 继承自 FlutterActivity

在 MainActivity 中启动 FlutterAppActivity （另外别忘了在 AndroidManifest.xml 中注册 FlutterAppActivity ）

两种启动方式的区别

如果单纯只是想打开一个Flutter页面，两种方式实际上基本没有太大区别，第一种方式也许还会更简单一点。但是，在Flutter开发中，我们往往还需要开发一些Native插件供Flutter调用，如果使用复写 FlutterActivity 的方式更有利于我们在 FlutterActivity 中注册我们的Native插件，所以实际开发中一般推荐使用第二种方式

扩展思考

initialRoute 从名称上看起来是Flutter提供给我们进行Native与Flutter交互的路由跳转的，但是实际上他就是一个字符串，我们不仅仅可以传递一个路由名称，有时候我们也可以通过这个参数传递一串JSON数据，然后在Flutter端进行解析，这样我们就可以通过这个参数做更多的事情

activity_main.xml

FrameLayout 用于承载Flutter组件

MainActivity.java

使用 FragmentManager 将 FlutterFragment 添加到 FrameLayout 容器中

运行结果

上半部分是原生的TextView，下半部分是Flutter的Text组件

本节主要介绍了Native和Flutter之间的页面跳转，以及同一个页面中Native与Flutter组件的组合。接下来会介绍如何编写Android插件与Flutter进行数据交互

Flutter自定义绘制组件

Flutter中自定义组件一般有两种方式：

CustomPaint继承自SingleChildRenderObjectWidget，即它可以在通过嵌套引入到widget树中，并且可以有一个child子widget。它的构造方法如下：

painter和foregroundPainter需要接收CustomPainter对象，是CustomPaint核心。CustomPainter是进行UI绘制的核心类，绘制时, CustomPaint 首先在画布上调用 painter绘制 , 然后再绘制它的 child Widget, child 绘制完成后再调用 foregroundPainter 进行绘制。

size属性标识绘制区域大小，但当CustomPaint有child，该属性将会忽略，而使用child的大小为绘制区域大小。

isComplex和willChange用于控制绘制层缓存处理的，这里暂不讨论。

可实现CustomPainter子类进行UI绘制

实现paint方法进行真正的绘制，canvas是画布对象，size是绘制区域，是从CustomPaint中size属性传递得到的。绘制过程与Android原生开发十分类似，连API都十分相像，这点对熟悉Android原生开发者真是太友好了。

Paint对象是画笔对象，就是绘图工具，我们可以设置画笔的颜色、粗细、是否抗锯齿、笔触形状以及作画风格等，通过这些属性我们可以很方便的来定制自己的UI效果，在绘制的过程中可以定义多个画笔，以便实现多种风格图形的集合。

根据需求选择合适的画笔属性，完成你的绘制。

Canvas是绘制的画布，它包含了很多绘制方法，可以绘制出各种形状的图形。需要注意的是，画布是应用所有控件都在使用的, 所以通过这个画布其实是可以绘制充满屏幕的内容的，每次绘制都应该限制在本控件的区域(Size)内, 以免绘制覆盖到其他组件。

下面介绍下Canvas的绘制方法：

PointMode是个枚举

p1、p2为线段两个端点

Rect定义矩形的大小位置，有多种构造方式:

RRect描述圆角矩形，他通过Rect和Radius来构造

画圆比较简单，c表示圆心位置，radius是半径。

椭圆使用外接矩形确定大小位置，rect就是外接矩形。

绘制弧形，先确定弧形对应的椭圆，同样地用外接矩形rect确定椭圆，然后根据起始点和结束点角度来确定那一段弧度，startAngle，sweepAngle分别代表起始和结束点角度，角度用弧度表示法。

useCenter表示是否连接闭合形状，userCenter = false表示不闭合，即画一段弧线，userCenter = true表示闭合，即绘制一个扇形。

绘制路径，关键在于构建路径Path，可以直接new Path对象，然后通过path方法可以连接出图形，path关键方法如下：

还有其他方法，有兴趣可以查看API。

Flutter（二）StatefulWidget基础组件

MaterialApp 是我们app开发中常用的符合MaterialApp Design设计理念的入口Widget。MaterialApp这个组件里面的参数比较多，而且一般在应用入口会用到，所以这里把它内部的所有参数都列出来了

基本用法：

可以看到我们在 App 的最外层直接使用了 MaterialApp ，可以指定App的名称（ title ），App的主题样式（ theme ），首页的组件（ home ），路由跳转配置）（ routes ），关于路由跳转我们在后面的章节中会介绍

Scaffold 实现了基本的 Material Design 布局结构， Scaffold 在英文中的解释为角手架，我们可以理解为楼体中的钢架结构，通过它可以构建一个页面

在Flutter应用开发中，我们可以将 Scaffold 理解为一个布局的容器。可以在这个容器中绘制我们的用户界面

下面是 MaterialApp + Scaffold 的组合的基本用法

AppBar 就是顶部的导航栏组件，支持自定义标题，左右两侧的工具栏按钮等

BottomNavigationBar 是底部的菜单栏组件

使用方法：

一般我们会定义一个全局变量如 _currentIndex 用于记录当前选中的下标。然后在 onTap 属性的回调方法中调用

setState(() { _currentIndex = index;}); 更新 _currentIndex 就可以实现底部菜单的切换。 BottomNavigationBar 一般会配合 BottomNavigationBarItem 一起使用（如下所示）

RefreshIndicator 是Flutter中的下拉刷新组件，一般配合 ListView 组件一起使用

Image 就类似于android中的 ImageView ，可以自定义图片显示的宽高

从网络中加载图片

从本地（File文件）加载图片

从本地资源加载图片

可以将byte数组加载成图片

TextField 就类似于android的 EditText

PageView 就类似于android中的 ViewPager

flutter常用组件

主要是关注decoration (装饰) 可以设置container的属性，这里color指的是背景色

alertdialog会返回一个结果，这样可以通过switch或其他方法做多次弹框等其他操作