Flutter组件间数据传递异常：TextField输入内容无法在Text组件中显示

嘿，我来帮你排查这个问题！你的代码思路是对的，但有两个关键小问题导致输入内容没法在Text组件里显示，咱们一步步来理清楚：

问题出在哪？ #

1. 错误的实例引用：你在_PronounceSt的build方法里写了Text(MyCustomForm().ninja)——这里你新建了一个完全独立的MyCustomForm实例，和页面上正在运行的那个MyCustomForm半毛钱关系都没有！这个新实例的s变量默认是空字符串，所以Text组件自然啥都不显示。
2. 缺少状态更新联动：就算你拿到了正确的MyCustomForm实例，Pronounce组件也不会自动感知到MyCustomForm里s变量的变化，因为它没有绑定到正确的状态更新机制上。

修复方案（新手友好版） #

咱们用父子组件传参的方式就能解决这个问题，这是Flutter里最基础的组件通信方式，直接看修改后的完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyCustomForm(),
    ),
  );
}

class MyCustomForm extends StatefulWidget {
  MyCustomForm({super.key});
  String s = '';
  String get ninja {
    return s;
  }

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final myController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 把当前实例的s值传递给Pronounce组件
            Pronounce(text: widget.s),
            TextField(
              controller: myController,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          widget.s = myController.text;
        }),
        child: const Icon(Icons.update),
      ),
    );
  }
}

class Pronounce extends StatelessWidget {
  // 新增接收文本参数的构造函数
  const Pronounce({super.key, required this.text});
  final String text;

  @override
  Widget build(context) {
    // 直接使用父组件传递过来的text
    return Text(text);
  }
}

关键修改点说明 #

• 把Pronounce改成了StatelessWidget（因为它现在只需要根据传入的数据渲染，自己不需要维护状态），并且给它加了一个required的text参数，用来接收父组件传递的内容。
• 在MyCustomForm的build方法里，把Pronounce()改成Pronounce(text: widget.s)，这样就把当前运行的MyCustomForm实例的s值传递给了Pronounce组件。
• 移除了Pronounce里新建MyCustomForm实例的错误代码，直接用父组件传过来的widget.text渲染Text。

这样修改后，当你点击FAB触发setState时，MyCustomForm会重新build，同时把最新的s值传递给Pronounce，Pronounce就会自动显示最新的输入内容啦～

如果以后你遇到更复杂的跨组件通信场景（比如非父子组件），可以再去了解Provider、Riverpod这类状态管理库，但先把这种基础的父子传参方式吃透，足够应付大部分简单场景了！

内容来源于stack exchange