Flutter如何在TextField右侧添加点击切换密码显隐的图标

现有代码的两个核心问题：

• 眼睛图标作为Row的第一个子组件放置，因此显示在输入框左侧
• 未配置密码显隐状态控制、图标点击交互逻辑

实现步骤：

• 将当前组件转换为StatefulWidget，在State类中新增布尔状态变量_obscurePwd = true，默认隐藏密码内容
• 移除Row内单独放置的Icon组件，直接使用TextFormField内置的suffixIcon属性配置右侧末尾图标，无需手动调整布局即可固定在输入框最右侧
• 给图标添加点击回调，点击时通过setState切换_obscurePwd的状态值
• 将TextFormField的obscureText属性绑定到_obscurePwd，同时根据状态值切换眼睛图标样式：密码隐藏时显示带斜杠的关闭图标，明文显示时展示正常眼睛图标
• 移除多余的Row嵌套，避免输入框宽度适配异常

修正后可直接运行的代码：

// State类中定义状态变量
bool _obscurePwd = true;

@override
Widget build(BuildContext context) {
  return Container(
    height: MediaQuery.of(context).size.height * 0.08,
    margin: const EdgeInsets.symmetric(horizontal: 5),
    decoration: BoxDecoration(
      color: const Color(0xFFEFEDED),
      border: Border.all(color: Colors.transparent),
      borderRadius: BorderRadius.circular(10),
    ),
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      child: TextFormField(
        controller: controller,
        obscureText: _obscurePwd,
        keyboardType: isUrl ? TextInputType.url : TextInputType.text,
        decoration: InputDecoration(
          border: InputBorder.none,
          suffixIcon: IconButton(
            onPressed: () {
              setState(() {
                _obscurePwd = !_obscurePwd;
              });
            },
            icon: Icon(
              _obscurePwd ? Icons.visibility_off : Icons.visibility,
              color: Colors.grey,
            ),
          ),
        ),
      ),
    ),
  );
}

若不需要密码隐藏能力，仅需将obscureText固定为false即可，图标交互逻辑可按需保留。

效果参考图：

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