如何在Flutter的自定义TextFormField中实现密码可见性切换？

问题描述 #

开发Flutter应用时，需要为TextFormField的密码字段添加眼睛图标实现密码显示/隐藏的切换功能，但在将可见性状态和切换方法从父组件（Profile）传递到自定义的CustomTextField组件时遇到困难。

当前代码片段 #

Profile.dart 核心代码 #

class _ProfileState extends State<Profile> {
  Auth _auth = Auth.signUp;
  final _signUpFormKey = GlobalKey<FormState>();
  final _signInFormKey = GlobalKey<FormState>();

  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _nameController = TextEditingController();

  @override
  void dispose() {
    super.dispose();
    _emailController.dispose();
    _passwordController.dispose();
    _nameController.dispose();
  }

  bool isHiddenPassword = true;

  // ... 其他代码
  child: Form(
    key: _signUpFormKey,
    // ...
    CustomTextField(
      controller: _passwordController,
      hintText: 'Password',
      style: GoogleFonts.nunito(
        color: const Color(0xff3B3B3B),
        fontStyle: FontStyle.normal,
        fontWeight: FontWeight.w500,
        fontSize: 20.0,
      ),
    ),
  // ...
}

custom_textfield.dart 核心代码 #

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class CustomTextField extends StatefulWidget {
  final TextEditingController controller;
  final String hintText;
  final TextStyle style;
  const CustomTextField({
    Key? key,
    required this.controller,
    required this.hintText,
    required this.style,
  }) : super(key: key);

  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: TextFormField(
        style: GoogleFonts.nunito(
          fontStyle: FontStyle.normal,
          fontWeight: FontWeight.w500,
          fontSize: 20.0,
        ),
        controller: widget.controller,
        decoration: InputDecoration(
          hintText: widget.hintText,
          border: const OutlineInputBorder(
              borderSide: BorderSide(
            color: Color(0xff3B3B3B),
          )),
          enabledBorder: const OutlineInputBorder(
            borderSide: BorderSide(
              color: Color(0xff3B3B3B),
            ),
          ),
        ),
        validator: (val) {
          return null;
        },
      ),
    );
  }
}

解决方案 #

通过扩展CustomTextField的参数，将父组件的状态和回调方法传递到子组件，具体步骤如下：

1. 扩展CustomTextField参数：添加控制密码隐藏状态、标记密码字段、切换状态回调的参数
2. 更新CustomTextField UI：根据参数显示眼睛图标并绑定切换事件
3. 父组件传递状态和回调：在Profile中管理密码可见性状态，传递给子组件并实现切换逻辑

修改后的完整代码 #

自定义CustomTextField组件 #

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class CustomTextField extends StatefulWidget {
  final TextEditingController controller;
  final String hintText;
  final TextStyle style;
  // 控制密码是否隐藏
  final bool obscureText;
  // 标记是否为密码输入框
  final bool isPasswordField;
  // 切换密码可见性的回调
  final VoidCallback? onTogglePassword;

  const CustomTextField({
    Key? key,
    required this.controller,
    required this.hintText,
    required this.style,
    this.obscureText = false,
    this.isPasswordField = false,
    this.onTogglePassword,
  }) : super(key: key);

  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: TextFormField(
        style: widget.style,
        controller: widget.controller,
        // 设置密码隐藏状态
        obscureText: widget.obscureText,
        decoration: InputDecoration(
          hintText: widget.hintText,
          border: const OutlineInputBorder(
              borderSide: BorderSide(
            color: Color(0xff3B3B3B),
          )),
          enabledBorder: const OutlineInputBorder(
            borderSide: BorderSide(
              color: Color(0xff3B3B3B),
            ),
          ),
          // 密码输入框显示眼睛图标
          suffixIcon: widget.isPasswordField
              ? InkWell(
                  onTap: widget.onTogglePassword,
                  child: Icon(
                    widget.obscureText ? Icons.visibility_off : Icons.visibility,
                    color: widget.obscureText ? const Color(0xff3B3B3B) : Colors.grey,
                  ),
                )
              : null,
        ),
        validator: (val) {
          // 可自定义密码验证逻辑
          if (val == null || val.isEmpty) {
            return '请输入密码';
          }
          if (val.length < 8) {
            return '密码长度不能少于8位';
          }
          return null;
        },
      ),
    );
  }
}

Profile组件中使用修改后的CustomTextField #

class _ProfileState extends State<Profile> {
  Auth _auth = Auth.signUp;
  final _signUpFormKey = GlobalKey<FormState>();
  final _signInFormKey = GlobalKey<FormState>();

  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _nameController = TextEditingController();

  @override
  void dispose() {
    super.dispose();
    _emailController.dispose();
    _passwordController.dispose();
    _nameController.dispose();
  }

  bool isHiddenPassword = true;

  // 切换密码可见性方法
  void _togglePasswordView() {
    setState(() {
      isHiddenPassword = !isHiddenPassword;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ... 其他UI代码
      child: Form(
        key: _signUpFormKey,
        child: Column(
          children: [
            // ... 其他输入框
            CustomTextField(
              controller: _passwordController,
              hintText: 'Password',
              style: GoogleFonts.nunito(
                color: const Color(0xff3B3B3B),
                fontStyle: FontStyle.normal,
                fontWeight: FontWeight.w500,
                fontSize: 20.0,
              ),
              obscureText: isHiddenPassword,
              isPasswordField: true,
              onTogglePassword: _togglePasswordView,
            ),
          ],
        ),
      ),
    );
  }
}

说明 #

• 通过父组件传递状态和回调，实现了密码可见性的跨组件控制
• isPasswordField参数让CustomTextField可复用为普通输入框或密码输入框
• 可根据需求调整图标样式、颜色及输入框验证逻辑

内容的提问来源于stack exchange，提问作者pomoworko.com