Flutter中TextField的suffixIcon未实时显示问题求助

问题根源：你当前直接在build方法里通过phone.text.length判断是否显示图标，但TextEditingController的文本变化不会自动触发Widget重建，只有手动热重载（保存代码）才会重新执行build，所以图标无法实时更新。

下面是两种可行的解决方法：

方法1：利用onChanged触发setState #

在TextField中添加onChanged回调，每当文本变化时调用setState，强制Widget重建以更新图标状态：

TextField(
  inputFormatters: [LengthLimitingTextInputFormatter(10)],
  textInputAction: TextInputAction.done,
  keyboardType: TextInputType.number,
  controller: phone,
  // 添加onChanged回调触发UI更新
  onChanged: (value) {
    setState(() {});
  },
  style: const TextStyle(
      color: Colors.white,
      fontSize: 40,
      fontWeight: FontWeight.bold),
  decoration: InputDecoration(
      hintText: "Phone Number...",
      hintStyle:
          TextStyle(color: Colors.grey.shade600, fontSize: 20),
      suffixIcon: phone.text.length == 10
          ? const Icon(
              Icons.done_outline,
              color: Colors.green,
              size: 40,
            )
          : null),
),

方法2：使用ValueListenableBuilder（更高效） #

通过ValueListenableBuilder监听TextEditingController的变化，只重建需要更新的部分（suffixIcon相关），避免整个页面重建：

ValueListenableBuilder<TextEditingValue>(
  valueListenable: phone,
  builder: (context, value, child) {
    return TextField(
      inputFormatters: [LengthLimitingTextInputFormatter(10)],
      textInputAction: TextInputAction.done,
      keyboardType: TextInputType.number,
      controller: phone,
      style: const TextStyle(
          color: Colors.white,
          fontSize: 40,
          fontWeight: FontWeight.bold),
      decoration: InputDecoration(
          hintText: "Phone Number...",
          hintStyle:
              TextStyle(color: Colors.grey.shade600, fontSize: 20),
          suffixIcon: value.text.length == 10
              ? const Icon(
                  Icons.done_outline,
                  color: Colors.green,
                  size: 40,
                )
              : null),
    );
  },
)

注意：如果使用的是无状态组件（StatelessWidget），方法1需要将组件改为有状态组件（StatefulWidget）；方法2可直接在无状态组件中使用。

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