Widget
Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。
给我的感觉，万物皆为Widget。Android xml中的layout是Widget，ViewGroup是Widget，View也是Widget...
一个最简单的Android app是在是在activity.main.xml中定义一个"hello world"；一个最简单的Flutter应用也是一样，只需一个widget即可！代码如下：
import 'package:flutter/material.dart';
void main() {
runApp(
new Center(
child: new Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
runApp()方法类似于程序的入口，给定的是一个widget的根。一般这个widget都会指定一个无状态的StatelessWidget或者是有状态的StatefulWidget。
无状态的StatelessWidget只能用来展示信息，不能有动作（用户交互）;有状态的StatefulWidget可以通过改变状态使得 UI 发生变化，它可以包含用户交互。
按照Flutter中文网的学习引导，我们刚开始接触的Widget就是StatelessWidget和StatefulWidget，下面来做一个初步的讲解。
StatelessWidget
A widget that does not require mutable state.
译为：不需要可变状态的控件。
- Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的。
- StatelessWidget一共只有三个方法:
// 构造方法
const StatelessWidget({ Key key }) : super(key: key);
// createElement方法复写Widget方法，一般不需要使用
@override
StatelessElement createElement() => StatelessElement(this);
// 用户界面的构建，描述此控件显示到用户界面部分。
@protected
Widget build(BuildContext context);
StatelessWidget 的使用非常简单，我们只需要继承 StatelessWidget，然后实现 build 方法就可以了。 demo示例代码如下：
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}
StatefulWidget
A widget that has mutable state.
译为：具有可变状态的控件。
- Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:
- 一个 StatefulWidget类。
- 一个 State类。 StatefulWidget类本身是不变的，但是 State类在widget生命周期中始终存在。
- StatefulWidget一共只有三个方法:
// 构造方法
const StatefulWidget({ Key key }) : super(key: key);
// createElement方法复写Widget方法，一般不需要使用
@override
StatefulElement createElement() => StatefulElement(this);
// 在视图树中的给定位置为这个控件创建可变状态。
@protected
State createState();
StatefulWidget 用起来麻烦一些，它除了需要继承自StatefulWidget，还需要一个 State。demo示例代码如下：
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new RandomWords(),
),
),
);
}
}
class RandomWords extends StatefulWidget {
@override
createState() => new RandomWordsState();
}
class RandomWordsState extends State<RandomWords> {
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random();
return new Text(wordPair.asPascalCase);
}
}
总结
从代码层面来看，貌似 StatelessWidget 与 StatefulWidget 差别不是很大，都是在 MyApp 的 build() 方法里返回一个Widget对象，只不过 StatefulWidget 需要额外设置实现一个 createState() 方法而已。实际上，两者的区别非常大。 StatelessWidget 整个生命周期里都不会改变，所以 build 方法只会执行一次。而 StatefulWidget 只要状态改变，就会调用 build() 方法重新创建 UI。
