flutter写ui,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是一个移动应用程序的软件开发工具包（SDK），具有以下特征：

跨平台应用的框架，没有使用WebView或者系统平台自带的控件，使用自身的高性能渲染引擎自绘

简化版的浏览器，最大限度在android和ios上统一UI，包括业务逻辑和用户体验

开发语言使用dart，结合C, C++, 和Skia（2D渲染引擎）构建

支持hot reload，包含着完整的控件和工具链

一切皆控件，控件是每个Flutter应用程序的基本构建块，与分离视图、控制器、布局和其他属性的框架不同，Flutter具有一致的统一对象模型：控件。一个控件可以定义：结构元素（比如按钮或菜单）、风格元素（比如字体或颜色方案）、布局的方面（比如填充）、一些业务逻辑等

组合大于继承，控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，类的层次结构是扁平的，以最大化可能的组合数量

强化版的WebView，框架仅提供一个View层，大部分功能要依赖原生

目前只能够运行大部分Dart代码（不能引入dart:mirrors或dart:html库）

Flutter 启动页的前世今生适配历程

APP 启动页在国内是最常见也是必备的场景，其中启动页在 iOS 上算是强制性的要求，其实配置启动页挺简单，因为在 Flutter 里现在只需要：

一般只要配置无误并且图片尺寸匹配，基本上就不会有什么问题， 那既然这样，还有什么需要适配的呢？

事实上大部分时候 iOS 是不会有什么问题， 因为 LaunchScreen.storyboard 的流程本就是 iOS 官方用来做应用启动的过渡；而对于 Andorid 而言，直到 12 之前 windowBackground 这种其实只能算“民间”野路子 ，所以对于 Andorid 来说，这其中就涉及到一个点：

所以下面主要介绍 Flutter 在 Android 上为了这个启动图做了哪些骚操作～

在已经忘记版本的“远古时期” ， FlutterActivity 还在 io.flutter.app.FlutterActivity 路径下的时候，那时启动页的逻辑相对简单，主要是通过 App 的 AndroidManifest 文件里是否配置了 SplashScreenUntilFirstFrame 来进行判断。

在 FlutterActivity 内部 FlutterView 被创建的时候，会通过读取 meta-data 来判断是否需要使用 createLaunchView 逻辑 ：

是不是很简单，那就会有人疑问为什么要这样做？我直接配置 Activity 的 android:windowBackground 不就完成了吗？

这就是上面提到的时间差问题， 因为启动页到 Flutter 渲染完第一帧画面中间，会出现概率出现黑屏的情况，所以才需要这个行为来实现过渡 。

经历了“远古时代”之后， FlutterActivity 来到了 io.flutter.embedding.android.FlutterActivity ， 在到 2.5 版本发布之前，Flutter 又针对这个启动过程做了不少调整和优化，其中主要就是 SplashScreen 。

自从开始进入 embedding 阶段后， FlutterActivity 主要用于实现了一个叫 Host 的 interface ，其中和我们有关系的就是 provideSplashScreen 。

默认情况下它会从 AndroidManifest 文件里是否配置了 SplashScreenDrawable 来进行判断 。

默认情况下当 AndroidManifest 文件里配置了 SplashScreenDrawable ，那么这个 Drawable 就会在 FlutterActivity 创建 FlutterView 时被构建成 DrawableSplashScreen 。

DrawableSplashScreen 其实就是一个实现了 io.flutter.embedding.android.SplashScreen 接口的类，它的作用就是：

之后 FlutterActivity 内会创建出 FlutterSplashView ，它是个 FrameLayout。

FlutterSplashView 将 FlutterView 和 ImageView 添加到一起， 然后通过 transitionToFlutter 的方法来执行动画，最后动画结束时通过 onTransitionComplete 移除 splashScreenView 。

所以整体逻辑就是：

当然这里也是分状态：

当然这个阶段的 FlutterActivity 也可以通过 override provideSplashScreen 方法来自定义 SplashScreen 。

看到没有，做了这么多其实也就是为了弥补启动页和 Flutter 渲染之间， 另外还有一个优化，叫 NormalTheme 。

通过该配置 NormalTheme ，在 Activity 启动时，就会首先执行 switchLaunchThemeForNormalTheme(); 方法将主题从 LaunchTheme 切换到 NormalTheme 。

大概配置完就是如下样子， 前面分析那么多其实就是为了告诉你，如果出现问题了，你可以从哪个地方去找到对应的点 。

讲了那么多， Flutter 2.5 之后 provideSplashScreen 和 io.flutter.embedding.android.SplashScreenDrawable 就被弃用了，惊不喜惊喜，意不意外，开不开心 ？

通过源码你会发现，当你设置了 splashScreen 的时候，会看到一个 log 警告：

为什么会弃用？

其实这个提议是在 这个 issue 上，然后通过 这个 pr 完成调整。

大概意思就是： 原本的设计搞复杂了，用 OnPreDrawListener 更精准，而且不需要为了后面 Andorid12 的启动支持做其他兼容，只需要给 FlutterActivity 等类增加接口开关即可 。

也就是2.5之后 Flutter 使用 ViewTreeObserver.OnPreDrawListener 来实现延迟直到加载出 Flutter 的第一帧。

为什么说默认情况？ 因为这个行为在 FlutterActivity 里，是在 getRenderMode() == RenderMode.surface 才会被调用，而 RenderMode 又和 BackgroundMode 有关心 。

所以在 2.5 版本后， FlutterActivity 内部创建完 FlutterView 后就会执行一个 delayFirstAndroidViewDraw 的操作。

这里主要注意一个参数： isFlutterUiDisplayed 。

当 Flutter 被完成展示的时候， isFlutterUiDisplayed 就会被设置为 true。

所以当 Flutter 没有执行完成之前， FlutterView 的 onPreDraw 就会一直返回 false ，这也是 Flutter 2.5 开始之后适配启动页的新调整。

看了这么多，大概可以看到其实开源项目的推进并不是一帆风顺的，没有什么是一开始就是最优解，而是经过多方尝试和交流，才有了现在的版本，事实上开源项目里，类似这样的经历数不胜数：

(1)Flutter记录之启动页

一年半前玩过flutter，忘光光...现在是时候重新拾取了。~

启动页一般只放图片或者加几行文字。

1、创建好flutter项目之后，在lib文件下面新建launch.dart或xx.dart.

2、在根目录下新建images文件夹，如已有直接放入图片

3、flutter_yijiake.iml中加入注入该图片，并注意空格

4、在根目录下的test/widget_test.dart中更改默认的启动页为当前的启动页路径

5、最后重新设置启动时的页面

6、非常简单的启动页面放logo图片

值得一说的是，flutter框架的UI组件需要已new 组件的形式展开。

Flutter-UI

Tip:显示文本，有些样式属性和android的textView类似，例如对齐、大小、颜色等

Tip：Material库提供了很多按钮，例如ElevatedButton、TextButton、OutlinedButton等，这些都是直接或者间接对ButtonStyleButton

的包装定制，所以大多数属性和ButtonStyleButton一样。另外所有的MaterialButton都有两个共同特征：1、按下时会有水波动画 2、都有一个onPress回调方法，若不提供回调方法，则按钮时禁止状态，不响应用户点击

Tip：使用Image来加载并显示图片，Image的数据源可以是asset、文件、内存或者网络。ImageProvider是一个抽象类，主要定义了图片数据获取的接口load( )，从不同的数据源中获取数据。如AssetImage可以加载本地图片资源，NetworkImage可以加载网络图片。

为什么Flutter开发APP性能最接近原生，前端程序员请关注

Flutter是谷歌公司推出的跨终端的开发框架，支持Android、iOS和WEB终端。1.0版在2018年12月5日发布，目前的最新版本是1.5，它采用的开发语言是Dart，Dart也是谷歌开发的计算机编程语言，语法类似C，是编译型语言：

hello world例子，打印字符串“Hello World!”：

1、没有桥接层

React Native、Weex等技术都是跨终端的框架，然而性能跟原生App存在很大差距。这是由于它们的工作原理决定的：

React Native、Weex等技术多了一个桥接层，所以界面渲染会慢一些，由于UI渲染非常频繁，想要不卡顿，基本上比较难，性能和用户体验跟原生代码有差距。而这恰恰是Flutter的优势所在：

Dart可以被编译成不同平台的本地代码，让Flutter不通过桥接层直接跟平台通信，自然性能会快一些。

2、编译执行

JavaScript是解释执行的，Dart是编译执行的，性能谁好一目了然。

3、Flutter Engine虚拟机

Flutter是依靠Flutter Engine虚拟机在iOS和Android上运行的，Flutter Engine使用C/C++编写，开发人员通过Flutter框架直接和API在内部进行交互，所以具有输入低延迟和UI渲染高帧速率的特点。除了这特点之外，Flutter还提供了自己的小部件，Flutter小部件是使用从React获取灵感的现代框架构建的。 中心思想是您使用小部件构建UI。

窗口小部件根据其当前配置和状态描述了它们的视图。 当窗口小部件的状态发生更改时，窗口小部件会重建其描述，框架将根据前面的描述进行区分，以确定底层呈现树从一个状态转换到下一个状态所需的最小更改。可以直接在OS平台提供的画布上进行描绘，也就是一些核心类库直接放到虚拟机里面，调用起来更快。

从它的系统结构可以看出，类似安卓的ART(Android Run Time)虚拟机，同样采用AOT(Ahead of TIme)技术，会在APP安装时就编译成机器语言，不再解释执行，从而优化了APP运行的性能。

4、自带渲染引擎

Flutter使用谷歌自己的Skia渲染引擎，而Android系统自带Skia引擎，iOS平台上Flutter也会把Skia引擎打包到APP中，从而实现了高效渲染。而React Native通过桥接层访问原生UI，操作频繁就容易出性能问题。

综合所述，Flutter 是性能最接近原生代码 的一种开发框架，未来也会是构建谷歌Fuchsia应用的主要方式，前途不可限量，唯一的问题就是需要学习一门新的语言：Dart，而有Java或者C#语言基础的程序员会比较容易学习。