Flutter自定义MyTextField组件onChanged事件未触发的原因及解决方法

我在Flutter(version 3.7.11)中定义了如下自定义组件：

// ignore_for_file: prefer_typing_uninitialized_variables

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

class MyTextField extends StatelessWidget {
  final controller;
  final String hintText;
  final bool obscureText;
  final Icon prefixIcon;
  final Function()? onChanged;

  const MyTextField(
      {super.key,
      required this.controller,
      required this.hintText,
      required this.obscureText,
      required this.prefixIcon,
      this.onChanged});

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
      obscureText: obscureText,
      cursorColor: HexColor("#4f4f4f"),
      decoration: InputDecoration(
        hintText: hintText,
        fillColor: HexColor("#f0f3f1"),
        contentPadding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
        hintStyle: GoogleFonts.poppins(
          fontSize: 15,
          color: HexColor("#8d8d8d"),
        ),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(30),
          borderSide: BorderSide.none,
        ),
        prefixIcon: prefixIcon,
        prefixIconColor: HexColor("#4f4f4f"),
        filled: true,
      ),
    );
  }
}

使用该组件的代码如下：

import 'package:flutter/material.dart';
import 'package:untitled4/my_textfield.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    void validatePhone() {
      print("object");
    }

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body:
      SafeArea(
          child:MyTextField(
              controller: null,
              onChanged: ()=>validatePhone(),
              hintText: 'dddd',
            obscureText: false,
            prefixIcon: const Icon(Icons.phone_android_outlined)
            )
      )),
    );
  }
}

依赖版本：

hexcolor: ^3.0.1
google_fonts: ^3.0.1

我发现MyTextField的onChanged事件未触发，请问这是什么原因？遗漏了什么？该如何修复？

原因分析 #

• 未绑定回调到原生TextField：自定义MyTextField类虽然定义了onChanged参数，但在构建内部原生TextField时，没有将这个回调传递给原生组件的onChanged属性，导致输入变化时无触发逻辑。
• 参数类型不匹配：原生TextField的onChanged回调类型是void Function(String)?，但你定义的是Function()?，即使绑定也无法正确接收输入内容，还会引发类型警告。

修复步骤 #

1. 修正自定义组件的onChanged参数类型 #

将MyTextField中的onChanged参数类型改为和原生TextField一致：

final void Function(String)? onChanged;

2. 将回调绑定到原生TextField #

在build方法的TextField中添加onChanged属性，传递自定义组件的参数：

return TextField(
  controller: controller,
  obscureText: obscureText,
  cursorColor: HexColor("#4f4f4f"),
  // 新增这一行绑定回调
  onChanged: onChanged,
  decoration: InputDecoration(
    // 原有代码不变
  ),
);

3. （可选）优化controller类型定义 #

为了代码规范，给controller指定明确类型，消除类型警告：

final TextEditingController? controller;

修复后的完整MyTextField代码 #

// ignore_for_file: prefer_typing_uninitialized_variables

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

class MyTextField extends StatelessWidget {
  final TextEditingController? controller;
  final String hintText;
  final bool obscureText;
  final Icon prefixIcon;
  final void Function(String)? onChanged;

  const MyTextField(
      {super.key,
      required this.controller,
      required this.hintText,
      required this.obscureText,
      required this.prefixIcon,
      this.onChanged});

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
      obscureText: obscureText,
      cursorColor: HexColor("#4f4f4f"),
      onChanged: onChanged,
      decoration: InputDecoration(
        hintText: hintText,
        fillColor: HexColor("#f0f3f1"),
        contentPadding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
        hintStyle: GoogleFonts.poppins(
          fontSize: 15,
          color: HexColor("#8d8d8d"),
        ),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(30),
          borderSide: BorderSide.none,
        ),
        prefixIcon: prefixIcon,
        prefixIconColor: HexColor("#4f4f4f"),
        filled: true,
      ),
    );
  }
}

调用代码调整（可选） #

如果需要获取输入内容，可以修改validatePhone方法接收字符串参数：

void validatePhone(String value) {
  print("输入内容：$value");
}

调用时直接传递方法即可：

onChanged: validatePhone,

或者保持原有写法也能正常触发：

onChanged: (value) => validatePhone(),

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