开发神器来了!!如何在优麒麟上安装跨平台应用框架Flutter

关注优麒麟,更多干货等着你!

Flutter 是 Google 推出并开源的移动应用开发框架,一个新的用于构建跨平台的手机 App 的 SDK,支持插件和 Package,可以通过丰富的插件和 Pakage 实现更多的功能,例如调用 GPS 和相机等等,主打跨平台、高保真、高性能,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。

01 与其他跨平台技术的比较

● 原生 App

开发人员直接调用平台 SDK 进行 UI 开发。由于语言及 SDK 的不同,所以开发人员必须为两个平台分别开发 App。

图1 原生 App 简单架构

● WebViews

UI 通过 WebView 来显示 html 代码,系统服务则通过一个中间层桥接到 JaveScript 中去。

图2 WebViews 架构

● React Native

RN 不仅桥接系统服务,也将系统 UI 也桥接到了 JaveScript 中,这样写出来的 UI 最终也会渲染成原生的控件。如图1.3这样,UI 的渲染是很频繁的,要使 UI 不卡顿,必须达到60Fps。但是桥接会花费一定的时间。所以这样的架构有时候会有性能问题。

图3 React Native 架构

● Flutter

Flutter 使用 Dart 语言开发,Dart 可以被编译(AOT)成不同平台的本地代码,让 Flutter 可以直接和平台通讯而不需要一个中间的桥接过程,从而提高了性能。

Flutter 与用于构建移动应用程序的其他多数框架不同,因为 Flutter 既不使用 WebView,也不使用操作系统的原生控件。相反,Flutter 使用自己的高性能渲染引擎来绘制 widget。这样不仅可以保证 Android 和 iOS 的 UI 一致性,而且也可以避免对原生控件依赖而带来的限制和高昂的维护成本。

图4 Flutter 架构

02 Flutter 框架结构

Flutter 框架由许多抽象的层级组成,层级越高,封装度越高,我们使用越方便,然后层级越低使用起来可能更加自由,控制粒度更精细,当然也会更加复杂。

图5 Flutter 框架结构

Flutter Framework

Framework 的底下两层在 Google 的一些视频中被合并为一个 dart UI 层,对应的是 Flutter 中的 dart:ui 包,它是 Flutter 引擎暴露的底层 UI 库,提供动画、手势及绘制能力。Flutter 框架基于这一层来构建应用程序,比如输入驱动、绘制文字、布局和渲染系统等。Rendering 层简化了布局和绘制过程。它负责处理与 Flutter Engine 的通信。Widgets 层是 Flutter 提供的一套基础组件库。这层给我们提供了可以直接使用的 UI 组件(布局相关、绘制相关、手势检测相关)。Material 和 Cupertino 层的 Widget 是 Widgets 层的封装,只不过是实现了 Material 和 Cupetino 风格的 Widget 提供给我们使用。

Flutter Engine

这是一个纯 C++实现的 SDK,其中包括了 Skia 引擎、Dart 运行时、文字排版引擎等。在代码调用 dart:ui 库时,调用最终会走到 Engine 层,然后实现真正的绘制逻辑。Flutter 框架基于这一层来构建应用程序,比如输入驱动,绘制文字,布局和渲染系统等。

Embedder

对接平台嵌入层,是操作系统适配层,实现了渲染 Surface 设置,线程设置,以及平台插件等平台相关特性的适配。

Flutter 之所以能够在原生层面上做到跨平台,是因为它通过在底层使用通用的图形绘制库 Skia,封装了一套全新的、独立的 UI 框架,即 Flutter。

03 Flutter 与平台的通信机制

Flutter 与平台之间可以有方法调用,例如下面例子中,Flutter 中使用 methodChannel 的 invokeMethod 方法和 Android 之间定义了三个方法调用:inspectionGPS、openGPS 和 getDate;Android 调用 MethodCallHandler 方法,判断 Flutter 调用的是哪一个方法,然后去调用 Android 底层的接口:

flutter: lib/main.dart ///Flutter 调用原生 Start//
static const MethodChannel methodChannel=
MethodChannel('samples.flutter.io/gps');
Future<void> _inspection()async{
String message;
message=await methodChannel.invokeMethod('inspectionGPS');
setState(() {
_message=message; });
}
Future<void> _open()async{
await methodChannel.invokeMethod('openGPS');
}
Future<void> _getDate() async{
await methodChannel.invokeMethod('getDate'); }///Flutter 调用原生 End
Android: java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
GeneratedPluginRegistrant.registerWith(this);
new MethodChannel(getFlutterView(), BLUETOOTH_CHANNEL).setMethodCallHandler(
new MethodChannel.MethodCallHandler() {
@Override
public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
if (methodCall.method.equals("inspectionGPS")) {
boolean isOpen = isOPen();
if (isOpen) { //检测 GPS 是否开启
result.success("GPS 已开启");
}
result.success("GPS 未开启");
} else if (methodCall.method.equals("openGPS")) { //打开 GPS
openGPSSettings(context);
} else if (methodCall.method.equals("getDate")) { //显示经纬度
initLocation();
}
}
}
);
}

Flutter 提供了安卓上的 flutterActivity,类似于其他的 Activity,添加到安卓的 AndroidManifest.xml 中即可显示 Flutter 的 UI,例如:

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"
/>
import io.flutter.embedding.android.FlutterActivity;myButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
startActivity(
FlutterActivity.createDefaultIntent(currentActivity)
);
}});

04 在优麒麟上安装 Flutter

4.1 直接安装 Flutter

在优麒麟上开发 Flutter 应用程序,推荐使用 Visual Studio code 作为 IDE,只需要在终端上执行以下操作:

$ snap install --classic flutter
$ snap install --classic code
$ code --install-extension dart-code.flutter

在优麒麟上安装了 Flutter SDK 之后,要构建桌面应用程序,需要访问 Flutter dev(or the master)频道并启用 UKUI 桌面支持:

$ flutter channel dev
$ flutter upgrade
$ flutter config --enable-linux-desktop

当创建一个新的 Flutter 项目时,将得到一个子目录,它将能够在机器上作为桌面应用程序运行:

$ flutter create counter
$ cd counter
$ flutter run -d linux

将得到一个新的应用程序,它是运行 Flutter 构建的。

图6 程序运行示意图

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Hello Ubuntu Kylin'),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center, children: [
const Text(
'HELLO UKUI', style:TextStyle(fontSize:100,
color:Colors.red,
), ),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods. );}}

4.2 在优麒麟启动现有 Flutter 项目

如果您有一个现有的 Flutter 项目,您想在启用优麒麟之后向其中添加支持,那么可以添加子文件夹,如下所示:

$ cd my_flutter_app
$ flutter create

这将创建带有 runner 项目的子文件夹,您需要在桌面上构建和运行 Flutter 应用程序。有了 Flutter 的项目,并对项目进行运行时首先先用:

$ flutter devices

确认我们的设备是可被识别的,然后使用:

$ flutter run

可以直接运行在我们的开发机上。编译时使用:

$ flutter build linux

可编译出对应的版本,存放在“build/对应平台/release”目录下,注意只能编译和开发机同平台的版本。优麒麟平台编译出的为一个可执行文件。

投稿作者 作者网站

评论

 
 

发表评论

 
你的昵称*
电子邮件*
网址(选填)
我的评论*
  • 发表评论
  • 为您推荐


    请支持IMCN发展!

    谁在捐赠

    微信捐赠 支付宝捐赠
    微信捐赠 支付宝捐赠




    微信公众号二维码

    归档