Flutter父组件调用setState后子组件TextFormField的initialValue不更新如何解决

问题的核心在于TextFormField的initialValue属性仅会在组件首次初始化时读取一次，后续即便父组件setState触发子组件重绘、传入新的initialValue值，已经完成初始化的TextFormField也不会重新读取该属性更新内容。且未绑定控制器的TextFormField会内部维护编辑状态，默认不会响应外部变量的变化，所以出现了setState执行但UI无更新的现象。

提供两种适配不同需求的实现方案：

方案1：使用hintText实现（推荐，符合原生交互规范） #

你需要的点击输入框清空提示文本的效果，本质就是输入框原生支持的占位提示功能，无需额外编写状态控制逻辑，直接替换属性即可：
修改子组件中TextFormField的配置：

TextFormField(
  textAlign: TextAlign.center,
  // 移除initialValue配置，将提示文本放到decoration的hintText中
  decoration: InputDecoration(
    hintText: initialValue,
    border: InputBorder.none,
    hintStyle: TextStyle(
        color: Colors.grey,
        fontWeight: FontWeight.bold,
        fontFamily: 'Poppins',
        letterSpacing: 1),
  ),
  // 可以移除onTap绑定，hintText会在用户输入时自动消失，若需要点击就清空可以保留onTap配置
)

该方案无需修改父组件逻辑，是此类需求的标准实现方式。

方案2：绑定TextEditingController控制内容 #

如果业务要求必须使用初始值而非提示文本，可以通过控制器主动控制输入框内容：

父组件修改： #

class _FamilyListPageState extends State<FamilyListPage> {
  // 声明控制器，设置初始文本
  final TextEditingController _searchController = TextEditingController(text: 'Search Families');

  void eraseInitialValue() {
    setState(() {
      // 直接修改控制器绑定的文本内容
      _searchController.text = '';
      print('Inside the set state');
    });
  }

  // 组件销毁时释放控制器，避免内存泄漏
  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Search Families'),
          centerTitle: true,
        ),
        backgroundColor: StaticEntry.backColor,
        body: Center(
          child: FractionallySizedBox(
            widthFactor: 0.8,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SearchInput(
                  // 传递控制器给子组件
                  controller: _searchController,
                  onTapHandler: eraseInitialValue,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

子组件修改： #

import 'package:flutter/material.dart';

class SearchInput extends StatelessWidget {
  final TextEditingController controller;
  final Function onTapHandler;

  const SearchInput({super.key, required this.controller, required this.onTapHandler});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListTile(
          leading: const Icon(
            Icons.search,
            size: 40,
          ),
          title: Container(
            child: TextFormField(
              // 绑定控制器
              controller: controller,
              textAlign: TextAlign.center,
              style: const TextStyle(
                  color: Colors.grey,
                  fontWeight: FontWeight.bold,
                  fontFamily: 'Poppins',
                  letterSpacing: 1),
              onTap: () => onTapHandler(),
            ),
          ),
        ),
      ),
    );
  }
}

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