导读:Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台应用,支持移动、Web、桌面和嵌入式平台。Flutter使用Dart为开发语言,利用Skia绘图引擎,直接通过CPU、GPU进行绘制,不需要依赖任何原生的控件,相比React Native(依赖中间者JSCore引擎)性能更高。
全文3560字,预计阅读时间 14分钟。
目前Flutter混合栈技术成熟,基础建设完善,百度贴吧、网盘、地图、阅读、输入法等均已接入Flutter,一套代码双端运行,约节省50%人力。
一、环境配置:
1.1 下载Flutter SDK
git clone https://github.com/flutter/flutter.git
1.2 配置环境变量
编辑~/.bash_profile,将环境变量添加至末尾。(如终端安装了zsh插件,则添加环境变量至 ~/.zshrc)
FLUTTER_HOME为下载的Flutter文件夹路径
export FLUTTER_HOME=/Users/.../flutter
export PATH=$PATH:$FLUTTER_HOME/bin
export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin
1.3 刷新环境变量
source ~/.bash_profile
source ~/.zshrc(如安装zsh插件)
1.4 开发工具
1. Xcode + Android Studio(推荐)
2. Visual Studio Code
以 Xcode + Android Studio为例,配置Android Studio插件:
1.4.1 安装 Flutter,Dart插件
Android Studio – Preferences – Plugins – Marketplace
1.4.2 安装最新 Android SDK Command
Android Studio – Preferences – SystemSettings – Android SDK – SDK Tools – 勾选Android SDK Command-line Tools
1.4.3 运行 flutter doctor
*报错:Unable to find bundled Java version on Flutter
cd /Applications/Android\ Studio.app/Contents/jre
ln -s ../jre jdk
ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk
flutter doctor
二、工程创建
2.1 创建Flutter项目
flutter create xxx
2.2 创建Flutter模块(用于原生集成Flutter)
create --template module xxx
2.3 工程结构
bd_flutter
.dart_tool.............记录依赖库信息
.idea..................当前项目配置
android................Android工程目录
iOS....................iOS工程目录
lib....................Flutter代码目录
test...................单元测试目录
web....................Web工程目录
pubspec.yaml...........Pub第三方依赖配置文件,类似Cocoapods、Gradle
三、编程范式
在 Flutter 中界面布局使用 Dart 语言声明式编程范式,更易于开发与阅读。
3.1 命令式编程
命令机器如何去做事情(注重 how) 。
3.2 声明式编程
告诉机器你想要的是什么(注重 what) 。
2009年开始Vue、React、SwiftUI、Flutter以声明式编程为主,正逐步成为大前端的一种编程趋势。
3.3 我们举一个栗子,来帮我我们理解这两者的区别
3.3.1 点击按钮修改文本(OC、Java版本)
3.3.2 点击按钮修改文本(Flutter、SwiftUI版本)
在声明式编程中,首先代码是结构化的;其次,开发者无需关注Label/Text控件更新,引擎会自动根据num值的改变修改引用控件的值。
四、基础架构
Flutter被设计为一个可扩展的分层系统。它可以被看作是各个独立的组件的系列合集,上层组件各自依赖下层组件。组件无法越权访问更底层的内容,并且框架层中的各个部分都是可选且可替代的。从下到上分为三层,依次为:Embedder、Engine、Framework。
4.1 Embedder
Embedder是操作系统适配层,实现了渲染 Surface 设置,线程设置等。
4.2 Engine
Engine层是 Flutter 的核心,它主要使用 C++ 编写,并提供了 Flutter 应用所需的原语。当需要绘制新一帧的内容时,引擎将负责对需要合成的场景进行栅格化。它提供了 Flutter 核心 API 的底层实现,包括图形(通过 Skia链接:https://skia.org/)、文本布局、文件及网络 IO、辅助功能支持、插件架构和 Dart 运行环境及编译环境的工具链。
4.3 Framework
Framework 层是一个用 Dart 实现的 UI SDK,包含了动画、图形绘制和手势识别等功能。开发者可以通过 Flutter 框架层与 Flutter 交互,该框架提供了以 Dart 语言编写的现代响应式框架。它包括由一系列层组成的一组丰富的平台,布局和基础库。从下层到上层,依次有:
1、基础的Foundation 类及一些基层之上的构建块服务,如 animation、 painting 和 gestures,它们可以提供上层常用的抽象。
2、渲染层用于提供操作布局的抽象。有了渲染层,你可以构建一棵可渲染对象的树。在你动态更新这些对象时,渲染树也会自动根据你的变更来更新布局。
3、widget层是一种组合的抽象。每一个渲染层中的渲染对象,都在 widgets 层中有一个对应的类。此外,widgets 层让你可以自由组合你需要复用的各种类。响应式编程模型就在该层级中被引入。
4、Material 和 Cupertino 库提供了全面的 widgets 层的原语组合,这套组合分别实现了 Material 和 iOS 设计规范。
五、视图渲染
5.1 Widget
Flutter中没有Controller、Activity概念,只有一种控件Widget(相当于View),一切皆 Widget。
Widget 是 Flutter 功能的抽象描述,是视图的配置信息,同样也是数据的映射,是 Flutter 开发框架中最基本的概念。
两个比较重要的Widget:StatelessWidget和StatefulWidget。
5.2 渲染过程
5.2.1Flutter引擎不会直接渲染widget树,因为widget是特别不稳定的,会频繁的调用build方法,widget又相互依赖,一旦调用build,后面的widget都会重新创建,直接去解析widget的话会非常消耗性能,布局需要重新计算。由此引出了Element,RenderObject的概念,Flutter引擎解析的是RenderObject树,并非widget。
5.2.2Widget会转化成RenderObject,但并不是所有的widget都会转成RenderObject。
非RenderObject转化:
//Text -> StatelessWidget -> Widget
class Text extends StatelessWidget {
}
abstract class StatelessWidget extends Widget {
StatelessElement createElement() => StatelessElement(this);
}
abstract class Widget extends DiagnosticableTree {
Element createElement(); // 创建element抽象方法
}
RenderObject转化:
//Column -> Flex -> MultiChildRenderObjectWidget - > RenderObjectWidget -> Widget
classColumnextendsFlex{
}
classFlexextendsMultiChildRenderObjectWidget{
// ⽅法实现
RenderFlexcreateRenderObject(BuildContext context){
//返回RenderFlex
returnRenderFlex -> RenderBox -> RenderObject
} }
abstractclassMultiChildRenderObjectWidgetextendsRenderObjectWidget{
}
abstractclassRenderObjectWidgetextendsWidget{
RenderObjectElementcreateElement();
RenderObjectcreateRenderObject(BuildContext context);// 抽象⽅法-创建RenderObject
voidupdateRenderObject(BuildContext context, covariant RenderObject renderObject){
}
voiddidUnmountRenderObject(covariant RenderObject renderObject){ }
}
abstractclassWidgetextendsDiagnosticableTree{
ElementcreateElement();// 抽象⽅法-创建element
}
classRenderFlexextendsRenderBoxwithContainerRenderObjectMixin<RenderBox,
FlexParentData>,
RenderBoxContainerDefaultsMixin<RenderBox,
FlexParentData>,
DebugOverflowIndicatorMixin{
}
abstractclassRenderBoxextendsRenderObject{
}
六、混合开发
6.1 Flutter调用原生方法
1.Platform channels
2.Pigeon
3.https://pub.dev/ 中搜索第三方开源包
以Platform channels为例:Flutter调用原生获取UDID
/*
Flutter代码
*/
staticconstplatform =constMethodChannel("leo.com/getudid");
voidgetUDID()async{
final result =awaitplatform.invokeMethod("nativeGetUDID");// 要调⽤的⽅法
// final result = await platform.invokeMethod("nativeGetUDID",["flutter参数"]);
setState(() {
_udid = result;
});
}
/*
iOS代码
*/
// 1.获取FlutterViewController
letcontroller: FlutterViewController =window.rootViewControlleras!
FlutterViewController;
// 2.创建FlutterMethodChannel,跟controller⼆进制消息通信
letchannel = FlutterMethodChannel(name:"leo.com/getudid", binaryMessenger:
controller.binaryMessenger);
// 3.监听channel调⽤⽅法,当flutter调⽤nativeGetUDID的时候调⽤
channel.setMethodCallHandler { (call: FlutterMethodCall, result:@escaping
FlutterResult)in
// 1.判断当前是否是nativeGetUDID
guard call.method =="nativeGetUDID"else{
result(FlutterMethodNotImplemented);// 报⼀个没有⽅法的错误
return;
}
call.arguments;//传递过来的参数
// 2.获取UDID
letudid ="xxxx-xxxx-xxxx-xxxx"
result(udid)//回调值
}
/*
Android代码
*/
privatevalCHANNEL ="leo.com/getudid"
overridefunconfigureFlutterEngine(@NonNullflutterEngine:FlutterEngine){
GeneratedPluginRegistrant.registerWith(flutterEngine);
// 1.创建MethodChannel对象
valmethodChannel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger,
CHANNEL)
// 2.添加调⽤⽅法的回调
methodChannel.setMethodCallHandler {
// Note: this method is invoked on the main thread.
call, result ->
// 2.1.如果调⽤的⽅法是nativeGetUDID,那么正常执⾏
if(call.method =="nativeGetUDID") {
// 2.1.1.调⽤另外⼀个⾃定义⽅法回去电量信息
valudid ="xxxx-xxxx-xxxx-xxxx";
result.success(udid)
}else{
//⽅法找不到,回调notImplemented
result.notImplemented()
}
}
}
6.2 原⽣集成Flutter创建Flutter模块
create --template module native_add_flutter
6.2.1 iOS集成Flutter
// CocoaPods集成
flutter_application_path =../native_add_flutter
load File.join(flutter_application_path,.ios,Flutter,podhelper.rb’)
// 初始化Flutter引擎 , 为引擎起名为leo
letflutterEngine:FlutterEngine=FlutterEngine(name:"leo");
// 启动flutter引擎,默认函数⼊⼝为main
flutterEngine.run();
letflutterVC =FlutterViewController(engine: engine, nibName:nil, bundle:nil);
flutterVC.modalPresentationStyle = .fullScreen;
self.present(flutterVC, animated:true, completion:nil);
6.2.2 Android集成Flutter
// 在gradle进⾏配置
// 创建Android项⽬、添加相关的依赖
// 1、修改Android项⽬settings.gradle
setBinding(newBinding([gradle:this]))// new
evaluate(newFile(// new
settingsDir.parentFile,// new
native_add_flutter/.android/include_flutter.groovy// new
))
include:native_add_flutter
project(:native_add_flutter).projectDir =newFile(../native_add_flutter)
// 2、配置Android项⽬的build.gradle
dependencies {
...
implementation project(:flutter)//增加flutter依赖
}
// 3、AndroidManifest.xml配置
"io.flutter.embedding.android.FlutterActivity" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDi
rection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize"
/>
importio.flutter.embedding.android.FlutterActivity;
publicclassMainActivityextendsAppCompatActivity{
@Override
protectedvoidonCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
startActivity(
FlutterActivity.createDefaultIntent(this)
);
}
}
七、案例讲解 – 计数器
flutter create flutterdemo
main.dart
// 导⼊类
importpackage:flutter/material.dart;
//⼊⼝函数,程序加载时调⽤
voidmain(){
runApp(MyApp());//调⽤runApp⽅法,并初始化MyApp
}
classMyAppextendsStatelessWidget{
// This widget is the root of your application.
@override
Widgetbuild(BuildContext context){//初始化会调⽤build⽅法
returnMaterialApp(//Material为Google的⼀种UI⻛格,MaterialApp可为项⽬配置App标题、主题
等
title:Flutter Demo,
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". Youll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didnt reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title:Flutter Demo Home Page),//设置主⻚为MyHomePage
);
}
}
//由于点击需要更改Text显示,所以此处继承StatefulWidget
classMyHomePageextendsStatefulWidget{
MyHomePage({Key? key, requiredthis.title}) :super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
finalString title;
@override
_MyHomePageStatecreateState()=> _MyHomePageState();
}
class_MyHomePageStateextendsState<MyHomePage>{
int_counter =0;
//下的按钮的点击事件
void_incrementCounter(){
// setState会标记需要刷新UI
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;//点击按钮时候,counter+1, 并⾃动更新UI显示
});
}
@override
Widgetbuild(BuildContext context){
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
returnScaffold(
appBar: AppBar(//配置导航
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(//配置布局显示在中⼼
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(//⼀种竖向布局⽅式,相当于listview
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children:
[//返回多个widget数组, Text(
You have pushed the button this many times:,
),
Text($_counter,//显示_counter的值
style: Theme.of(context).textTheme.headline4,//显示样式,使⽤主题的headline4
显示
),
],
),
),
floatingActionButton: FloatingActionButton(//⼀个可点击的按钮,固定在右下⻆
onPressed: _incrementCounter,//点击事件
tooltip:Increment,
child: Icon(Icons.add),//按钮显示为内部⾃带的add图⽚
),// This trailing comma makes auto-formatting nicer for build methods.
);
}
}
八、附:近期重要更新
1.2版本 2019/02/26支持java1.8增加了JavaScript与Dart的通信通道增加了对Android App Bundles的支持通过减少调用构造函数和静态方法,提升AOT(预编译)10%-20%的性能
1.5版本2019/05/07添加了集成测试提高热重载性能决定删除动态更新计划添加对Linux和Windows的Flutter运行支持
1.7版本 2019/07/09优化Flutter tools支持支持32位和64位Android bundles开始支持web端和实验性支持桌面端
1.9版本 2019/09/10
完善Web平台支持桌面平台实验性支持新增24种语言环境支持支持macOS Catalina和iOS 13Android增加对构建AAR的支持
1.12版本 2019/12/11支持Android 10支持iOS13暗黑模式可以将Flutter模块集成到Android或iOS应用中将Web支持从开发版转变为beta版;将MacOS支持纳入开发版本推出新工具DartPad(DartPad 是一个可以让你在任何现代化的浏览器中体验 Dart 编程语言线上工具)
1.17版本 2020/05/06减少18.5%应用体积提升了20%-37%导航性能降低了40% iOS动画CPU/GPU使用率增加对谷歌字体的支持:fonts.google.com完成对Type Scale部分的重构,符合 2018 Material 设计规范提升了iOS 50%渲染速度(iPhone5s+、iOS10+支持Metal 渲染);不完全支持扔使用OpenGL渲染
1.20版本 2020/08/05增强了UTF-8解码pubspec.yaml插件不再支持旧格式在Visual Studio Code中预览嵌入式Dart DevTools引入新的混编插件-Pigeon,可以在Dart方法中直接调用Java/Objective-C/Kotlin/Swift方法并传递非原始数据对象。
1.22版本 2020/10/01增加应用体积分析工具提供了国际化和本地化工具,并实现了热重载支持支持Android 11;支持新的屏幕类型 (如挖孔屏和瀑布屏),以及同步Android 11动画效果支持iOS 14、Xcode 12新图标以及对新iOS 14 App Clips功能的预览支持;默认模板版本从8.0升级到9.0可正式使用的 Google Maps 和 WebView 插件,将 Android 和 iOS 系统的原生界面组件托管在 Flutter 应用中
2.0版本 2021/03/03Web支持从测试版转变为稳定版除了HTML渲染,增加了CanvasKit渲染,桌面端浏览器会默认调用CanvasKit版本,移动端的浏览器会调用HTML版本。混合开发多flutter实例(经测试iOS平台存在内存问题)桌面平台的支持(beta)Google Mobile Ads(Beta)Dart 2.12 增加了空安全
2.2版本 2021/05/18更好的iOS、Android、Web跨平台支持Dart 2.13 更新,引入Type aliasesFlutter Web 提升稳定性优化iOS端渲染动画帧时间、实现了增量iOS安装,缩短更新安装时间。Android中引入延迟组件,允许Flutter应用在运行时下载包含提前编译的代码模块,减少初始安装大小。
招聘信息
短视频研发部,负责好看视频、全民小视频以及多款创新APP的孵化研发工作。是公司级战略产品,承担百度系产品矩阵短视频内容供给任务,重点支持百度搜索和信息流视频化,肩负百度内容生态视频化转型使命。仅用两年的时间就实现用户规模从零到亿级增长,日活数千万。拥有百亿级流量,亿级数据量,丰富新奇和全面的产品玩法,多类型的技术系统和领先的技术架构。
欢迎加入短视频研发部,社招,实习,校招都要哦
简历投递邮箱:geektalk@baidu.com (投递备注【短视频】)
推荐阅读:
|百度信誉认证中台架构解析
|图数据库在百度汉语中的应用
文末福利
来谈谈你对本篇文章的看法
文末留言点赞第一名
我们将送一个百度定制钥匙扣一只
(好用又好看哦~)
截止时间:9月3日18:00
一键三连,好运连连,bug不见👇
声明:本文部分素材转载自互联网,如有侵权立即删除 。
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别
丞旭猿论坛
暂无评论内容