关注优麒麟，更多干货等你来！Flutter是谷歌推出的开源移动应用开发框架。它是用于构建跨平台移动应用程序的新SDK。它支持插件和包。通过丰富的插件和Pakage可以实现更多的功能，如调用GPS、摄像头等，主打跨平台、高保真、高性能，可快速构建优质原生用户界面在iOS和安卓系统上。01与其他跨平台技术对比●NativeApp开发者直接调用平台SDK进行UI开发。由于语言和SDK的不同，开发者必须分别为两个平台开发应用。图1NativeApp简单架构●WebViewsUI通过WebView显示html代码，系统服务通过中间层桥接到JavaScript。图2WebViews架构●ReactNativeRN不仅桥接了系统服务，还桥接了系统UI到JavaScript，从而使编写的UI最终呈现为原生控件。如图1.3所示，UI的渲染非常频繁。为了防止UI卡顿，它必须达到60Fps。但是桥接需要一些时间。所以这样的架构有时会有性能问题。图3ReactNative架构●FlutterFlutter使用Dart语言开发，Dart可以编译（AOT）为不同平台的原生代码，让Flutter直接与平台通信，无需中间桥接过程，从而提高性能。Flutter不同于大多数其他用于构建移动应用程序的框架，因为Flutter既不使用WebView也不使用操作系统的本机控件。相反，Flutter使用自己的高性能渲染引擎来绘制小部件。这样既保证了Android和iOS的UI一致性，又避免了依赖原生控件带来的局限性和高昂的维护成本。图4FlutterArchitecture02FlutterFramework结构Flutter框架由许多抽象层次组成。层级越高，封装性越高，我们使用起来越方便，而层级越低，可能使用起来越自由，控制粒度越细，当然也越复杂。图5Flutter框架结构FlutterFrameworkFramework的底层两层在一些Google视频中被合并为一个dartUI层，对应Flutter中的dart:ui包，是Flutter引擎对外暴露的底层UI库，提供动画，手势和绘图能力。Flutter框架基于这一层构建应用程序，例如输入驱动程序、绘制文本、布局和渲染系统等。渲染层简化了布局和绘制过程。它处理与FlutterEngine的通信。Widgets层是Flutter提供的一套基础组件库。这一层为我们提供了可以直接使用的UI组件（布局相关、绘图相关、手势检测相关）。Material和Cupertino层的Widgets是对Widgets层的封装，只是实现了Material和Cupertino样式的Widgets供我们使用。FlutterEngine是一个纯C++的SDK，包括Skia引擎、Dart运行时、文本排版引擎等，代码调用dart:ui库时，最终会调用到Engine层，然后才是真正的绘制逻辑实施的。Flutter框架基于该层构建应用程序，如输入驱动、绘制文本、布局和渲染系统等。Embedder对接平台嵌入层是操作系统适配层，实现渲染Surface等平台相关特性的适配设置、线程设置和平台插件。Flutter之所以能够在原生层面跨平台，是因为它在底层使用了通用的图形绘制库Skia，封装了一个全新的、独立的UI框架Flutter。03Flutter与平台的通信机制Flutter与平台之间可以进行方法调用。例如，在下面的例子中，在Flutter和Android中使用methodChannel的invokeMethod方法之间定义了三个方法调用：inspectionGPS、openGPS和getDate；Android调用MethodCallHandler方法，判断Flutter调用了哪个方法，然后调用Android底层接口：flutter:lib/main.dart///Flutter调用nativeStart//staticconstMethodChannelmethodChannel=MethodChannel('samples.flutter.io/gps');Future_inspection()async{Stringmessage;message=awaitmethodChannel.invokeMethod('inspectionGPS');setState((){_message=message;});}Future_open()async{awaitmethodChannel.invokeMethod('openGPS');}Future_getDate()async{awaitmethodChannel.invokeMethod('getDate');}///Flutter调用原生EndAndroid:java@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);GeneratedPluginRegistrant.registerWith(this);newMethodChannel(getFlutterView(),BLUETOOTH_CHANNEL).setMethodCallHandler(newMethodChannel.MethodCallHandler(){@OverridepublicvoidonMethodCall(MethodCallmethodCall,MethodChannel.Resultresult){if(methodCall.method.equals("inspectionGPS")){booleanisOpen=isOPen();if(isOpen){//检测GPS是否开启result.success("GPSisOpen");}result.success("GPS未开启");}elseif(methodCall.method.equals("openGPS")){//开启GPSopenGPSSettings(context);}elseif(methodCall.method.equals("getDate")){//显示经纬度initLocation();}}});}Flutter在Android上提供了flutterActivity，和其他Activity类似，可以添加到AndroidManifest.xml中显示FlutterUI，例如：android:name="io.flutter.embedding.android.FlutterActivity"android:theme="@style/LaunchTheme"android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"android:hardwareAccelerated="true"android:windowSoftInputMode="adjustResize"/>importio.flutter.embedding.android.FlutterActivity;myButton.setOnClickListener(newOnClickListener(){@OverridepublicvoidonClick(Viewv){startActivity（颤振活动。创建DefaultIntent(currentActivity));}});04在优麒麟上安装Flutter4.1直接安装Flutter，即可在优麒麟上开发Flutter应用。建议使用VisualStudiocode作为IDE。只需要在终端执行以下操作：$snapinstall--classicflutter$snapinstall--classiccode$code--install-extensiondart-code.flutter在优麒麟上安装FlutterSDK后，构建桌面应用程序，你需要访问Flutterdev（或master）通道并启用UKUI桌面支持：$flutterchanneldev$flutterupgrade$flutterconfig--enable-linux-desktop当创建一个新的Flutter项目时，你会得到一个子目录它将能够在你的机器上作为桌面应用程序运行：$fluttercreatecounter$cdcounter$flutterrun-dlinux将获得一个新的应用程序，通过运行Flutter图6程序运行类示意图MyAppextendsStatelessWidget{constMyApp({Key?key}):super(key:key);@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'FlutterDemo',theme:ThemeData(primarySwatch:Colors.blue,),home:constMyHomePage(title:'HelloUbuntuKylin');}}@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text(widget.title),),body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[constText('HELLOUKUI',style:TextStyle(fontSize:100,color:Colors.red,),),]),)),floatingActionButton:FloatingActionButton(onPressed:_incrementCounter,tooltip:'Increment',child:constIcon(Icons.add),),//这个尾随逗号使构建方法的自动格式化更好。);}}4.2现已在优麒麟上线拥有一个Flutter项目如果你已有一个Flutter项目，希望在启用优麒麟后为其添加支持，你可以添加子文件夹，如下所示：$cdmy_flutter_app$fluttercreateThis将使用运行程序项目子文件夹创建flutter项目，您需要在桌面上构建和运行Flutter应用程序。有了一个Flutter项目，在运行项目的时候，先使用：$flutterdevices确认我们的设备是可以识别的，然后使用：$flutterrun直接在我们的开发机上运行。编译时使用：$flutterbuildlinux可以编译对应版本，存放在“build/对应平台/release”目录下。注意只能编译与开发机同平台的版本。优麒麟平台编译出可执行文件。
