1.Widget
abstract class Widget extends DiagnosticableTree {
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}
}
Widget拥有canUpdate 方法
abstract class Element {
@override
Widget get widget =>_widget;
}
Element拥有 widget属性
2.ValueKey 使用
LocalKey使用
List_fitems = [
SflDemo('111', ),
SflDemo('222', ),
SflDemo('333', ),
];
添加_fitems组件数组
Scaffold(
body:Row(
mainAxisAlignment: MainAxisAlignment.center,
children:_fitems,
),
floatingActionButton :FloatingActionButton(
child:Icon(Icons.add),
onPressed: (){
setState(() {
_fitems.removeAt(0);
});
},
),
)
SflDemo组件
class SflDemo extends StatefulWidget {
final String title;
const SflDemo(this.title, {Key? key}):super(key: key);
@override
_SflDemoState createState() =>_SflDemoState();
}
class _SflDemoState extends State {
Color?_color;
@override
void initState() {
super.initState();
_color =Color.fromRGBO(Random().nextInt(256),Random().nextInt(256),Random().nextInt(256),1);
}
@override
Widget build(BuildContext context) {
return Container(
alignment:Alignment(0,0),
width:100,
height:100,
color:_color,
child:Text(widget.title),
);
}
}
页面SflDemo组件颜色重用
解析
解决方法
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}
canUpdate决定 Widget的类型 和 Key,
在SflDemo构造方法中添加Key,解决问题
List_fitems = [
SflDemo('111', key:const ValueKey('1'),),
SflDemo('222', key:const ValueKey('2'),),
SflDemo('333', key:const ValueKey('3'),),
];
GlobalKey使用
需求改变子组件的数值，通过GlobalKey实现
class _GlobalKeyDemoStateextends State {
GlobalKey<_GlobalKeyItemState>_globalKey =GlobalKey(); // 给_GlobalKeyItemState打上标识
@override
Widget build(BuildContext context) {
return Scaffold(
body:GlobalKeyItem(key:_globalKey,), // GlobalKeyItem组件传个globalKey
floatingActionButton :FloatingActionButton(
child:Icon(Icons.add),
onPressed: (){
// 使用globalKey 操作子组件 GlobalKeyItem
_globalKey.currentState?.setState(() {//子组件 GlobalKeyItem 刷新
_globalKey.currentState?.count++; // 获取子组件 GlobalKeyItem 的count属性
});
},
),
);
}
}
class GlobalKeyItem extends StatefulWidget {
GlobalKeyItem({Key? key}):super(key: key);
@override
_GlobalKeyItemState createState() =>_GlobalKeyItemState();
}
class _GlobalKeyItemStateextends State {
int count =0;
@override
Widget build(BuildContext context) {
return Container(
child:Text('count: $count'),
);
}
}
3。总结
ValueKey：widget 的标识，在Element树中Element是否可以重用，起决定作用
GlobalKey：在祖组件中的标识， 可以在父组件以及祖先组件中，通过GlobalKey获得子组件
