setState()没有改变可见性

Question

我正在制作一个弹出对话框，在用户进入某些屏幕时询问用户的密码。这个字段应该有一个图标来改变密码的可见性，但是状态改变并没有发生，只有当我退出对话框并再次打开它时才会发生。

getConfirmationPortalKey() {
return showGeneralDialog(
transitionBuilder: (ctx, anim1, anim2, child) => BackdropFilter(
filter:
ImageFilter.blur(sigmaX: 4 * anim1.value, sigmaY: 4 * anim1.value),
child: FadeTransition(
child: child,
opacity: anim1,
),
),
context: context,
barrierDismissible: true,
barrierLabel: '',
barrierColor: Colors.black26,
transitionDuration: Duration(milliseconds: 200),
pageBuilder: (ctx, anim1, anim2) => AlertDialog(
content: Wrap(
alignment: WrapAlignment.center,
children: [
Wrap(
alignment: WrapAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [                    
Padding(
padding: EdgeInsets.only(top: 10, bottom: 10),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
hintText: 'Input Password',
suffixIconConstraints:
BoxConstraints.tightFor(height: 50, width: 50),
suffixIcon: Padding(
padding: EdgeInsets.only(top: 5),
child: SizedBox(
width: 24,
height: 24,
child: IconButton(
icon: passwordPortalVisible
? SvgPicture.asset(
"assets/svgs/icons/visibility_off.svg",
fit: BoxFit.scaleDown,
color: widget.colors.grey.shade400,
)
: SvgPicture.asset(
"assets/svgs/icons/visibility_on.svg",
fit: BoxFit.scaleDown,
color: widget.colors.grey.shade400,
),
onPressed: passwordVisible
? null
: () {
setState(() {
passwordVisible =
!passwordVisible;
});
},
),
),
),
),
controller: textEditingControllerKey,
keyboardType: TextInputType.number,
obscureText: !passwordVisible,
),
),
],
),
],
),
Padding(
padding:
EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 10),
child: Row(
children: [
Expanded(
widget._myBtns.elevatedButton('OK

'， (){UserLogin用户= UserLogin();}))，]，)，)，)，]，)，);}

Answer 1

我认为您需要在AlertDialog中使用StatefulBuilder。我想这是因为对话框是覆盖的，不知道它来自哪个小部件。

https://api.flutter.dev/flutter/widgets/StatefulBuilder-class.html

下面是你编辑的代码:

getConfirmationPortalKey() {
return showGeneralDialog(
transitionBuilder: (ctx, anim1, anim2, child) => BackdropFilter(
filter:
ImageFilter.blur(sigmaX: 4 * anim1.value, sigmaY: 4 * anim1.value),
child: FadeTransition(
child: child,
opacity: anim1,
),
),
context: context,
barrierDismissible: true,
barrierLabel: '',
barrierColor: Colors.black26,
transitionDuration: Duration(milliseconds: 200),
pageBuilder: (ctx, anim1, anim2) => AlertDialog(
content: StatefulBuilder(
builder: (BuildContext context, StateSetter setDialogState) {
bool passwordVisible = false;

return Wrap(
alignment: WrapAlignment.center,
children: [
Wrap(
alignment: WrapAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [                    
Padding(
padding: EdgeInsets.only(top: 10, bottom: 10),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
hintText: 'Input Password',
suffixIconConstraints:
BoxConstraints.tightFor(height: 50, width: 50),
suffixIcon: Padding(
padding: EdgeInsets.only(top: 5),
child: SizedBox(
width: 24,
height: 24,
child: IconButton(
icon: passwordPortalVisible
? SvgPicture.asset(
"assets/svgs/icons/visibility_off.svg",
fit: BoxFit.scaleDown,
color: widget.colors.grey.shade400,
)
: SvgPicture.asset(
"assets/svgs/icons/visibility_on.svg",
fit: BoxFit.scaleDown,
color: widget.colors.grey.shade400,
),
onPressed:() => setDialogState(() {
passwordVisible =
!passwordVisible;
});

),
),
),
),
controller: textEditingControllerKey,
keyboardType: TextInputType.number,
obscureText: !passwordVisible,
),
),
],
),
],
),
Padding(
padding:
EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 10),
child: Row(
children: [
Expanded(
widget._myBtns.elevatedButton('OK

Answer 2

问题在这一行:

onPressed: passwordVisible ? null : () {...}

onPressed事件仅在passwordVisible为false时调用该函数。删除三元操作符，它将调用passwordVisible是真还是假:

onPressed: () {...}