flutter 基础知识

2018-08-22 本文已影响57人 sylviaMo

linux安装配置flutter

参考官方配置，很容易就配置完毕后https://flutterchina.club/setup-linux/，可能在执行 flutter doctor会报device 找不到的问题，连上手机或者模拟器再执行一遍，基本就不会报错了。

flutter的层设计

Flutter总共分为四层，从下到上分别是：dart:ui，Rendering，Widgets，Material。参照下图：

image

dart:ui

dart:ui是flutter底层引擎所提供的一个dart库，是flutter对dart标准库的一个扩展。它提供了一套基于canvas的绘图api，也包含了用于跟操作系统交互的模块mojo，当然，还包括了所有dart标准库。dart:ui提供最基础的底层api，要直接使用它，你必须写非常多的代码，进行大量的运算：比如在每一帧中计算每个组件的坐标，编码工作很繁琐。一般来说，开发者不会直接使用dart:ui，但如果他们需要写一些特殊的应用，比如开发游戏，那可能就需要在dart:ui的基础上去构建自己的框架。

Rendering

Rendering层是布局（排版）抽象层，它把dart:ui层api抽象封装成大量的Render对象，免除了大量布局坐标的手动计算，并还对布局数据进行了缓存处理，提升了渲染效率。开发者使用层层嵌套的构造函数来构建一个render对象树，当发生用户交互或者数据发生改变时，需要显式更新对应的render对象，即更新UI。这样的设计与其他UI系统非常类似，比如：web的dom，android与ios的视图层等。因为遵循了传统的开发思路，喜欢这种方式的开发者可以直接使用本层的api进行开发。

Widgets

Widgets层是对Rendering层对象的封装层，它引入element对象以及StatefulBuilder来管理底层的render对象，开发者使用不可变的Widget对象来创建UI，当数据发生变化的时候，再重新构建一个新的widget树即可，不再需要使用分离的代码来维护UI（Rendering层就要用一部分代码构建初始UI，另一部分更新UI）。这一层应该就是flutter默认的或者说最基础的组件库，你可以继承并修改它们，做成属于自己的组件。

Material

Material层相对来说最容易理解，它们就是使用Widgets层对象，实现了Material Design的顶层UI组件。

Dart

语言

Language Tour, 讲解语言基础 - https://www.dartlang.org/guides/language/language-tour 212
Library Tour, 讲解标准库 - https://www.dartlang.org/guides/libraries/library-tour 12
Effective Dart，讲解编码最佳实践 - https://www.dartlang.org/guides/language/effective-dart 10
Futures, 讲解异步编程之Futures - https://www.dartlang.org/tutorials/language/futures 12
Streams, 讲解异步编程之Streams - https://www.dartlang.org/tutorials/language/streams 6
Sound Dart, 讲解Dart的类型系统 - https://www.dartlang.org/guides/language/sound-dart 1
Dart API文档 - https://api.dartlang.org/ 29

工具

Pub即Dart包管理器入门 - https://www.dartlang.org/tools/pub/get-started 11
定制Dart静态分析 - https://www.dartlang.org/guides/language/analysis-options 2

创建一个flutter project

选择 File>New Flutter Project
选择 Flutter application 作为 project 类型, 然后点击 Next
输入项目名称 (如 myapp), 然后点击 Next
点击 Finish
等待Android Studio安装SDK并创建项目.

上述命令创建一个Flutter项目，项目名为myapp，其中包含一个使用Material 组件的简单演示应用程序。

在项目目录中，您应用程序的代码位于 lib/main.dart.

第一次创建会比较慢，在国内镜像url都已经配置好的情况下，稍微等待几分钟就会创建完成。

包管理

每个flutter都是有一个包管理配置文件pubspec.yaml，在这里可以引入外部包，可以引入字体库和一些本地图片等资源

name: flutter_layout
description: A new Flutter application.

dependencies:
  flutter:
    sdk: flutter
    cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  uses-material-design: true
  assets:
      - images/
   fonts:
     - family: Schyler
       fonts:
         - asset: fonts/Schyler-Regular.ttf
         - asset: fonts/Schyler-Italic.ttf
           style: italic
     - family: Trajan Pro
       fonts:
         - asset: fonts/TrajanPro.ttf
         - asset: fonts/TrajanPro_Bold.ttf
           weight: 700

有状态的部件（Stateful widget）

Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的.

Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:

一个 StatefulWidget类。
一个 State类。 StatefulWidget类本身是不变的，但是 State类在widget生命周期中始终存在.

在Flutter中构建布局

未完待续...