欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

flutter 基础知识

发表日期:2018-08 文章编辑:小灯 浏览次数:1595

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

  1. 选择 File>New Flutter Project
  2. 选择 Flutter application 作为 project 类型, 然后点击 Next
  3. 输入项目名称 (如 myapp), 然后点击 Next
  4. 点击 Finish
  5. 等待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.2dev_dependencies: flutter_test: sdk: flutteruses-material-design: true assets: - images/fonts:- family: Schylerfonts:- asset: fonts/Schyler-Regular.ttf- asset: fonts/Schyler-Italic.ttfstyle: italic- family: Trajan Profonts:- asset: fonts/TrajanPro.ttf- asset: fonts/TrajanPro_Bold.ttfweight: 700 

有状态的部件(Stateful widget)

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

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

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

在Flutter中构建布局

未完待续...


本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户学习参考,本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:https://www.dengtar.com/18042.html
相关APP开发
    SQL执行错误,请检查