很多人在使用 showDialog 或者 showModalBottomSheet 的时候,都会遇到这个问题:通过 setState 方法无法更新当前的dialog。
原因其实很简单,dialog本质上是另一个页面,确切点说是另一个路由,它的地位跟你当前主页面是一样的。在Android或者iOS中,dialog都是依附于当前主页面的一个控件,但是在Flutter中它是一个新的路由。所以,你使用当前页面的 setState 方法当然是没法更新dialog中的内容的。
那么,如何更新dialog中的内容呢?答案是使用StatefulBuilder。
代码如下:
showDialog(
context: context,
builder: (context) {
String label = 'test';
//StatefulBuilder
return StatefulBuilder(
//在这里为了区分,在构建builder的时候将setState方法命名为了setDialogState。
builder: (context, setDialogState) {
print('label = $label');
return GestureDetector(
child: Text(label),
onTap: () {
label = 'test8';
print('onTap:label = $label');
// 注意不是调用老页面的setState,而是要调用builder中的setDialogState。
setDialogState(() {});
},
);
},
);
});bool btnState=false;
showModalBottomSheet(
context:context,
builder:(BuildContext context){
return StatefulBuilder(
//在这里为了区分,在构建builder的时候将setState方法命名为了setBottomSheetState。
builder:(context1, setBottomSheetState) {
return Container(
child:OutlineButton(
onPressed: (){
// 注意不是调用老页面的setState,而是要调用builder中的setBottomSheetState
setBottomSheetState(() {
btnState=!btnState;
});
},
child:Stack(
children: <Widget>[
Opacity(
opacity: btnState ? 0.0 : 1.0,
child: Text("aa"),
),
Opacity(
opacity: btnState ? 1.0 : 0.0,
child: Text("bb"),
),
],
),
),
),
}
)
}
)以上。
继续阅读与本文标签相同的文章
上一篇 :
python 文件转成16进制数组的实例
下一篇 :
iOS安全防护系列之字符串及系统函数隐藏详解
-
谷歌新品Pixel 4推出人脸识别翻车了?其实不然
2026-05-14栏目: 教程
-
叫板百万级豪车!Aion LX到底拥有哪些硬核实力?
2026-05-14栏目: 教程
-
收藏!YTA全球品牌活动回顾
2026-05-14栏目: 教程
-
简单高效!Excel选中格式相同的多个单元格
2026-05-14栏目: 教程
-
微信群聊上线接龙表格功能,刷屏回复将成为过去
2026-05-14栏目: 教程
