Flutter简介

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

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

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

Widget简介

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

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

enter image description here

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

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

enter image description here

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

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

Everything Is Widget

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

enter image description here

Flutter框架简介

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

enter image description here

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

  • Just in time(JIT)
  • Ahead of time(AOT)
    JIT编译时支撑了FlutterHot 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类的子类存在。)

  • tests
    该目录下主要是Dart相关的一些测试代码目录
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • Flutter 是什么? Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用...
    念_夕阅读 1,626评论 0 1
  • 前言 随着移动开发技术的日渐成熟,一些厂商开始考虑跨平台技术的解决方案,从早期的Cordova、Xamarin,再...
    Flutter编程指南阅读 6,556评论 0 7
  • 首先,什么是flutter?Flutter是谷歌爸爸推出的在iOS和Android两个平台使用Dart语言开发原生...
    Theendisthebegi阅读 2,395评论 0 1
  • 目录 一、Flutter 为何使用Dart开发语言二、Flutter的UI系统1.特点2.架构简介2.1 Flut...
    十拿九稳啦阅读 3,548评论 3 28
  • Flutter 移动应用程序 SDK 是为开发人员提供一种创建快捷、美观的应用程序的新方式,从而摆脱过去那种千篇一...
    iwakevin阅读 485评论 0 1