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: () {...}