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

5次阅读

共计 4754 个字符，预计需要花费 12 分钟才能阅读完成。

关注优麒麟，更多干货等着你！

Flutter 是 Google 推出并开源的挪动利用开发框架，一个新的用于构建跨平台的手机 App 的 SDK，反对插件和 Package，能够通过丰盛的插件和 Pakage 实现更多的性能，例如调用 GPS 和相机等等，主打跨平台、高保真、高性能，能够疾速在 iOS 和 Android 上构建高质量的原生用户界面。

● 原生 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 架构

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。

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)
);
}});

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. );}}