目录
1. 返回拦截（WillPopScope）
2. 跨组件状态共享（EventBus、InheritedWidget、最小功能的Provider）
3. 颜色和主题（Color、Theme）
4. 异步UI更新（FutureBuilder、StreamBuilder）
Flutter官方并没有对Widget进行官方分类，对其分类主要是为了对Widget进行功能区分。
功能性组件：具有一定功能的组件（如：WillPopScope拦截返回、FocusScope焦点控制、PageStorage数据存储、NotificationListener事件监听）。
1. 返回拦截（WillPopScope）
为了避免用户误触Android物理返回按钮而导致APP退出，在很多APP中都拦截了用户点击返回键的按钮，然后进行一些防误触判断（只有当用户在某一时间段内点击两次时，才认为用户是要退出）。
WillPopScope({
// 当用户点击返回按钮（包括导航返回按钮及Android物理返回按钮）时调用。
// 该回调需要返回一个Future对象，如果返回的Future最终值为false时，则当前路由不出栈(不会返回)；为true时，当前路由出栈退出。
@required WillPopCallback onWillPop,
@required Widget child
})
示例（1秒内点击两次才退出应用）
为了防止用户误触返回键退出，拦截返回事件，当用户在1秒内点击两次返回按钮时，则退出；如果间隔超过1秒则不退出，并重新记时。
import 'package:flutter/material.dart';
class WillPopScopeTestRoute extends StatefulWidget {
@override
WillPopScopeTestRouteState createState() {
return new WillPopScopeTestRouteState();
}
}
class WillPopScopeTestRouteState extends State<WillPopScopeTestRoute> {
DateTime _lastPressedAt; // 上次点击时间
@override
Widget build(BuildContext context) {
return new WillPopScope(
onWillPop: () async {
if (_lastPressedAt == null ||
DateTime.now().difference(_lastPressedAt) > Duration(seconds: 1)) {
// 两次点击间隔超过1秒则重新计时
_lastPressedAt = DateTime.now();
return false;
}
return true;
},
child: Container(
alignment: Alignment.center,
child: Text("1秒内连续按两次返回键退出"),
)
);
}
}
2. 跨组件状态共享
- EventBus全局事件总线（观察者模式）
可实现跨组件状态同步：状态持有方（发布者）负责更新状态，状态使用方（观察者）监听状态改变事件来执行一些操作。
使用步骤：
1. 定义事件
enum Event{
login,
... // 省略其它事件
}
2. 订阅事件
// 依赖登录状态的页面
@override
void initState() {
// 订阅登录状态改变事件
bus.on(Event.login,onLogin);
super.initState();
}
@override
void dispose() {
// 取消订阅
bus.off(Event.login,onLogin);
super.dispose();
}
void onLogin(e){
// 登录状态变化处理逻辑
}
3. 触发事件
// 登录页
// 登录状态改变后发布状态改变事件
bus.emit(Event.login);
缺点：
1. 必须显式定义各种事件，不好管理。
2. 订阅者必须需显式注册状态改变回调，也必须在组件销毁时手动去解绑回调以避免内存泄露。
- InheritedWidget
提供了一种数据在widget树中从上到下传递、共享的方式，和通知Notification的传递方向正好相反。例如：在应用的根widget中通过InheritedWidget共享一个数据，就可以在任意子widget中来获取该共享的数据。
Flutter SDK中正是通过InheritedWidget来共享Theme（应用主题）和Locale (当前语言环境)信息的。
InheritedWidget定义如下：
abstract class InheritedWidget extends ProxyWidget {
const InheritedWidget({Key? key, required Widget child})
: super(key: key, child: child);
@override
InheritedElement createElement() => InheritedElement(this);
// 该方法由子类实现，依赖数据改变后是否通知子组件
@protected
bool updateShouldNotify(covariant InheritedWidget oldWidget);
}
可以看到InheritedWidget和StatefulWidget的区别
1. InheritedWidget继承自ProxyWidget，ProxyWidget继承自Widget。StatefulWidget直接继承自Widget。
2. InheritedWidget对应的元素为InheritedElement（继承自ProxyElement继承自ComponentElement）。StatefulWidget对应的元素为StatefulElement（继承自ComponentElement）。
3. StatefulElement和StatelessElement的build方法都是返回state.build(this)，而ProxyElement的build方法是返回widget.child。到这里可以知道InheritedWidget在状态更新的时候为什么没有重新构建其子组件树，因为在ProxyElement中直接就返回了已经构建的子组件树，而不是重建。
// ProxyElement的build方法
@override
Widget build() => widget.child;
// StatelessElement和StatefulElement的build方法
@override
Widget build() => widget.build(this);
4. setState执行流程
调用setState方法，内部会调用element的markNeedsBuild方法。markNeedsBuild方法会将元素的_dirty置为true，然后调用owner的scheduleBuildFor(this)方法，该方法会调用rebuild方法。rebuild方法会调用performRebuild方法。performRebuild方法会先调用build方法（会重建InheritedWidget），执行完后会将_dirty置为false，然后调用updateChild方法。
重建InheritedWidget时，build方法（直接返回widget.child），updateChild方法（调用child.update(newWidget)方法，详情见下方注释）。
/*
ProxyElement类重写了update方法
// newWidget：为调用setState时构建的新widget
@override
void update(ProxyWidget newWidget) {
final ProxyWidget oldWidget = widget;
assert(widget != null);
assert(widget != newWidget);
super.update(newWidget);
assert(widget == newWidget);
updated(oldWidget); // 通知依赖InheirtedWidget的子组件更新
_dirty = true;
rebuild();
}
@protected
void updated(covariant ProxyWidget oldWidget) {
notifyClients(oldWidget);
}
// InheritedElement类
@override
void updated(InheritedWidget oldWidget) {
if (widget.updateShouldNotify(oldWidget)) super.updated(oldWidget);
}
@override
void notifyClients(InheritedWidget oldWidget) {
assert(_debugCheckOwnerBuildTargetExists('notifyClients'));
for (final Element dependent in _dependents.keys) {
assert(() {
// check that it really is our descendant
Element? ancestor = dependent._parent;
while (ancestor != this && ancestor != null)
ancestor = ancestor._parent;
return ancestor == this;
}());
// check that it really depends on us
assert(dependent._dependencies!.contains(this));
notifyDependent(oldWidget, dependent);
}
}
}
@protected
void notifyDependent(covariant InheritedWidget oldWidget, Element dependent) {
dependent.didChangeDependencies(); // 调用所有有依赖的子组件的didChangeDependencies方法
}
*/
过程大致如下：
1. mount阶段将组件树的运行时类型与对应的InheritedElement绑定，存到_inheritedWidgets（HashMap类型）中；
2. 子组件添加状态依赖时，会将子组件对应的Element元素与对应的InheritedElement（_inheritedWidgets中获取）进行绑定，并存入_dependents（HashMap类型）中；
3. 依赖的状态改变后，InheritedElement直接使用旧的组件配置（通过调用_dependents中的Element的didChangeDependencies方法，该方法会调用markNeedsBuild方法）通知有依赖的子组件依赖发生改变。对于没有依赖的子组件，不会被加入到_dependent中，因此不会被通知刷新。
依赖数据改变后，只会重建有依赖的子组件。
如果只想引用数据而不希望数据改变时重建UI，只需把
context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();
换成
context.getElementForInheritedWidgetOfExactType<ShareDataWidget>().widget;
先看一下getElementForInheritedWidgetOfExactType方法的定义：
@override
InheritedElement getElementForInheritedWidgetOfExactType<T extends InheritedWidget>() {
assert(_debugCheckStateIsActiveForAncestorLookup());
// 从_inheritedWidgets（HashMap类型）中找到对应的InheritedElement
final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[T];
return ancestor;
}
再看一下dependOnInheritedWidgetOfExactType方法的定义：
相比之下，多调了dependOnInheritedElement方法。
@override
T? dependOnInheritedWidgetOfExactType<T extends InheritedWidget>({ Object aspect }) {
assert(_debugCheckStateIsActiveForAncestorLookup());
final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[T];
// 多出的部分
if (ancestor != null) {
assert(ancestor is InheritedElement);
return dependOnInheritedElement(ancestor, aspect: aspect) as T;
}
_hadUnsatisfiedDependencies = true;
return null;
}
继续看一下dependOnInheritedElement方法的定义：
注册了依赖关系（InheritedWidget和依赖它的子孙组件），子孙组件依赖的InheritedWidget数据改变后会更新UI。
@override
InheritedWidget dependOnInheritedElement(InheritedElement ancestor, { Object aspect }) {
assert(ancestor != null);
_dependencies ??= HashSet<InheritedElement>();
_dependencies.add(ancestor);
// 将当前元素和InheritedElement进行绑定
ancestor.updateDependencies(this, aspect);
return ancestor.widget;
}
最后看一下上面提到的_inheritedWidgets（在mount方法中调用_updateInheritance方法进行初始化）
// 将父级的InheritedWidgets延续下来，然后在将自己（InheritedElement）存入
@override
void _updateInheritance() {
assert(_lifecycleState == _ElementLifecycle.active);
final Map<Type, InheritedElement>? incomingWidgets =
_parent?._inheritedWidgets;
if (incomingWidgets != null)
_inheritedWidgets = HashMap<Type, InheritedElement>.from(incomingWidgets);
else
_inheritedWidgets = HashMap<Type, InheritedElement>();
_inheritedWidgets![widget.runtimeType] = this;
}
InheritedElement的类结构
示例（使用InheritedWidget共享数据）
// 继承InheritedWidget，提供共享数据。
class ShareDataWidget extends InheritedWidget {
// 需要在子树中共享的数据
// 点击次数
final int data;
ShareDataWidget({
@required this.data,
Widget child
}) :super(child: child);
// 定义一个便捷方法，方便子树中的widget获取ShareDataWidget中的共享数据
static ShareDataWidget of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();
}
// 该回调决定当data发生变化时，是否通知子树中依赖data的Widget
@override
bool updateShouldNotify(ShareDataWidget old) {
// 如果返回true，则子树中有依赖的widget会更新UI
return old.data != data;
}
}
// 实现一个子组件，依赖共享数据。
class _TestWidget extends StatefulWidget {
@override
_TestWidgetState createState() => new _TestWidgetState();
}
class _TestWidgetState extends State<_TestWidget> {
@override
Widget build(BuildContext context) {
// 使用InheritedWidget中的共享数据
return Text(ShareDataWidget
.of(context)
.data
.toString());
}
// 依赖父辈widget的InheritedWidget中的数据改变且updateShouldNotify返回true时会被调用。
// 如果build中没有依赖InheritedWidget，则此回调不会被调用。
@override
void didChangeDependencies() {
super.didChangeDependencies();
print("Dependencies change");
}
}
// 改变共享数据
class InheritedWidgetTestRoute extends StatefulWidget {
@override
_InheritedWidgetTestRouteState createState() => new _InheritedWidgetTestRouteState();
}
class _InheritedWidgetTestRouteState extends State<InheritedWidgetTestRoute> {
int count = 0;
@override
Widget build(BuildContext context) {
return Center(
child: ShareDataWidget( // 使用ShareDataWidget
data: count,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: _TestWidget(),// 子widget中依赖ShareDataWidget
),
RaisedButton(
child: Text("Increment"),
// 每点击一次，将count自增，然后重新build,ShareDataWidget的data将被更新
onPressed: () => setState(() => ++count),
)
],
),
),
);
}
}
每点击一次按钮，计数器就会自增，控制台就会打印一句日志：Dependencies change
Provider库正是基于InheritedWidget实现的一套跨组件状态共享解决方案。
Model变化后会自动通知ChangeNotifierProvider订阅者，ChangeNotifierProvider内部会重新构建InheritedWidget，而依赖该InheritedWidget的子孙Widget就会更新。
使用Provider的好处：
1. 业务代码更关注数据，只要更新Model，则UI会自动更新，而不用在状态改变后再去手动调用setState()来显式更新页面。
2. 数据改变的消息传递被屏蔽了，无需手动去处理状态改变事件的发布和订阅了，这一切都被封装在Provider中了。
3. 在大型复杂应用中，尤其是需要全局共享的状态非常多时，使用Provider将会大大简化代码逻辑，降低出错的概率，提高开发效率。
- 实现一个最小功能的Provider
首先，需要一个保存跨组件共享数据的InheritedWidget。
由于具体业务数据类型不可预期，为了通用性使用泛型，定义一个通用的继承自InheritedWidget的InheritedProvider类。
class InheritedProvider<T> extends InheritedWidget {
InheritedProvider({@required this.data, Widget child}) : super(child: child);
// 共享状态使用泛型
final T data;
@override
bool updateShouldNotify(InheritedProvider<T> old) {
// 在此简单返回true，则每次更新都会调用依赖其的子孙节点的`didChangeDependencies`。
return true; // data != old.data
}
}
接下来，需要做的就是在数据改变时来重新构建InheritedProvider。
数据改变后可以使用以下2种方式进行事件通知。
1. eventBus（不推荐）
2. ChangeNotifier类（继承自Listenable类），实现了一个Flutter风格的发布者-订阅者模式。
将要共享的状态放到一个Model类中，然后让它继承自ChangeNotifier。
当共享状态改变时，只需要调用notifyListeners() 来通知订阅者重新构建InheritedProvider。
/*
ChangeNotifier定义如下：
// foundation框架
class ChangeNotifier implements Listenable {
List listeners=[];
@override
void addListener(VoidCallback listener) {
// 添加监听器
listeners.add(listener);
}
@override
void removeListener(VoidCallback listener) {
// 移除监听器
listeners.remove(listener);
}
void notifyListeners() {
// 通知所有监听器，触发所有监听器回调
listeners.forEach((item)=>item());
}
... // 省略无关代码
}
*/
订阅者
class ChangeNotifierProvider<T extends ChangeNotifier> extends StatefulWidget {
ChangeNotifierProvider({
Key key,
this.data,
this.child,
});
final Widget child;
final T data;
// 定义了一个of()静态方法供子类方便获取Widget树中的InheritedProvider中保存的共享状态
static T of<T>(BuildContext context) {
// final type = _typeOf<InheritedProvider<T>>();
final provider = context.dependOnInheritedWidgetOfExactType<InheritedProvider<T>>();
return provider.data;
}
@override
_ChangeNotifierProviderState<T> createState() => _ChangeNotifierProviderState<T>();
}
// 主要作用就是监听到共享状态改变时重新构建Widget树。
class _ChangeNotifierProviderState<T extends ChangeNotifier> extends State<ChangeNotifierProvider<T>> {
void update() {
// 如果数据发生变化（model类调用了notifyListeners），重新构建InheritedProvider
setState(() => {
});
}
@override
void didUpdateWidget(ChangeNotifierProvider<T> oldWidget) {
// 当Provider更新时，如果新旧数据不"=="，则解绑旧数据监听，同时添加新数据监听
if (widget.data != oldWidget.data) {
oldWidget.data.removeListener(update);
widget.data.addListener(update);
}
super.didUpdateWidget(oldWidget);
}
@override
void initState() {
// 给model添加监听器
widget.data.addListener(update);
super.initState();
}
@override
void dispose() {
// 移除model的监听器
widget.data.removeListener(update);
super.dispose();
}
@override
Widget build(BuildContext context) { // 重新执行该build方法widget.child不会去更新
return InheritedProvider<T>( // InheritedProvider
data: widget.data,
child: widget.child,
);
}
}
通过一个购物车示例来使用上述功能（ChangeNotifierProvider组件）
向购物车中添加新商品时总价更新
// 定义一个Item类，用于表示商品信息：
class Item {
Item(this.price, this.count);
double price; // 商品单价
int count; // 商品份数
//... 省略其它属性
}
// 定义一个保存购物车内商品数据的CartModel类
// CartModel即要跨组件共享的model类
class CartModel extends ChangeNotifier {
// 用于保存购物车中商品列表
final List<Item> _items = [];
// 禁止改变购物车里的商品信息
UnmodifiableListView<Item> get items => UnmodifiableListView(_items);
// 购物车中商品的总价
double get totalPrice =>
_items.fold(0, (value, item) => value + item.count * item.price);
// 将 [item] 添加到购物车。这是唯一一种能从外部改变购物车的方法。
void add(Item item) {
_items.add(item);
// 通知监听器（订阅者），重新构建InheritedProvider， 更新状态。
notifyListeners();
}
}
// 构建示例页面
class ProviderRoute extends StatefulWidget {
@override
_ProviderRouteState createState() => _ProviderRouteState();
}
class _ProviderRouteState extends State<ProviderRoute> {
@override
Widget build(BuildContext context) {
return Center(
child: ChangeNotifierProvider<CartModel>(
data: CartModel(),
child: Builder(builder: (context) {
return Column(
children: <Widget>[
Builder(builder: (context){
var cart=ChangeNotifierProvider.of<CartModel>(context);
return Text("总价: ${cart.totalPrice}");
}),
Builder(builder: (context){
print("RaisedButton build");
return RaisedButton(
child: Text("添加商品"),
onPressed: () {
// 给购物车中添加商品，添加后总价会更新
ChangeNotifierProvider.of<CartModel>(context).add(Item(20.0, 1));
},
);
}),
],
);
}),
),
);
}
}
每次点击”添加商品“按钮，总价就会增加20。
上面实现的ChangeNotifierProvider有两个明显缺点：代码组织问题和性能问题
代码组织问题
先看一下构建显示总价Text的代码：
Builder(builder: (context){
var cart=ChangeNotifierProvider.of<CartModel>(context);
return Text("总价: ${cart.totalPrice}");
})
这段代码有两点可以优化：
1. 需要显式调用ChangeNotifierProvider.of，当APP内部依赖CartModel很多时，这样的代码将很冗余。
2. 语义不明确；由于ChangeNotifierProvider是订阅者，那么依赖CartModel的Widget自然就是订阅者，其实也就是状态的消费者，如果用Builder 来构建，语义就不是很明确；如果能使用一个具有明确语义的Widget，比如就叫Consumer，这样最终的代码语义将会很明确，只要看到Consumer，就知道它是依赖某个跨组件或全局的状态。
优化
// 这是一个便捷类，会获得当前context和指定数据类型的Provider
class Consumer<T> extends StatelessWidget {
Consumer({
Key key,
@required this.builder,
this.child,
}) : assert(builder != null),
super(key: key);
final Widget child;
final Widget Function(BuildContext context, T value) builder;
@override
Widget build(BuildContext context) {
return builder(
context,
ChangeNotifierProvider.of<T>(context), // 获取Model
);
}
}
Consumer实现非常简单，它通过指定模板参数，然后再内部自动调用ChangeNotifierProvider.of获取相应的Model，并且Consumer这个名字本身也是具有确切语义（消费者）。现在，显示总价的代码块可以优化为：
Consumer<CartModel>(
builder: (context, cart)=> Text("总价: ${cart.totalPrice}");
)
性能问题
在构建”添加按钮“的代码处存在性能问题：
点击”添加商品“按钮后，由于购物车商品总价会变化，所以显示总价的Text更新是符合预期的，但是”添加商品“按钮本身没有变化，是不应该被重新build的。
如何避免这不必要重构呢？既然按钮重新被build是因为按钮和InheritedWidget建立了依赖关系，那么只要使用getElementForInheritedWidgetOfExactType()打破或解除这种依赖关系就可以了。
所以只需要将ChangeNotifierProvider.of的实现改为：
// 添加一个listen参数，表示是否建立依赖关系
static T of<T>(BuildContext context, {bool listen = true}) {
final type = _typeOf<InheritedProvider<T>>();
final provider = listen
? context.dependOnInheritedWidgetOfExactType<InheritedProvider<T>>()
: context.getElementForInheritedWidgetOfExactType<InheritedProvider<T>>()?.widget
as InheritedProvider<T>;
return provider.data;
}
然后将调用部分代码改为：
Column(
children: <Widget>[
Consumer<CartModel>(
builder: (BuildContext context, cart) =>Text("总价: ${cart.totalPrice}"),
),
Builder(builder: (context) {
print("RaisedButton build");
return RaisedButton(
child: Text("添加商品"),
onPressed: () {
// listen 设为false，不建立依赖关系
ChangeNotifierProvider.of<CartModel>(context, listen: false)
.add(Item(20.0, 1));
},
);
})
],
)
3. 颜色和主题（Color、Theme）
- Color 颜色
Flutter的Color类中颜色以一个int值保存。
// 显示器颜色是由红、绿、蓝（每种颜色占8比特）三基色组成：0-7蓝色、8-15绿色、16-23红色、24-31Alpha (不透明度)
0. MaterialColor
Colors.red[300]、Colors.black
1. 如果颜色固定可以直接使用整数值
Color(0xffdc380d);
2. 将颜色字符串转成Color对象
var c = "dc380d"; // 颜色是一个字符串变量
Color(int.parse(c,radix:16)|0xFF000000) // 通过位运算符将Alpha设置为FF
Color(int.parse(c,radix:16)).withAlpha(255) // 通过方法将Alpha设置为FF
3.
Colors.black26
4.
Color类提供了一个computeLuminance()实例方法，它可以返回一个[0-1]的一个值，数字越大颜色就越浅。
例（颜色亮度）
实现一个背景颜色和Title可以自定义的导航栏，并且背景色为深色时应该让Title显示为浅色；背景色为浅色时，Title显示为深色。
可以根据computeLuminance()返回值来动态确定Title的颜色.
class NavBar extends StatelessWidget {
final String title;
final Color color; // 背景颜色
NavBar({
Key key,
this.color,
this.title,
});
@override
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints(
minHeight: 52,
minWidth: double.infinity,
),
decoration: BoxDecoration(
color: color,
boxShadow: [
// 阴影
BoxShadow(
color: Colors.black26,
offset: Offset(0, 3),
blurRadius: 3,
),
],
),
child: Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
// 根据背景色亮度来确定Title颜色
color: color.computeLuminance() < 0.5 ? Colors.white : Colors.black,
),
),
alignment: Alignment.center,
);
}
}
测试代码：
Column(
children: <Widget>[
// 背景为蓝色，则title自动为白色
NavBar(color: Colors.blue, title: "标题"),
// 背景为白色，则title自动为黑色
NavBar(color: Colors.white, title: "标题"),
]
)
MaterialColor
MaterialColor包含了一种颜色的10个级别的渐变色。
通过"[]"运算符的索引值来代表颜色的深度，有效的索引有：50，100，200，300，...900。数字越大，颜色越深。默认索引为500。
// Colors.blue.shade50
Colors.blue[50]到Colors.blue[900]的色值从浅蓝到深蓝渐变。
/*
Colors.blue是预定义的一个MaterialColor类对象，定义如下：
static const MaterialColor blue = MaterialColor(
_bluePrimaryValue,
<int, Color>{
50: Color(0xFFE3F2FD),
100: Color(0xFFBBDEFB),
200: Color(0xFF90CAF9),
300: Color(0xFF64B5F6),
400: Color(0xFF42A5F5),
500: Color(_bluePrimaryValue),
600: Color(0xFF1E88E5),
700: Color(0xFF1976D2),
800: Color(0xFF1565C0),
900: Color(0xFF0D47A1),
},
);
*/
- Theme主题
为Material APP设置共享颜色和字体样式。Theme组件内会使用InheritedWidget来为其子树共享样式数据。
Material组件库里很多组件都使用了主题数据，如导航栏颜色、标题字体、Icon样式等。
ThemeData用于保存Material组件库的主题数据。Material组件需要遵守相应的设计规范，而这些规范可自定义部分都定义在ThemeData中了。设计规范中有些是不能自定义的，如导航栏高度，ThemeData只包含了可自定义部分。
ThemeData({
Brightness brightness, // 亮度（Brightness: dark深色、light浅色）
MaterialColor primarySwatch, // 主题色，它是主题颜色的一个样本色。通过这个样本色可以在一些条件下生成一些其它的属性，例如，如果没有指定primaryColor，并且当前主题不是深色主题，那么primaryColor就会默认为primarySwatch指定的颜色。还有一些相似的属性如accentColor 、indicatorColor等也会受primarySwatch影响。
Color primaryColor, // 主色，决定导航栏颜色、BottomNavigationBar的选中色。注意：导航栏的字体颜色会根据主色调和 brightness 自动计算显示的颜色是偏浅色还是深色。
Color accentColor, // 次级色（辅助色），决定大多数Widget的颜色，如进度条、开关等。
Color cardColor, // 卡片颜色
Color dividerColor, // 分割线颜色
ButtonThemeData buttonTheme, // 按钮的主题
Color buttonColor, // 按钮的颜色
Color cursorColor, // 输入框光标颜色
Color dialogBackgroundColor,// 对话框背景颜色
String fontFamily, // 文字字体。早期版本的 flutter 设置的比较少，新版本可能是为了支持Web端，字体的属性设置基本和 html 的保持一致了，包括 headline1到 headline6，bodyText1。
TextTheme textTheme,// 字体主题，包括标题title、body等文字样式
IconThemeData iconTheme, // Icon的默认样式
TargetPlatform platform, // 指定平台，应用特定平台控件风格
...
})
/*
ButtonThemeData({
this.textTheme = ButtonTextTheme.normal,
this.minWidth = 88.0,
this.height = 36.0,
EdgeInsetsGeometry? padding,
ShapeBorder? shape,
this.layoutBehavior = ButtonBarLayoutBehavior.padded,
this.alignedDropdown = false,
Color? buttonColor,
Color? disabledColor,
Color? focusColor,
Color? hoverColor,
Color? highlightColor,
Color? splashColor,
this.colorScheme,
MaterialTapTargetSize? materialTapTargetSize,
})
BeveledRectangleBorder、StadiumBorder 继承自 OutlinedBorder 继承自 ShapeBorder
const OutlinedBorder({ this.side = BorderSide.none })
const BeveledRectangleBorder({
BorderSide side = BorderSide.none,
this.borderRadius = BorderRadius.zero,
})
const StadiumBorder({ BorderSide side = BorderSide.none })
*/
1、全局主题
由应用程序根MaterialApp创建的Theme。
MaterialApp(
title: title,
theme: ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
),
);
2、局部主题
方式1（创建新ThemeData）
Theme(
data: ThemeData(
accentColor: Colors.yellow,
),
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
);
方式2（扩展父主题）
Theme(
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
child: FloatingActionButton(
onPressed: null,
child: new Icon(Icons.add),
),
);
局部主题覆盖全局主题。
在组件build方法中，通过Theme.of(BuildContext context)方法来获取当前的ThemeData。该方法定义如下（简化后的代码，非源码）：
static ThemeData of(BuildContext context, { bool shadowThemeOnly = false }) {
// context.dependOnInheritedWidgetOfExactType会在widget树中从当前位置向上查找第一个类型为_InheritedTheme的widget，所以局部主题可以覆盖全局主题。
return context.dependOnInheritedWidgetOfExactType<_InheritedTheme>().theme.data
}
使用：
new Container(
color: Theme.of(context).accentColor,
child: new Text(
'Text with a background color',
style: Theme.of(context).textTheme.title,
),
);
例
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appName = 'Custom Themes';
return new MaterialApp(
title: appName,
theme: new ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
),
home: new MyHomePage(
title: appName,
),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key key, @required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Center(
child: new Container(
color: Theme.of(context).accentColor,
child: new Text(
'Text with a background color',
style: Theme.of(context).textTheme.title,
),
),
),
floatingActionButton: new Theme(
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
child: new FloatingActionButton(
onPressed: null,
child: new Icon(Icons.add),
),
),
);
}
}
例（单页面换肤）
本示例是对单个路由换肤，如果想要对整个应用换肤，则可以去修改MaterialApp的theme属性。
class ThemeTestRoute extends StatefulWidget {
@override
_ThemeTestRouteState createState() => new _ThemeTestRouteState();
}
class _ThemeTestRouteState extends State<ThemeTestRoute> {
Color _themeColor = Colors.teal; // 当前路由主题色
@override
Widget build(BuildContext context) {
ThemeData themeData = Theme.of(context);
return Theme(
data: ThemeData(
primarySwatch: _themeColor, // 用于导航栏、FloatingActionButton的背景色等
iconTheme: IconThemeData(color: _themeColor) // 用于Icon颜色
),
child: Scaffold(
appBar: AppBar(title: Text("主题测试")),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 第一行Icon使用主题中的iconTheme
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.favorite),
Icon(Icons.airport_shuttle),
Text(" 颜色跟随主题")
]
),
// 通过局部主题覆盖全局主题
// 为第二行Icon自定义颜色（固定为黑色)
Theme(
data: themeData.copyWith(
iconTheme: themeData.iconTheme.copyWith(
color: Colors.black
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.favorite),
Icon(Icons.airport_shuttle),
Text(" 颜色固定黑色")
]
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () => // 切换主题
setState(() =>
_themeColor =
_themeColor == Colors.teal ? Colors.blue : Colors.teal
),
child: Icon(Icons.palette)
),
),
);
}
}
示例（textTheme）
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'hello world',
theme: ThemeData(
primaryColor: Colors.blue,
accentColor: Colors.blue[600],
textTheme: TextTheme(
headline1: TextStyle(
fontSize: 36.0, fontWeight: FontWeight.bold, color: Colors.white),
headline2: TextStyle(
fontSize: 32.0, fontWeight: FontWeight.w400, color: Colors.white),
headline3: TextStyle(
fontSize: 28.0, fontWeight: FontWeight.w400, color: Colors.white),
headline4: TextStyle(
fontSize: 24.0, fontWeight: FontWeight.w400, color: Colors.white),
headline6: TextStyle(
fontSize: 14.0, fontWeight: FontWeight.w200, color: Colors.white),
bodyText1: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w200,
),
),
fontFamily: 'Georgia',
),
home: AppHomePage(),
);
}
}
4. 异步数据更新UI（FutureBuilder、StreamBuilder）
FutureBuilder、StreamBuilder组件可以依赖异步数据来动态更新UI。
场景：
1. 在打开一个页面时需要先从互联网上获取数据，在获取数据的过程中显示一个加载框，等获取到数据时再渲染页面；
2. 想展示Stream（比如文件流、互联网数据接收流）的进度。
- FutureBuilder
会根据所依赖Future的状态来动态构建自身。
FutureBuilder({
this.future,
this.initialData,
@required this.builder,
})
说明：
1. future
依赖的Future（通常是一个异步耗时任务）。
2. initialData
初始数据（默认数据）。
3. builder
Widget构建器（会在Future执行的不同阶段被多次调用）。
// FutureBuilder和StreamBuilder的builder构建器是相同的。
// snapshot会包含当前异步任务的状态信息及结果信息。
// snapshot.connectionState获取异步任务的状态。snapshot.hasError判断异步任务是否有错误。
Function (BuildContext context, AsyncSnapshot snapshot)
示例
实现一个路由，当该路由打开时从网上获取数据，获取数据时弹一个加载框；获取结束时，如果成功则显示获取到的数据，如果失败则显示错误。
Future<String> mockNetworkData() async {
return Future.delayed(Duration(seconds: 2), () => "我是从互联网上获取的数据");
}
...
Widget build(BuildContext context) {
return Center(
child: FutureBuilder<String>(
future: mockNetworkData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
// 请求中
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child:Text('加载中...'),
);
}
// 请求已结束
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
// 请求失败，显示错误
return Text("Error: ${snapshot.error}");
} else {
// 请求成功，显示数据
return Text("Contents: ${snapshot.data}");
}
} else {
// 请求未结束，显示loading
return CircularProgressIndicator();
}
},
),
);
}
ConnectionState是一个枚举类，定义如下：
enum ConnectionState {
/// 当前没有异步任务，比如[FutureBuilder]的[future]为null时
none,
/// 异步任务处于等待状态
waiting,
/// Stream处于激活状态（流上已经有数据传递了），对于FutureBuilder没有该状态。
/// ConnectionState.active只在StreamBuilder中才会出现。
active,
/// 异步任务已经终止.
done,
}
- StreamBuilder
配合Stream来展示流数据变化的组件，可以接收多个异步操作结果，常用于会多次读取数据的异步任务（如：网络内容下载、文件读写）。
StreamBuilder({
Key key,
this.initialData, // 初始数据
Stream<T> stream, // 异步获取数据
@required this.builder, // 获取到结果后的builder
})
示例（创建一个计时器的示例：每隔1秒，计数加1）
Stream<int> counter() {
return Stream.periodic(Duration(seconds: 1), (i) {
return i;
});
}
Widget build(BuildContext context) {
return StreamBuilder<int>(
stream: counter(), //
builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
if (snapshot.hasError)
return Text('Error: ${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('没有Stream');
case ConnectionState.waiting:
return Text('等待数据...');
case ConnectionState.active:
return Text('active: ${snapshot.data}');
case ConnectionState.done:
return Text('Stream已关闭');
}
return null; // unreachable
},
);
}
- Stream
class TestWidget extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return TestWidgetState();
}
}
class TestWidgetState extends State<TestWidget>{
StreamSubscription _streamSubscription;
@override
void initState() {
super.initState();
Stream<String> _helloStream=Stream.fromFuture(fetchData());
// 有数据后、出错后、完成后回调
_streamSubscription=_helloStream.listen(onData,onError:onError,onDone:onDone);
}
void onDone(){
print('完成'); // 最终都会执行
}
void onError(error){
print('$error');
}
void onData(String data){
print('$data');
}
Future<String> fetchData() async{
await Future.delayed(Duration(seconds: 5)); // 延迟5s
// throw '出错了';
return 'hello';
}
// 暂停订阅
void _pauseStream(){
_streamSubscription.pause();
}
// 恢复订阅
void _resumeStream(){
_streamSubscription.resume();
}
// 取消订阅,取消后无法恢复
void _cancelStream(){
_streamSubscription.cancel();
}
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('pause'),
onPressed: _pauseStream,
),
FlatButton(
child:Text('resume'),
onPressed: _resumeStream,
),
FlatButton(
child:Text('cancel'),
onPressed: _cancelStream,
),
],
),
),
);
}
}
使用StreamController
StreamController<String> _streamController;
@override
void initState() {
super.initState();
/*
Stream<String> _helloStream=Stream.fromFuture(fetchData());
_streamSubscription=_helloStream.listen(onData,onError:onError,onDone:onDone);
*/
_streamController=StreamController<String>();
_streamSubscription=_streamController.stream.listen(onData,onError:onError,onDone:onDone); // 有数据后、出错后、完成后回调
}
@override
void dispose() {
super.dispose();
// 关闭stram
_streamController.close();
}
// 向stram中添加数据
void _addDataToStream() async{
String data=await fetchData();
_streamController.add(data);
}
使用StreamSink
StreamSink _streamSink;
_streamSink=_streamController.sink;
// 向stram中添加数据
void _addDataToStream() async{
String data=await fetchData();
// _streamController.add(data);
_streamSink.add(data);
}
多次订阅
// 有数据后、出错后、完成后回调
_streamController.stream.listen(onTwoData,onError:onError,onDone:onDone);
void onTwoData(String data){
print('two： $data');
}
示例（Bloc 业务开发架构，响应式）
class HelloBloc {
int _count=0;
final _streamActionController=StreamController<int>();
StreamSink<int> get countSink=>_streamActionController.sink;
final _streamController=StreamController<int>();
Stream<int> get count=>_streamController.stream;
HelloBloc(){
_streamActionController.stream.listen(onData);
}
void onData(int data){
print('$data');
_count=data+_count;
_streamController.add(_count);
}
void log() {
print('bloc');
}
void dispose(){
_streamActionController.close();
_streamController.close();
}
}
class DataProviderWidget extends InheritedWidget {
final Widget child;
final HelloBloc dataBlock;
DataProviderWidget({
this.child,
this.dataBlock,
});
// 定义一个便捷方法，方便子树中的widget获取共享数据
static DataProviderWidget of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<DataProviderWidget>();
}
@override
bool updateShouldNotify(DataProviderWidget old) {
// 如果返回true，则子树中某子widget依赖本widget的dataBlock,则子widget的`state.didChangeDependencies`会被调用
return true;
}
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.yellow,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
createState() => new MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return DataProviderWidget(
child: Scaffold(
body: TestWidget(),
),
dataBlock: HelloBloc(),
);
}
}
class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
HelloBloc _bloc = DataProviderWidget.of(context).dataBlock;
return Center(
child: StreamBuilder(
initialData: 0,
stream: _bloc.count,
builder: (context,snapshot){
return ActionChip(
label: Text('点击 ${snapshot.data}'),
onPressed: () {
_bloc.log();
_bloc.countSink.add(1);
},
);
},
),
);
}
}
rxdart库
