FlutterFlutter圈子

Flutter简介

2019-06-03  本文已影响0人  小海编码日记

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

下面我们将针对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语言有两种编译时:

Flutter应用目录结构

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

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类的子类存在。)

上一篇 下一篇

猜你喜欢

热点阅读