很多人在使用 showDialog 或者 showModalBottomSheet 的时候,都会遇到这个问题:通过 setState 方法无法更新当前的dialog。
原因其实很简单,dialog本质上是另一个页面,确切点说是另一个路由,它的地位跟你当前主页面是一样的。在Android或者iOS中,dialog都是依附于当前主页面的一个控件,但是在Flutter中它是一个新的路由。所以,你使用当前页面的 setState 方法当然是没法更新dialog中的内容的。
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"),
),
],
),
),
),
}
)
}
)
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(() {});
},
);
},
);
});
网友评论