谷歌开发者之声:Flutter - Google 开源的移动 UI 框架,助力编码更上一层楼

访客 193 0

写在前面

如今,人们都希望手机应用拥有精美的设计、流畅的动画和出色的功能。为了实现这些目标,开发者们需要在不牺牲质量和性能的前提下更快地推进新功能的研发。而Flutter正是满足这一需求的核心技术。

谷歌开发者之声:Flutter - Google 开源的移动 UI 框架,助力编码更上一层楼-第1张图片-谷歌商店上架

文章目录

  • 写在前面
  • Flutter是什么?
  • Flutter的安装
  • 示例代码
  • 框架结构

Flutter是什么?

  • Flutter介绍

Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。 Flutter 开源、免费,拥有宽松的开源协议,适合商业项目。Flutter已推出稳定的2.0版本。
谷歌开发者之声:Flutter - Google 开源的移动 UI 框架,助力编码更上一层楼-第2张图片-谷歌商店上架

Flutter的安装

环境安装

将下面的这段话改写为:“导出 PUB_HOSTED_URL=https://pub.flutter-io.cn
导出 FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn”

## 检测环境是否安装成功

运行以下命令检查环境是否安装成功:

```bash
$ flutter doctor
```

开发工具推荐使用 Android Studio 和 Visual Studio Code。

示例代码

下面是一个使用最简单的 Hello World! 的示例:
在Dart2.0版本之后,可以省略new关键字。下面是修改后的代码:

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(Center(
    child: Text('Hello World!'),
  ));
}
``` 
import 'package:flutter/material.dart';void main() {    runApp(Center(        child: Text('Hello World!')    ));}

在编写app时,通常会创建独立组件,是继承无状态的StatelessWidget还是有状态的StatefulWidget, 取决于您的组件是否需要管理状态。组件的主要工作是实现一个build函数,它使用其他低级别的组件来构建自己。Flutter框架将依次构建这些组件,最终会到达代表底层渲染对象的组件-RenderObject,它会计算并描述组件的几何形状。
谷歌开发者之声:Flutter - Google 开源的移动 UI 框架,助力编码更上一层楼-第3张图片-谷歌商店上架

框架结构

让我们来观察一下官方提供的 Flutter 框架图,如下图所示(见图1-1)。

谷歌开发者之声:Flutter - Google 开源的移动 UI 框架,助力编码更上一层楼-第4张图片-谷歌商店上架

简单来讲,Flutter 从上到下可以分为三层:框架层、引擎层和嵌入层,下面我们分别介绍:

1. 框架层:

Flutter Framework是一个纯Dart实现的SDK,它作为框架层提供了一套基础库。我们将从底层开始简要介绍一下它的特点。

  • 在一些Google的视频中,底下的两个层级(Foundation和Animation、Painting、Gestures)被合并为一个名为dart UI的层级。这个层级对应于Flutter中的dart:ui包,它是Flutter Engine暴露出来的底层UI库,提供了动画、手势和绘制能力。

  • 渲染层,也称为Rendering层,是一个抽象的布局层。它依赖于Dart UI层,并且负责构建由可渲染对象组成的渲染树。当这些对象发生动态更新时,渲染树会找出变化的部分并进行相应的更新。作为Flutter框架中最核心的部分之一,渲染层除了确定每个渲染对象的位置和大小外,还需要进行坐标变换和绘制(调用底层dart:ui)。

  • Flutter 提供了一套基础组件库,称为 Widgets 层。除此之外,Flutter 还提供了两种视觉风格的组件库:Material 和 Cupertino。这两个组件库分别遵循了 Material Design 和 iOS 设计规范的要求。

Flutter 框架相对较小,因为一些开发者可能会使用到的更高层级的功能已经被拆分到不同的软件包中,使用 Dart 和 Flutter 的核心库实现,其中包括平台插件,例如camera(opens new window)webview (opens new window),以及和平台无关的功能,例如 animations(opens new window)

我们进行Flutter 开发时,大多数时候都是和 Flutter Framework 打交道。

2. 引擎层是指系统的核心组件。

Engine,即引擎层,是 Flutter 的核心。这一层主要由 C++ 实现,包括 Skia 引擎、Dart 运行时和文字排版引擎等。当代码调用 dart:ui 库时,最终会经过引擎层进行真正的绘制和显示。

3. 嵌入层是一种重要的组件。

Embedder,也称为嵌入层,在Flutter中起着重要的作用。Flutter的最终渲染和交互需要依赖于所在平台的操作系统API,而嵌入层则负责将Flutter引擎安装到特定平台上。不同平台的嵌入层使用了当前平台所支持的编程语言,例如Android使用Java和C++,iOS和macOS使用Objective-C和Objective-C++,Windows和Linux使用C++。Flutter代码可以通过嵌入层以模块化方式集成到现有应用中,并且也可以作为应用的核心部分。Flutter本身已经包含了各个常见平台所需的嵌入层,在未来如果要支持新的平台,则需要针对该新平台编写一个相应的嵌入层。

谷歌开发者之声:Flutter - Google 开源的移动 UI 框架,助力编码更上一层楼-第5张图片-谷歌商店上架

标签: 谷歌开发者 组件 框架 平台

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~