Flutter中pin_code_text_field控制密文的布尔值无法实时更新

问题原因 #

pin_code_text_field组件本身未对hideCharacter属性做状态变更监听，setState更新变量后组件不会主动触发重绘，只有获得焦点时才会重新读取属性值，导致状态变更不实时。

解决方案 #

方案1（最简单通用）

给PinCodeTextField绑定和pinWasObscured关联的ValueKey，变量变更时强制组件重建，实时生效：

bool pinWasObscured = true;

Row(
  children: [
    PinCodeTextField(
      // 新增此行即可
      key: ValueKey(pinWasObscured),
      maxLength: 4,
      hideCharacter: pinWasObscured,
      highlight: true,
      highlightAnimation: true,
      highlightAnimationBeginColor: Colors.black,
      highlightAnimationEndColor: Colors.white,
      highlightAnimationDuration: Duration(seconds: 5),
      highlightColor: Color(0xFFF37021),
      pinBoxDecoration: ProvidedPinBoxDecoration.underlinedPinBoxDecoration,
      maskCharacter: "*",
      pinTextStyle: TextStyle(
        fontSize: 15.sp,
        fontWeight: FontWeight.bold,
      ),
      pinBoxWidth: SizeConfig.blockSizeHorizontal! * 12,
      pinBoxHeight: SizeConfig.blockSizeHorizontal! * 10,
      autofocus: false,
      controller: pinController,
      defaultBorderColor: Colors.black26,
    ),
    SizedBox(width: 10),
    IconButton(
      icon: pinWasObscured
          ? Icon(Icons.visibility_off_outlined)
          : Icon(Icons.visibility_outlined),
      onPressed: () {
        setState(() {
          pinWasObscured = !pinWasObscured;
        });
      },
    ),
  ],
),

方案2（保留输入状态不重建组件）

如果不希望组件重建清空已输入的内容，可以在状态更新后主动触发控制器刷新，让组件重新渲染：

onPressed: () {
  setState(() {
    pinWasObscured = !pinWasObscured;
  });
  // 手动触发组件刷新，不会修改已输入内容
  pinController.text = pinController.text;
},

内容的提问来源于stack exchange，提问作者Phanindra