Flutter中实现TextField与Dynamic_Game_Preview同步更新问题

你的代码里，每次输入字符都会触发onChanged，然后调用addNames()——这个方法会清空输入框并把当前单个字符加入names列表，导致每个字符都单独生成一个预览条目，完全偏离了“同步更新”的需求。

要实现TextField内容和Dynamic_Game_Preview的实时同步，分两种场景处理：

场景1：实时预览当前输入内容 #

只需要在输入时同步显示当前完整的输入文本，不需要保存历史条目：

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:pet_store/widgets/dynamic_game_preview.dart';
import 'main.dart';

class Dynamic_Game extends StatefulWidget {
  const Dynamic_Game({Key? key}) : super(key: key);

  @override
  State<Dynamic_Game> createState() => _Dynamic_GameState();
}

class _Dynamic_GameState extends State<Dynamic_Game> {
  final TextEditingController nameController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.indigo,
        title: const Text('Dynamic Game'),
        leading: GestureDetector(
          child: const Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
          ),
          onTap: () {
            Navigator.pushAndRemoveUntil(
              context,
              MaterialPageRoute(
                builder: (BuildContext context) => const HomePage(),
              ),
              (route) => false,
            );
          },
        ),
      ),
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Center(
          child: Column(
            children: <Widget>[
              const SizedBox(height: 20),
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 30),
                child: TextField(
                  controller: nameController,
                  // 输入变化时触发UI更新，同步显示当前文本
                  onChanged: (value) => setState(() {}),
                  decoration: const InputDecoration(
                    labelText: 'Enter a Pet Name',
                  ),
                ),
              ),
              const SizedBox(height: 10),
              // 输入不为空时显示预览
              if (nameController.text.isNotEmpty)
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
                  child: Dynamic_Game_Preview(nameController.text),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

场景2：保存历史条目+实时预览当前输入 #

如果需要保留之前输入的内容，同时实时预览当前正在输入的文本：

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:pet_store/widgets/dynamic_game_preview.dart';
import 'main.dart';

class Dynamic_Game extends StatefulWidget {
  const Dynamic_Game({Key? key}) : super(key: key);

  @override
  State<Dynamic_Game> createState() => _Dynamic_GameState();
}

class _Dynamic_GameState extends State<Dynamic_Game> {
  final TextEditingController nameController = TextEditingController();
  List<String> names = [];

  // 点击按钮时添加当前输入到历史列表
  void addName() {
    final input = nameController.text.trim();
    if (input.isNotEmpty) {
      setState(() {
        names.add(input);
        nameController.clear();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.indigo,
        title: const Text('Dynamic Game'),
        leading: GestureDetector(
          child: const Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
          ),
          onTap: () {
            Navigator.pushAndRemoveUntil(
              context,
              MaterialPageRoute(
                builder: (BuildContext context) => const HomePage(),
              ),
              (route) => false,
            );
          },
        ),
      ),
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Center(
          child: Column(
            children: <Widget>[
              const SizedBox(height: 20),
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 30),
                child: TextField(
                  controller: nameController,
                  // 输入变化时实时更新预览
                  onChanged: (value) => setState(() {}),
                  decoration: const InputDecoration(
                    labelText: 'Enter a Pet Name',
                  ),
                ),
              ),
              const SizedBox(height: 10),
              // 添加按钮，手动保存当前输入
              ElevatedButton(
                onPressed: addName,
                child: const Text('Add Pet Name'),
              ),
              const SizedBox(height: 10),
              // 当前输入的实时预览
              if (nameController.text.isNotEmpty)
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
                  child: Dynamic_Game_Preview(nameController.text),
                ),
              const SizedBox(height: 10),
              // 历史条目列表
              Flexible(
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: names.length,
                  itemBuilder: (_, index) {
                    return Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
                      child: Dynamic_Game_Preview(names[index]),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

核心要点： #

1. 实时同步的关键是在onChanged里调用setState()，触发UI重新渲染，直接用nameController.text获取当前输入值。
2. 绝对不要在onChanged里执行清空输入框、修改列表这类操作——这会打断输入流程，导致每个字符被单独处理。
3. 如果需要保存多条数据，用按钮手动触发添加，而不是输入过程中自动执行。

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