如何通过继承TextField实现如下图示的密码输入框？

从需求图来看，需要实现一个带右侧图标按钮、可切换密码显示/隐藏状态的密码输入框。以下是基于Flutter的实现方案：

实现思路 #

通过创建StatefulWidget封装TextField，内部管理密码可见状态，点击右侧图标按钮时切换状态，动态修改TextField的obscureText属性，同时切换图标样式。

完整代码实现 #

import 'package:flutter/material.dart';

class PasswordTextField extends StatefulWidget {
  // 暴露TextField常用配置参数，支持自定义扩展
  final String? hintText;
  final TextStyle? style;
  final InputDecoration? decoration;
  final TextEditingController? controller;
  final ValueChanged<String>? onChanged;
  final FormFieldValidator<String>? validator;

  const PasswordTextField({
    super.key,
    this.hintText,
    this.style,
    this.decoration,
    this.controller,
    this.onChanged,
    this.validator,
  });

  @override
  State<PasswordTextField> createState() => _PasswordTextFieldState();
}

class _PasswordTextFieldState extends State<PasswordTextField> {
  // 控制密码是否可见的状态变量
  bool _isPasswordVisible = false;

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: widget.controller,
      onChanged: widget.onChanged,
      validator: widget.validator,
      style: widget.style,
      // 根据状态切换密码隐藏/显示
      obscureText: !_isPasswordVisible,
      decoration: widget.decoration ??
          InputDecoration(
            hintText: widget.hintText ?? '请输入密码',
            // 右侧密码切换图标按钮
            suffixIcon: IconButton(
              icon: Icon(
                _isPasswordVisible ? Icons.visibility : Icons.visibility_off,
                color: Colors.grey,
              ),
              onPressed: () {
                setState(() {
                  _isPasswordVisible = !_isPasswordVisible;
                });
              },
            ),
            border: const OutlineInputBorder(),
          ),
    );
  }
}

使用示例 #

在页面中直接调用该自定义组件即可：

// 定义控制器（可选）
final TextEditingController _passwordController = TextEditingController();

// 页面中使用
PasswordTextField(
  hintText: '请输入登录密码',
  controller: _passwordController,
  validator: (value) {
    if (value == null || value.isEmpty) {
      return '请输入密码';
    }
    return null;
  },
)

扩展说明 #

• 若需要自定义输入框样式，可通过decoration参数传入自定义的InputDecoration，覆盖默认样式
• 状态变量_isPasswordVisible控制密码显示状态，点击图标按钮时通过setState更新UI
• 封装的参数支持大部分TextField的常用配置，可根据需求自行添加更多参数

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