一.背景介绍
近期在学习Flutter相关的知识，把自己的一些理解做了一个PPT在公司内部分享，现同步到这里，希望能在这里与对Flutter有兴趣的人一起探讨；本文章中为方便给同学演示，多数都有图片进行讲解说明，如发现有任何错误的示范，欢迎随时反馈
二.共享热点
2.1. 背景、概述及应用场景
2.2. 环境搭建步骤、配置说明
2.3. Dart相关特性介绍
- 2.3.1 变量、常量声明及定义
- 2.3.2 数据类型及常用操作
- 2.3.3 dynamic、方法及闭包特性
2.4. Flutter组件介绍
2.5. Demo
2.6. Q & A
三.概述
3.1认识flutter
flutter简介
Tiobe2019年5月语言排行
3.2跟我读
baidu:[ˈflʌtə(r)] google:flətər
2.1 背景、概述及应用场景
- 2.1.1 是Google发布的移动UI框架，是一门完全免费、开源编程语言
- 2.1.2 初期目标是成为下一代的web开发语言
- 2.1.3 目前已可用于全(跨)平台开发；Linux Android IOS Fuchsia
- 2.1.4 原生用户界面，用户体验和性能更好
- 2.1.5 是一门面向对象的编程语言
- 2.1.6 可以用作脚本或服务端开发
- 2.1.7 120fps 超高性能
为了让大家对120fps有更直观的认知,我找到几组数据和一张图片供大家参考
电影电视：24fps
液晶显示器：60HZ
游戏GPU：80fps
大家可以看到120fps比日常大家玩游戏要求的值还大，所以系统更流畅
android ios流畅对比参考图1
android ios流畅对比参考图2
2.1.8 第一个吃螃蟹的人
大家可以通过该链接了解到目前哪些公司在使用，比如Alibaba(咸鱼)、JD Finance(京东金融)、Tencent(now直播)等在使用flutter
2.2.Windows环境搭建步骤、配置说明
2.2.1 选择一个IDE
1.IntelliJ IDEA 2.Android Studio 3.Visual Studio Code
2.2.2 安装插件
-
Flutter
AS Flutter 插件安装示意图
-
Dart
AS Dart插件安装示意图
2.2.3 SDK下载
如果你运气够好还没被封，可以通过该链接下载开发相关的SDK,内置已经包含了flutter&dart，配置相关路径即可
SDK
2.2.4 PATH配置
Flutter Path配置
Path路径配置
2.2.5 校验
Cmd:flutter doctor
2.3. Dart相关特性介绍
- 在 Dart 里，带下划线开头的变量是私有变量
-
var 声明变量，可赋不同类型的值，未初始化时为null
示例代码
执行结果
数据类型
字符串-String 布尔型-Boolean 列表-List 键值对-Map 数值型-Number
数值类型关系
int类型
double类型
数值型运算
+ 、-、*、/、~/(取整)、%
示例代码
image.png
糟了,是心动的感觉-String
+、*、==、[]、${expression}
示例代码
执行结果
源码
我知道你知道
这部分跟多数语言一样，举一反三即可
- 算术、逻辑、赋值、关系、条件运算符
-
控制语句
顺序
选择 if....else,switch...case
循环for,while,do...while)
大家日常工作的样子
Dart中的魔法棒:Dynamic
- var声明的变量，赋任何值都合情、合理、合法
-
建议慎用——以保证每一天同学在你面前和背后都是那个纯真的、谦虚的、温和的、友善的样子……
示例代码
执行结果
Dart 方法特性
- 方法也是对象，类型为:Function
- 所有方法都有返回值，未指定是默认为null
-
多种参数定义方式及默认值设置
示例代码
执行结果
示例代码
执行结果
Dart 孤单也谈对象
- 条件成员访问符 :?.（eg：Groovy、gsp、freemarker）
- 类型转换:as
- 是否指定类型:is,is!
-
级联操作符: ..
条件成员访问示例代码-报错
执行结果
条件成员访问示例代码-防空
示例代码
执行结果
Dart 骚操作-多继承
1.使用Mixins实现多继承
Google:Dart:Mixins are a way of reusing a class’s code in multiple class hierarchies(Mixins是一种在多个类层次结构中重用类代码的方法)
Wiki:在面向对象的语言中,mixins类是一个可以把自己的方法提供给其他类使用，要重用的是代码，不是方法或者是接口，而是类！
2.作为Mixins的类不能有显示声明的构造方法
3.作为Mixins的类只能继续自Object
示例代码
执行结果
需要特别说明：当35行代码with B,AB交换位置后，最张输入的结果会是B->o()
Dart 烧脑系列
- 对象(作为)call方法使用
- 匿名方法
(arg1,arg2,....){
方法体...
return 返回值;
}
-
闭包
对象作为call-示例代码
执行结果
匿名方法-示例代码
执行结果
闭包-示例代码
执行结果
四 认识Flutter组件
组件是什么？可以吃么？
个人觉得组件是将大的问题化小、提高代码复用、快速解决问题的一种思路；比如Java中的listener、servlet、filter，如果需要你用就行不需要就不用管；再比如一个大的功能开发，我们讨论后如果分解任务，其中参与进来的每一个同学就是"组件"；前端的话推荐大家了解下ElementUI、LayUI，作者也是将常用的一些功能组件话，提高代码的复用
Flutter常用组件及参考地址
跟上面提到的前端UI一样,Flutter也用一套UI，大家可以通过点击这里进行了解
五 Demo
下面2张图是我自己在本地摸爬滚打出来的2个小demo的示意图，大家如果需要，可以联系我，方式我觉得你一定要办法
效果图1
效果图2
六 Q & A
如果大家有任何问题的话可以在下面留言 也可以通过以下方式解决
image.png
网友评论