???? 0
这是我的一个新系列——Flutter学习。学习这个框架，次要是因为我始终想要做一个Python后端和挪动前端互相配合的一个利用，而Python没有挪动前端框架，并且我也并不太会手机或者是个人电脑的利用开发。因而，为了实现我的这个“指标”，我尝试了这个新生的框架。
???? 目录
- ✅ 我为何抉择Flutter
- ❓ 所以，啥是Flutter，Flutter的开发环境如何部署
- ???? 了解
Widget、Widget树 - ???? 了解
StatelessWidget和StatefulWidget - ???? 了解
MaterialApp和Scaffold - ⛵ 实战：Hello, world
- ⚡ Hot Reload与Hot Restart
✅ 1
我为何抉择了Flutter
首先，我是一个人在“单打独斗”。也就是说，我没什么团队，但在我的构想下，我的App是能够跨平台适配的。因为其余起因，我并没有足够的工夫齐全投身于利用的开发中。所以，我须要一个跨平台框架。
另外，我喜爱申明式编写UI的形式。
并且，Flutter高保真、有性能。
❓ 2
所以，啥是Flutter？
Flutter介绍：
腾讯技术工程的文章 – 知乎
装置和环境配置：
装置和环境配置 – Flutter 中文文档 – Flutter 中文资源
Flutter应用Dart作为编程语言！如果想要入门Flutter，写好一手Dart十分重要。Dart的格调相似于JavaScript，又像其余的一些语言。Dart官方语言概览：
Dart编程语言概览 – Dart中文文档 – Dart中国
???? 3
了解Widget、Widget树
在Flutter中，Widget形成应用程序！从一个按钮，一个图标，再到一段文字，甚至到利用自身，都是Widget。你能够将Widget看作是Web开发中的“组件”。
Flutter 的 Widget 渲染采纳的是相似 React 的框架：当Widget的状态呈现变动，须要刷新界面时，框架会先计算从上一个状态转换到下一个状态所需的最小更改，再去刷新界面。
咱们能够看到，在Widgets层的上面，有：
- Rendering（渲染层）
- AnimationPaintingGestures （动画、绘图、手势）
- Foundation （根底库层）
这些实现了根本层面的货色，是Flutter大厦的根底。不过，咱们用到的会比拟少，因为如此开发会导致程序的简短和简单——毕竟，如果没有必要，咱们不能在造轮子的工程外面自我打动。也就说，咱们一般来说用的最多的，就是封装好的Widget。
当然，如果你留神到了，那么，你会发现下面还有一层：
Material和Cupertino
Flutter曾经帮咱们封装好了Material（Android）格调和Cupertino（iOS）格调的Widget！咱们能够间接应用曾经封装好的Material和Cupertino Widget。这样一来，可能大大晋升开发效率，并且能够写出最靠近于Native UI的用户界面，疾速实现好看易用的应用程序。
了解组件树
在Flutter中，Widget的组合形式是Widget树。
上面这个动图很好地阐明了Flutter的Widget树中“蕴含与被蕴含”的关系：
Flutter的Widget树 – （动图是我本人做的，转载请注明出处）
在Widget树中，如果一个Widget A蕴含在Widget B内，则称B是A的父Widget，A是B的子Widget。例如在方才的组件树中，MaterialApp是Scaffold的父Widget，Scaffold是MaterialApp的子Widget。
咱们还要意识一个概念——根Widget(Root Widget)。根Widget就相当于Widget树的“宗师”，在方才的组件树中，根Widget就是MaterialApp。Flutter会默认将根Widget充斥屏幕。然而你必须留神到的一点是，如同在HTML中，最里面的HTML标签必须得是<html>，在Flutter中，根Widget必须得是以下三个之中的其中一个：
MaterialApp
这是一个实现了Material Design组件的根Widget，它的子Widget都是Material格调。
咱们最罕用到这个根Widget，因为毕竟Material Design是Google亲儿子，它的反对最为健全，也最易于进行开发。
CupertinoApp
这是一个实现了Cupertino（iOS）格调的根Widget，它的子Widget都是Cupertino格调。
WidgetsApp
这是一个你能够自定义格调的根Widget。其中海阔天空任你施展。
???? 4
了解StatelessWidget和StatefulWidget
StatelessWidget就是没有状态的Widget。如果它在程序运行时状态不须要扭转，就能够应用这种Widget。
StatefulWidget就是有状态的Widget。它在程序运行时，状态被容许产生扭转。
你编写的Widget均继承于这两个类中的其中一个。
一会儿咱们马上就会用到StatelessWidget。我当前会介绍StatefulWidget，目前咱们临时还用不着。
???? 5
了解MaterialApp和Scaffold
咱们方才提到过，MaterialApp是根Widget，这个根Widget表明了这个应用程序的交互界面采纳Material Design的Widget。如果想要应用Material格调的Widget，根Widget就必须采纳MaterialApp。
Scaffold规定了这个界面的格局，包含了AppBar，Body等一系列的布局。这是Material Design界面的根本构造，应用这些布局也必须用Scaffold。
所以，一个常见的Flutter App的格局就是——它的根Widget是MaterialApp，而这个成为了“土壤”的根Widget的子Widget就是Scaffold，咱们在Scaffold内实现界面。
⛵ 6
实战：Hello, world——以及对前文所提及概念的再了解
import 'package:flutter/material.dart';
void main() => runApp(HelloWorld());
class HelloWorld extends StatelessWidget {
@override
Widget build(BuildContext buildContext) {
return MaterialApp(
title: 'Flutter Demo_0',
home: Scaffold(
appBar: AppBar(
title: Text('It \'s JUST a greeter')
),
body: Center(
child: Text('Hello, world!')
)
)
);
}
}家喻户晓，学习Flutter的最好办法，就是把Source Code怼到脸上本人了解。
咱们看第一句：
import 'package:flutter/material.dart';这个语句导入了flutter库中的material.dart，这个文件中蕴含了MaterialApp及一系列Material组件的实现。
接下来：
void main() => runApp(HelloWorld()); main()是Dart程序的入口。runApp()能够让你的Flutter App运行起来，这个函数只须要传递一个参数，那就是你的根Widget的实例。
class HelloWorld extends StatelessWidget {所有由你写进去的Widget，都必须继承StatelessWidget与StatefulWidget中的任意一个。这里继承了StatelessWidget，意味着在程序运行的过程中，这个Widget的状态不会发生变化。
而后，咱们override了一个build()函数，build()函数返回Widget的本体。这个函数传入一个参数buildContext（它是BuildContext类型），这是利用上下文。
MaterialApp有以下这几个属性
title
指的是利用过程的名称（不是利用名）
home
这个参数必须传入一个Scaffold，在Scaffold内实现界面
-
其它
color
利用图标背景色彩
theme
传入一个themeData对象，是利用的主题数据
- ……
Scaffold有以下几个属性
appBar
传入一个AppBar
backgroundColor
应用程序的背景色彩
body
应用程序次要要显示的内容
- ……
AppBar的title属性我这里传入的是一个Text，示意界面顶栏要显示的题目。
Center示意其中的Widget在x, y轴上均居中显示。如果只有一个子Widget则将这个子Widget传入它的child属性，如有多个就将一个<Widget>[]传入children属性。
Text是文本。
最终，咱们实现了一个这样的界面：
⚡ 7
Hot Reload和Hot Restart
调试时，⚡图标代表Hot Reload。这能够在不从新编译利用包的状况下把代码上的变动立马在调试用的虚拟机（或实体机）中出现进去。
然而，在呈现以下状况时，Hot Reload没有用：
- 枚举类型更改为惯例的类或者惯例的类变为枚举类型
- main() 办法里的更改
- 全局变量（global variables）和动态字段（static fields）的更改
- 代码更改会影响 APP 状态的不能应用 Hot Reload
- 代码呈现编译谬误的不能应用 Hot Reload
在这种状况下，你能够应用 Hot Restart来实现疾速重启。
这两种Flutter个性均是放慢开发速度的利器。
???? -1
结语
目前，咱们就算是一起走入了Flutter的殿堂。在这之后，咱们会一起学习Flutter的各个组件，实现一个Flutter App，并最终实现我的“指标”。
发表回复