flutter 局部刷新

article/2025/10/18 9:51:36

在这里插入图片描述

目的：局部刷新

效果：点击右下角刷新按钮后，对九宫格中的图片刷新状态

思路：两个方法
一、整个页面都刷新，局部组件有变化，用UniqueKey()
二、只针对局部组件刷新，用GlobalKey()

具体操作：

一、使用`UniqueKey()` ————————————

UniqueKey()方法提供的key每次绘制时都是唯一的，所以整个页面重新绘制时，系统检测到只有这个节点的实体与原来不同，所以重新生成该节点新实体。
实验发现其子节点的所有实体也被更新了，相当于该点的树杈一整个都被换了

① 给局部组件加上`UniqueKey()`

SizedBox(height: 290,width: 330,child: Padding(padding: const EdgeInsets.symmetric(vertical:0,horizontal: 20),child: GridView9(confirmflag:confirmflag,key: UniqueKey(),//直接添加在要更新的这个组件上),),),

② 直接刷新`setState(() {})`

child:OutlinedButton(onPressed: (){setState(() {});},//刷新整个页面child: const Icon(Icons.refresh,size: 25,),
)

二、使用`GlobalKey()`————————————

简而言之，GlobalKey()就是给组件取个公开的名字，大家都能找到并调用他的方法。

① 定义变量

注意泛型<GridView9State> 是要被刷新的组件的State类型

class _JumpDialogState extends State<JumpDialog> {GlobalKey<GridView9State> gbKey = GlobalKey();//定义变量bool confirmflag = true; @overrideWidget build(BuildContext context) {return Center(

②把变量赋给组件Key

child: GridView9(confirmflag:confirmflag,key: gbKey,//给组件的Key赋值
),

③按钮就可以调用组件的方法了

child:OutlinedButton(onPressed: (){gbKey.currentState!.setState(() {});},....)

④需要注意

被刷新的组件中State去除了前方的下划线，让State暴露出去可以被其他组件访问

class GridView9 extends StatefulWidget {final bool confirmflag;const GridView9({super.key,required this.confirmflag});@overrideState<GridView9> createState() => GridView9State();//原来是_GridView9State()
}//原来是 _GridView9State
class GridView9State extends State<GridView9> {