一. 创建Flutter项目
1.1. 通过命令行创建
通过命令行创建非常简单，在终端输入以下命令即可：
项目有两种方式：通过命令行创建?和?通过开发工具创建
flutter create learn_flutter
1.2. 通过开发工具创建
我这里也可以直接通过Android Studio来进行创建：
1.3. 默认程序分析
二. 开始Flutter代码?
2.1. Hello World
import 'package:flutter/material.dart';
main(List<String> args) {
runApp(Text("Hello World", textDirection: TextDirection.ltr));
}
如果要居中，文字颜色等
textDirection ?传入文字方向
style ?设置样式,字体颜色等
Center 也是一个Widget，实现居中操作
三、Widget介绍
Widget是所谓的组件
3.1Scaffold
?是什么呢？
-
翻译过来是脚手架，脚手架的作用就是搭建页面的基本结构； -
所以我们给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget； -
Scaffold也有一些属性，比如appBar和body； -
appBar是用于设计导航栏的，我们传入了一个title属性； -
body是页面的内容部分，我们传入了之前已经创建好的Center中包裹的一个Text的Widget；
主要参数有 appBar（导航栏或者Tabbar），body（界面内容）
?
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text(
"第一个项目",
style: TextStyle(fontSize: 20, color: Colors.white),
)),
body: Center(
child: Text("Hello world",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 30, color: Colors.red))))));
3.2StatelessWidget
StatelessWidget通常是一些没有状态（State，也可以理解成data）需要维护的Widget：
-
它们的数据通常是直接写死（放在Widget中的数据，必须被定义为final，为什么呢？我在下一个章节讲解StatefulWidget会讲到）； -
从parent widget中传入的而且一旦传入就不可以修改； -
从InheritedWidget获取来使用的数据（这个放到后面会讲解）；
我们来看一下创建一个StatelessWidget的格式：
build方法什么情况下被执行呢？：
-
1、让自己创建的Widget继承自StatelessWidget； -
2、StatelessWidget包含一个必须重写的方法：build方法；
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return <返回我们的Widget要渲染的Widget，比如一个Text Widget>;
}
}
? build方法的解析： -
Flutter在拿到我们自己创建的StatelessWidget时，就会执行它的build方法； -
我们需要在build方法中告诉Flutter，我们的Widget希望渲染什么元素，比如一个Text Widget； -
1、当我们的StatelessWidget第一次被插入到Widget树中时（也就是第一次被创建时）； -
2、当我们的父Widget（parent widget）发生改变时，子Widget会被重新构建； -
3、如果我们的Widget依赖InheritedWidget的一些数据，InheritedWidget数据发生改变时； -
StatelessWidget没办法主动去执行build方法，当我们使用的数据发生改变时，build方法会被重新执行；
3.3StatefulWidget
有状态改变的 Widget, 通常做交互变化状态，或者页面依据 data 刷新展示
为什么 StatefullWidget 是可变的？
- 其实无论 StatelessWidget 还是 StatefulWidget，其父类都是 Widget 因此它定义成员变量也是 final 修饰不可变~
- 但是继承 StatefulWidget 的子类，必需要实现
State createState(); 抽像方法。
- 所以可以变的是 State 这也是与 StatelessWidget 不一样的地方
?
|