如何检测Flutter自定义TextField的onTapPasswordVisibility属性是否被使用

你已经找对了核心思路！只需要调整自定义组件里suffixIcon的判断条件，就能实现只有传入onTapPasswordVisibility时才显示密码切换图标的需求。

直接修改_CustomTextFieldOutlineState的build方法里的suffixIcon部分即可，完整修改后的代码如下：

class _CustomTextFieldOutlineState extends State<CustomTextFieldOutline> {
  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
          labelText: widget.label,
          errorText: widget.isValid ? null : widget.invalidMsg,
          errorStyle: TextStyle(color: constant.colorWhite),
          labelStyle: TextStyle(color: constant.colorWhite),
          errorBorder: underlineInputBorder,
          focusedErrorBorder: underlineInputBorder,
          enabledBorder: underlineInputBorder,
          focusedBorder: underlineInputBorder,
          // 核心修改：把判断条件从obscureText改为onTapPasswordVisibility
          suffixIcon: (widget.onTapPasswordVisibility != null)
              ? GestureDetector(
                  onTap: () {
                    widget.onTapPasswordVisibility();
                  },
                  child: Icon(
                    widget.obscureText ? Icons.visibility_off : Icons.visibility,
                    color: constant.colorWhite,
                  ),
                )
              : null),
      style: TextStyle(color: constant.colorWhite),
      controller: widget.controller,
      obscureText: (widget.obscureText != null) ? widget.obscureText : false,
      inputFormatters: (widget.formatter != null) ? widget.formatter : null,
    );
  }
}

逻辑说明： #

• 原来的判断是检查obscureText是否不为空，但这和是否需要显示切换图标没有直接关联——毕竟即使设置了obscureText，如果不需要切换功能，也没必要显示图标。
• 改成判断onTapPasswordVisibility != null后，只有当父组件传入了这个点击回调（也就是需要密码可见性切换功能时），才会渲染GestureDetector和图标；否则suffixIcon为null，不会显示任何多余元素。

你的调用代码完全不需要改动，继续像之前那样使用即可：

CustomTextFieldOutline(
  label: constant.password,
  controller: _passwordSignUpController,
  isValid: _isPasswordValid,
  invalidMsg: _passwordValidMsg,
  obscureText: _isHidePassword,
  onTapPasswordVisibility: () {
    setState(() {
      _isHidePassword = !_isHidePassword;
    });
  },
)

如果某个TextField不需要密码切换功能，只要不传入onTapPasswordVisibility参数，就不会显示右侧的图标啦～

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