一.引入key的概念
- 这里有一个小demo
- 每次点击按钮，删除第一个Widget
1.使用StatefulWidget
void main() {
runApp(const App());
}
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State {
final List _widgets = [const StateFulTest('1111'), const StateFulTest('2222'), const StateFulTest('33333')];
void _onPressed() {
setState(() {
_widgets.removeAt(0);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Key Demo'),),
floatingActionButton: FloatingActionButton(
onPressed: _onPressed,
child: const Icon(Icons.add),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: _widgets,
)
);
}
}
class StateFulTest extends StatefulWidget {
const StateFulTest(this.title ,{Key? key}) : super(key: key);
final String title;
@override
_StateFulTestState createState() => _StateFulTestState();
}
class _StateFulTestState extends State {
Color color = Color.fromRGBO(Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1.0);
@override
Widget build(BuildContext context) {
return Container(
height: 100,
width: 100,
color: color,
child: Center(
child: Text(widget.title),
),
);
}
}
class StatelessTest extends StatelessWidget {
StatelessTest(this.title, {Key? key}) : super(key: key);
final String title;
Color color = Color.fromRGBO(Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1.0);
@override
Widget build(BuildContext context) {
return Container(
height: 100,
width: 100,
color: color,
child: Center(
child: Text(title),
),
);
}
}
key_colors_bug.gif
文字显示正常，但是Widget的颜色却是不正常的- 看起来就像删除的第三个Widget
2.使用StatelessWidget
- 那这里可否怀疑是Stateful导致的问题？
- 将
_widgets中的StateFulTest更换为StatelessDemo - 发现居然正常了
3.使用StatelessWidget，将State中的color放到Widget
- 经过测试正常
4.问题排查思路
- 出现该问题是因为state没有被刷新或者重置
- 通过渲染原理可知state的创建是在StatefulElement的构造方法中，Element与state是绑定
- 出现的问题是因为删除后的第一个Widget绑定了之前删掉的Element，导致state不会被刷新，出现颜色不会变化的bug
- 针对Widget刷新时，绑定了之前一个Element导致的bug。查看Widget源码是否有关于Widget与Element绑定的方法
- 在Widget类中，有一种非常重要的方法
canUpdate
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}
- 进入这个方法的前提是2个Widget的父Element是相同的
- 这个函数的注释写得非常清楚，新的Wdiget是否可以更新到老的Widget的Elment
- 简答来说，是否可以复用Element
- 还有一点我们也需要了解，新老Widget的子部件不同也不会影响到是否可以update
-
runtimeType为对象的运行时类型的形式 - 通过这个方法我们可以很明确的分析到，很明显新老Widget是一种类型，并且runtimeType肯定是一致的。key没有传值为nil，因此该方法必定返回true。
- 将Element1更新到Widget2中
- 至此，问题问题排查清楚
-
下面用一张图来简单的分析一下
statefulWidget_Element_Error.png
5.当我们移除一个Widget时，同时再添加一个Widget，此时的Element是否会复用移除的?
final List _widgets = [const StateFulTest('1111'), const StateFulTest('2222'), const StateFulTest('33333')];
void _onPressed() {
setState(() {
_widgets.removeAt(0);
_widgets.add(const StateFulTest('4444'));
});
}
1.添加一个不带key的Widget
按上图逻辑，Element3会被释放
那么现在断点调试，查看一下Flutter在这块是怎么优化的
此时断点断在createElement()
StatefulElement createElement() => StatefulElement(this);
结果：并没有进入断点，添加新的Widget(不含key)没有执行createElement
2.添加一个带key的Widget
void _onPressed() {
setState(() {
_widgets.removeAt(0);
_widgets.add(const StateFulTest('4444', key: ValueKey(4),));
});
}
结果：进入断点，添加新的Widget(含key)执行createElement
3.总结
在setState方法中，当我们移除一个Widget时，同时再添加一个Widget，此时的Element会先去复用移除的(canUpdate判断是否能复用)
二.Key
- 抽象类，一般使用它的派生类
LocalKey和GlobalKey
abstract class Key {
/// Construct a [ValueKey] with the given [String].
///
/// This is the simplest way to create keys.
const factory Key(String value) = ValueKey;
/// Default constructor, used by subclasses.
///
/// Useful so that subclasses can call us, because the [new Key] factory
/// constructor shadows the implicit constructor.
@protected
const Key.empty();
}
- 默认Key的工程构造方法也是使用ValueKey实现，ValueKey为LocalKey的派生类
- 在之前的代码修改_widgets，加入key
final List _widgets = [const StateFulTest('1111', key: Key('1111'),), const StateFulTest('2222', key: Key('2222')), const StateFulTest('33333', key: Key('33333'))];
key_colors_ferfect.gif
- 结果显示正常
- 至此关于构造方法中Key的作用相信大家应该比较明白了
三.LocalKey
- 一般用于相同父Element小部件的比较。也就是在Widget中update方法使用
1.ValueKey
- 指的是通过一个值来创建的key。其中传入的值类型是泛型，任意类型
- 使用场景，通过value值来对比
2.ObjectKey
- 指的是通过一个对象来创建的key
- 使用场景，通过Object指针地址来对比
3.UniqueKey
- 指的是创建了一个唯一的key。通过该对象生成一个唯一的hash码
- 使用场景，每次构建时key都是不同的，因此Element永远不会复用
keyDemo() {
//创建测试对象
TestKeyClass testK = TestKeyClass();
//ValueKey
ValueKey key1 = ValueKey(testK);
ValueKey key2 = ValueKey(testK);
ValueKey key3 = const ValueKey(3);
print(key1 == key2); //true
print(key1 == key3); //false
//ObjectKey
ObjectKey objectKey1 = ObjectKey(testK);
ObjectKey objectKey2 = ObjectKey(testK);
ObjectKey objectKey3 = ObjectKey(TestKeyClass());
print(objectKey1 == objectKey2); //true
print(objectKey1 == objectKey3); //false
//UniqueKey
print(UniqueKey() == UniqueKey()); //false
}
四.GlobalKey
- 一般通过使用GlobalKey来保存/获取某一部件的Widget、State、Element
- 概念类似于iOS中的tag
- 这里介绍一个简单的使用场景，在StatelessWidget中刷新StatefulWidget的状态
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({Key? key}) : super(key: key);
final GlobalKey _globalKey = GlobalKey();
void _onPressed() {
_GlobalKeyTestState state = _globalKey.currentState as _GlobalKeyTestState ;
/*
* 下面写法会报出警告
* The member 'setState' can only be used within instance members of subclasses of 'package:flutter/src/widgets/framework.dart'.
* 大致意思是setState这个方法应该只能在state方法里面调用
* 因此这里写了一个refreshState方法中转一下来消除警告
* */
// state.setState(() {
// state.count ++;
// });
state.count ++;
state.refreshState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Global Key Demo'),),
body: GlobalKeyTest(key: _globalKey,),
floatingActionButton: FloatingActionButton(
onPressed: _onPressed,
child: const Icon(Icons.add),
),
),
);
}
}
class GlobalKeyTest extends StatefulWidget {
const GlobalKeyTest({Key? key}) : super(key: key);
@override
_GlobalKeyTestState createState() => _GlobalKeyTestState();
}
class _GlobalKeyTestState extends State {
var count = 0;
refreshState() {
setState(() {
});
}
@override
Widget build(BuildContext context) {
return Center(
child: Text('$count'),
);
}
}
globalKey.gif