Flutter:从0到1构建大前端应用学习笔记

基础组件是组建的鼻祖Container、Row、Column在官方文档里都是基础组件
Container属于单一子元素的组件(Single-child)
Row、Column属于多子元素的组件(Multi-child)

基础组件 (Basic widgets)

   //Text
    //Icon
      在Flutter系统自带的图标里,有如下几种
      Icons.access_alarm,
      Icons.search,
      Icons.movie
Image
    //加载跟本地图片Image(image: AssetImage("images/image_icon.png"),width:50.0),
    //加载网络图片Image(image:NetworkImage("https://www.sxwfApp.com.cn/templates/images/img_logo.jpg"),width:120.0,)
    //还支持Image.file、Image.menmory的方式加载。图片加载可以使从本地、网络、内存、文件等,每种方式继承了各自的ImageProvider。
//Button
    //常用的有RaisedButton(有水波纹有背景)
    //Flatbutton(扁平无背景)
    //IconButton(图片)
    //FloatingActionButton(圆形导航类一般一个页面有一个做分享分页使用)
    //OutlineButton(有边框,点击时边框背景会变成高亮状态)
    //...
//ImageIcon

单一子元素组件(Single-child)

3.2.1 Container是在Flutter中使用最多的
3.2.3 SingleChildScrollView负责滚动的组件,里面只能嵌套一个组件,相当于Android中的ScrollView
3.2.4 FittedBox负责对组件进行缩放和位置调整。
fit 缩放方式 alignment 对齐方式
3.2.5 FractionallySizedBox 缩放大小可能超出其父组件的设置。
3.2.6 ConstrainedBox 一种有约束限制的布局,在其约定范围内,最大高度、最小宽度其子组件不可逾越。
3.2.7 Baseline 是一种基线对其方式,它可以把不相关的几个组件设置在同一条水平线上进行对其。

3.3 多子元素组件(Multi-child)

Scaffold 是基于Material库的一个与路由相关的、良好的“结构体”,它可以被认为是Flutter为我们提供的一个标准化的布局容器。
//Appbar 即App的顶部导航栏,用于控制App的路由、显示标题栏,以及显示右侧的一些操作栏。其绘制区域一般位于屏幕顶端。
//Row 水平方向
//Column 垂直方向
//ListView 和Android中的ListView、RecycleView有些相似,作用都是可滚动项的线性列表,里面放着相关组件的集合。
    // 构建方式:
        // (1)ListView 最传统的创建方式
        // (2)ListView.builder 用于创建重复子项布局
        // (3)ListView.custom 实现ListView自定义功能
        // (4)ListView.separated 用来分割的
//GridView  网格形式的列表(运用得当能做出非常漂亮的界面)
//CustomScrollView 嵌套滚动列表使用
//Flex 弹性布局(柔性)
//Wrap 具有自动换行的包裹

//Stack
//IndexedStack
//Flow
//Table
//CustomMultiCHildLayout

状态管理

//Flutter 一切皆组件,而组件Widget主要被划分成StatelessWidget和StatefulWidget
//Widget树
//Context 标识组件上下文,Widget的一部分,每一个Context只对应一个Widget。
//3.4.4 StatelessWidget 无状态的Widget。
//3.4.4 StatefulWidget 有状态的Widget。
3.4.5 StatefulWidget由两部分组成,第一部分为主体部分,第二部分是以_开头,标识私有的,可通过widget.{}格式访问第一部分的内容
3.4.6 State 是对StatefulWidget的行为和布局的描述,和StatefulWidget存在一一对应的关系。

State生命周期:
  • 首次启动:initState > didChangeDependencies > build。
  • 热重载:reassemble > didUpdateWidget > build(reassemble只在debug模式下生效)。
  • 界面跳转时:deactivate > didChangeDependencies > build。
    3.4.8Widget 的唯一身份标识:key
    - 在Flutter里,每一个Widget都具有唯一标识,并且这个唯一标识是在FlutterFramework层创建和渲染时生成的,它就是key。如果key作为参数传入到Widget里面,则会根据指定的名字生成key。
    -有些场景下你需要保存key,并且通过key访问Widget。这时,可以通过GlobalKey、LocalKey、UniqueKey或ObjectKey进行保存。

3.4.9 InheritedWidget :是一个比较特殊的组件,它被定义为父节点。被InheritedWidget暴露出来的数据,可以高效的从Widget树中从上往下传递和共享,并支持跨级数据传递。

3.5 包管理

一个完整的应用或多或少会使用一些第三方包(包是为应用服务的)。

第四章 事件处理

4.1原始指针事件
(手指按下-手指移动-手指抬起)
需要指出的是,在手指按下之后,Flutter Framework层是通过命中测试(Hit Test)获取到当前手指触摸的操作区域的,然后找到对应的Widget。
4.1.1基本用法
原始指针具体的用法是把Listener包裹在需要监听的组件外来实现的。
4.1.2忽略事件
IgnorePointer:此节点和其子节点都将忽略点击事件,用ignoring参数区分是否忽略
AbsorbPointer: 这个控件本身能够响应点击事件,阻止事件传播到它的子节点上去。
4.2GestureDetector:更强大的手势识别组件,支持缩放、双击、垂直、水平等补充手势。
4.2.1基本用法
GestureDetector通常作为父Widget包裹在一个子Widget外面,它是组件的一种,可以通过onTap回调实现点击。
4.2.2常用事件
4.2.3拖拽和缩放效果
4.2.4事件竞争与手势冲突
4.2.5手势识别器(GestureRecognizer)是GestureDetector的一部分
4.3事件原理与分发机制
4.4事件通知 和 Android中不一样,在Flutter里,Notification会沿着当前的context节点从下往上传递,所有父节点都可以通过NotificationListener来监听通知,这种由子向父的传递方式为“通知冒泡”。

第五章 动画

5.1动画原理及概述
5.1.1 Animation 动画中使用最多的类型。
5.1.2 Animatable 控制动画类型的类。
5.1.3 AnimationController 动画控制器,它负责在给定的时间段内,已线性的方式生成默认区间为(0.0,1.0)的数字。
5.1.4 Tween 补间动画

第六章 使用网络技术和异步编程

6.1 网络协议简单来说就是为计算机网络进行数据交互而建立的规则,标准或约定的集合。
6.1.1 Http协议简介 Http协议是互联网的基础协议,是基于TCP/IP协议的应用层协议。
6.1.2 Http2.0为我们带来了多路复用
6.1.3 Https简单来说就是安全的Http,即Http+SSL,Https集合了加密传输、身份认证,因此更加安全。
6.2 网络编程
6.2.1 HttpClient
6.2.2 Http库
6.3 JSON解析
6.3.1 JSON转为Dart对象
6.3.2 一个完整的例子
6.3.3 根据Json用工具生成实体类
6.4 dio库 Flutter中文网提供的一个强大的http请求库
6.4.1 基本用法
6.4.2 dio单例 一个dio实例可以发起多个网络请求
6.4.3 dio拦截器
6.4.4 dio拦截器链: 其实,拦截器不止一个。
6.4.5 dio适配器:Flutter还能抽像出适配器来方便切换和定制底层网络库。
6.4.6 dio库总结
6.5 异步编程 说到网络,就一定会提到异步编程。
6.5.1 isolate
6.5.2 eventloop
6.5.3 线程模型与isolate:1.PlatFrom Task Runner
2.UI Task Runner
3.GPU Task Runner
4.IO Task Runner 的运行线程也对应着平台的子线程。
6.5.4 创建单独的isolate
6.5.5 Stream事件流

第七章 路由

7.1 路由的简介:路由就是连接各个界面的“桥梁”,这个“桥梁”就是Navigator,就是导航的意思。
7.1.1 基本用法 :1.一个界面跳转到另一个界面用Navigator.push,返回上一个界面用Navigator.pop。
2.实际项目中,情况没这么简单,这就涉及到路由栈管理了。
3.路由分为静态路由和动态路由。
7.1.2 静态路由:静态路由在明确知道往哪里跳的情况下使用。
7.1.3 动态路由:两个界面之前跳转需要携带参数的情况会用到。
7.1.4 参数回传
7.2 路由栈
7.2.1 路由栈详解:NaviGator里的Push方法把元素添加到堆栈的顶部,Pop方法则删除了顶部的元素。
7.2.2 pushReplacementNamed方法:替换元素。
7.2.3 pushAndPushNamed方法: 与pushReplacementNamed方法效果相似。
7.2.4 pushNamedAndRemoveUntil方法:删除自身,也可指定跳转对象。
7.2.5 popUntil发法:直接pop到指定页面。
7.3 自定义路由

第八章 持久化

8.1 shared_preferences本地储存(官方推荐,Flutter社区开发的一个本地储存插件):(1)它是一个异步的、简单的、持久化的、key-value形式的储存系统。(2)在Android端它是基于SharedPreferences开发的。(3)在ios端,它是基于NSUserDefaults开发的。

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

推荐阅读更多精彩内容

  • 随着纯客户端到Hybrid技术,到RN&Weex,再到如今的Flutter技术,客户端实现技术不断前进。 在之前的...
    瑜小贤阅读 589评论 0 0
  • 1 Widget只是UI元素的一个配置数据,并且一个Widget可以对应多个ElementWidget实际上就是E...
    你飞跃俊杰阅读 736评论 0 2
  • 首先,在Flutter中几乎所有的对象都是一个Widget。跟原生开发中的“控件”不同,Flutter中的Widg...
    沉江小鱼阅读 1,701评论 0 2
  • 国庆后面两天在家学习整理了一波flutter,基本把能撸过能看到的代码都过了一遍,此文篇幅较长,建议保存(star...
    Nealyang阅读 4,345评论 1 17
  • 马甲一件:2元 棉服一件:2.5元 童装一件:2.3元 比如,评论包装14件一箱,一天能包250箱 早7.30 ...
    a5fbdd7da318阅读 192评论 0 0