Flutter简介

全栈程序员站长

发布于 2022-06-30 10:06:20

4730

发布于 2022-06-30 10:06:20

文章被收录于专栏：全栈程序员必看

Flutter是Google开源的移动应用框架，一套代码能完成跨平台(Android和IOS)移动应用的开发，对于Flutter而言，其有以下特点：

现代响应式框架
高速的2D渲染引擎
方便快捷的开发工具
各种组件库

下面我们将针对Flutter中的特性做简单介绍。

Widget简介

在Flutter中，一个页面是由许多个Widget构建而成的树形结构，Widget是Flutter应用的基础组件，相当于Android原生中的View组件，一个Widget使用Dart语言编写，用于描述一部分可参与用户交互的界面，在Flutter中，几乎都是用Dart 编写的Widget组件。

在Android Studio中新建一个Flutter项目并运行，运行完成后我们会发现在Android Studio右侧工具栏出现了Flutter Inspector选项，在该选项卡内，我们可以更深层级的理解上面这段话。

上图为Flutter Inspector中的Widgets面板中的内容(左侧为当前页面的截图)，在这里我们可以看到页面上的所有元素都是Widget。当启动Widget Mode时，我们可以选中某一个Widget，同时应用对应区域上也会选中并提示Widget类型(此模式在真机和虚拟机上均适用，类似于Android原生的显示布局边界的功能，只不过这里显示的是单个Widget的边界)，同时也会在面板上显示当前Widget的属性信息，这里就印证了我们前面说的在Flutter中，几乎都是用Dart编写的Widget组件，在界面发生变化时，我们可以通过图中的刷新按钮，来同步Widgets树到面板中。

随后我们切换到Widgets左侧的Render Tree面板：

从图中就可以看出我们的基础页面渲染组成仍然是类似于原生的树形结构。

在Flutter中，所有元素都是Widget，并且Widget之间可以发生嵌套，并不像我们的Android原生独立出了ViewGroup，在Flutter中，Widget既可以是View也可以当做ViewGroup来用，下图中罗列的所有元素都是Widget，当然还有很多没有列举出来。

在Flutter中，Widget分两类，一类具备State状态(StatefulWidget)，一类不具备(StatelessWidget)即构建后静态不可变，UI界面刷新依赖于状态切换，这样节省了开发的状态管理，使得UI状态管理更加轻松，下图为StatefulWidget的生命周期：

Flutter框架简介

在Flutter中，上层Dart语言编写的App在编译时被转化为对应的平台语言，执行效率更高。在界面渲染上Flutter采用Skia作为底层的图像引擎，渲染速度更快。整体的Flutter Framework如下图：

Flutter选用 Dart作为其开发语言，除了其语法开源等方面的因素外，主要还关乎Dart语言的编译方式， Dart语言有两种编译时：

Just in time(JIT)
Ahead of time(AOT) JIT编译时支撑了Flutter的Hot reload开发模式(即代码热更新，修改后ctrl+s实时运行到真机或者模拟器上)，使得整个开发过程更流畅，对界面的修改实时可见(当然这里的实时是相对Android原生的UI修改到验证速度而言的，这里重点为了说明其Hot reload模式的便捷性)。 AOT编译时支撑了Flutter的跨平台特性，在运行前编译时会把我们的Dart代码编译成对应的Arm代码。

Flutter应用目录结构

我们在Android studio或者cmd( 通过flutter create方式)创建的Flutter应用一般会生成四个目录

android Android平台的原生代码目录，有一些额外的原生逻辑可在该目录下处理
ios IOS平台的原生代码目录，有一些额外的原生逻辑可在该目录下处理
lib 跨平台的功能代码目录，该目录下的文件均使用Dart语言编写，在运行前编译时会将其编译成对应的ARM 代码，一般情况下，开发过程中我们只需要关注该目录就可以，在新建项目的项目中，该目录一般会自动生成main.dart文件，该文件为整个Dart部分代码的入口文件，其内部代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: new Text(title),),
      body: Container(),
    );
  }
}
复制代码

其中main函数为整个Flutter部分的入口函数，相当于C语言的main函数，整个Flutter部分的代码调起均在该函数内(这也就意味着我们原来在Application中进行的数据初始化，全局变量初始化之类的操作，需要在该函数中完成,如果有需要的话)。 runApp函数指定Flutter部分的第一个Widget页面，随后运行就可以看到页面效果了 (这里描述为Flutter部分的主要原因是有可能存在Flutter混合原生开发的情况，不过一般存在混合的话会有FlutterActivity类的子类存在。)