Dart基本语法学的差不多了以后就可以开始学习Flutter了，就像OC学完了就可以开发iOS一样，触类旁通，Flutter开发需要掌握的基本技能无外乎也是那几个东西，界面布局，网络请求，数据加载，第三方库的使用，学会这些基本可以完成一些简单的Flutter模块的开发了，写文章是为了记录，学习语言最主要的还是得多敲多练，在实战中磨炼才是王道。
StatefulWidget
这次的demo也是一个计数器，理解一下StatefulWidget相关知识点，看效果图：
计数器
功能很简单，点加号和减号当前计数会改变，下面有段文字是从widget传进来的内容，下面是代码：
import 'package:flutter/material.dart';
main(List<String> args) {
return runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('计数器')
),
body: MyContent('从Widget传进来的内容'),
),
);
}
}
class MyContent extends StatefulWidget {
String des;
MyContent(this.des);
@override
_MyContentState createState() => _MyContentState();
}
class _MyContentState extends State<MyContent> {
var _count = 0;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
color: Colors.amber,
child: Text('+'),
onPressed: () {
setState(() {
_count++;
});
}
),
RaisedButton(
child: Text('-'),
color: Colors.yellowAccent,
onPressed: () {
setState(() {
_count--;
});
}
)
],
),
SizedBox(height: 8),
Text('当前计数$_count',
style: TextStyle(fontSize: 18)
),
Text(this.widget.des)
],
),
);
}
}
整体结构：
最下面是一个Center，他可以让子widget居中，Center里面放了一个Column，Column第一行是一个Row，Row里面放了两个Text，一个”+“，一个”-“，第二行和第三行都是两个Text，整个结构简单的不能再简单了。
包含的知识点：
-
Column和Row都有一个主轴和交叉轴的概念，一开始他们两个主轴的对齐方式Column是顶部对齐，Row是左对齐，这个我没看文档，我是看程序效果，说错了别喷我，效果是这样的：
初始对齐方式
加号和减号是放在Row当中，可以看到他两个是靠左对齐，整体这个Column里面的三行都是挨着顶部，可以看出来是顶部对齐。
- Column和Row可以设置主轴的对齐方式，这个主轴和交叉轴是Flex布局的核心，Row主轴其实就是水平方向，Column主轴就是垂直方向，交叉轴就是和主轴交叉的方向，通过
mainAxisAlignment这个属性可以设置主轴的对齐方式，同样的，通过CrossAxisAlignment这个属性可以设置交叉轴的对齐方式。 - RaisedButton是一个按钮Widget，这个只是Button的其中一个，具体有啥高级特性还没用到，这个地方主要用到的是他的一个点击事件，接收一个匿名函数作为响应的事件回调函数，类型是
void Function() onPressed。 - StatefulWidget和StatelessWidget不同的地方在于他多了一个
State<StatefulWidget> createState()方法，这个方法会返回一个State类型的Widget，State里面有个build方法，关于这个方法有几个介绍：
Describes the part of the user interface represented by this widget.
The framework calls this method in a number of different situations. For example:
After calling [initState].
After calling [didUpdateWidget].
After receiving a call to [setState].
After a dependency of this [State] object changes (e.g., an [InheritedWidget] referenced by the previous [build] changes).
After calling [deactivate] and then reinserting the [State] object into the tree at another location.
build方法返回的Widget也是用户界面展示的一部分，这个方法有很多场景可以触发，在这个例子中是通过setState这个方法来触发的，在‘+’和‘-’按钮的回调里执行了setState方法，让build方法重新执行，刷新界面，展示数据的改变。在这个例子中是count这个变量改变了，在变量和方法前面加''代表是私有的，_count值的改变都会在下一次的build方法中被更新展现。
- 在MyContent中还有一个
String des;变量，这个地方编译器其实是有一个警告的，它说这个des变量应该定义成final的，因为StatefulWidget和StatelessWidget都继承自Widget，Widget这个类的定义外面有一个@immutable的注解，也就是说这个类中定义的变量都应该是不可变的，如下图：
Widget定义
这个des变量是定义在Widget中的，但是我在State类中可以直接通过this.widget.des直接获取到这个变量，也就是说State和Widget之间系统为我们提供了一层引用关系，可以让我们方便的使用Widget中的变量，这个绑定关系后面在讲到Flutter中的三课树的时候再具体分析。
- 最后一个点就是比较经典的可能面试也会喜欢问到的问题，为啥StatefulWidget的build方法要放在State中还不是放在Widget里，这边第一个可以看到因为你Widget里定义的变量都是final的，都不能改变何来数据的刷新，这是我自己的理解，还有几个是coderwhy的理解，放在这里，不记得原话是啥意思了，后面再慢慢悟吧。
为什么Flutter在设计的时候StatefulWidget的build方法放在State中
1.build出来的Widget是需要依赖State中的变量(状态/数据)
2.在Flutter的运行过程中Widget是不断的销毁和创建的，当我们自己的状态发生改变时，并不希望重新状态一个新的State。
参考资料：
Flutter教程
网友评论