Flutter中如何获取自定义Widget类的变量值

你当前的写法存在两个不符合Flutter设计规范的问题：

• StatelessWidget为不可变组件，内部定义可变的valor变量在组件重建时值会直接丢失
• 子组件内的状态需要向外传递时，不要在子组件内部持有需要跨组件访问的状态，通过回调传值是最直接的实现方式。

步骤1：修改自定义TextBox组件 #

删除组件内部持有的valor变量，新增值变化回调参数，输入内容变动时直接把值通过回调抛出：

import 'package:flutter/material.dart';

class TextBox extends StatelessWidget {
  final double largura;
  final double tamanhoLetra;
  // 新增回调，用于把输入值传递给父组件
  final void Function(String valor) onValorChanged;

  const TextBox({
    super.key,
    required this.largura,
    required this.tamanhoLetra,
    required this.onValorChanged,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: largura,
      child: TextField(
        style: TextStyle(
          fontSize: tamanhoLetra,
        ),
        textAlign: TextAlign.left,
        onChanged: (String text) {
          // 输入变化时触发回调，把最新值传给父组件
          onValorChanged(text);
        },
      ),
    );
  }
}

步骤2：父组件调用时接收传递的值 #

在调用TextBox的父页面（建议用StatefulWidget承载状态）定义自己的变量，通过传入的回调接收子组件抛出的值即可：

// 父组件的State类中定义用于接收输入值的变量
String targetValor = '';

// 组件树中调用TextBox的代码修改为如下形式
TextBox(
  largura: 100, 
  tamanhoLetra: 25,
  onValorChanged: (String novoValor) {
    // 接收到子组件传的最新值，赋值给自身变量
    // 状态更新需要调用setState触发页面刷新
    setState(() {
      targetValor = novoValor;
    });
  },
)

扩展方案（可选） #

如果后续你需要主动控制输入框（比如设置默认值、清空内容、主动获取值），可以用TextEditingController方案：父组件初始化Controller实例传给TextBox的TextField，后续直接通过controller.text就能随时获取当前输入内容，不需要依赖回调传值。

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