Flutter中如何获取自定义Widget内部TextField的输入值

核心实现逻辑遵循Flutter状态提升规范：子组件不维护输入状态，仅通过回调将用户输入行为抛给父组件，由父组件统一维护状态、获取输入值。

第一步：修改自定义CustomTextField组件 #

删除内部无用的value变量，新增输入回调参数，修改后代码如下：

class CustomTextField extends StatelessWidget{
  final String? text;
  final String? hint;
  // 输入变化实时回调
  final ValueChanged<String> onChanged;
  // 可选：用户提交输入时回调
  final ValueChanged<String>? onSubmitted;

  CustomTextField({
    super.key,
    this.text, 
    this.hint,
    required this.onChanged,
    this.onSubmitted,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              "$text", 
              style: TextStyle(
                fontSize: 20,
                color: Colors.deepPurple[500]
              ),
            ),
          ),
          TextField(
            onChanged: onChanged,
            onSubmitted: onSubmitted,
            decoration: InputDecoration(
                hintText: "$hint",
                focusedBorder : OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15),
                    borderSide: BorderSide(
                        color: Colors.deepPurple.shade200,
                        width: 4.0
                    )
                ),
                enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15),
                    borderSide: const BorderSide(
                        width: 2.0
                    )
                )
            ),
          )
        ],
      ),
    );
  }
}

第二步：修改父页面调用逻辑 #

父组件通过回调接收输入值，更新自身维护的状态变量，提交时可直接读取状态值：

class _CreateItemState extends State<CreateItem> {

  String? todoTitle;
  String? todoDesc;
  bool todoIsDone = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepPurple[300],
        centerTitle: true,
        title: const Text("Create TODO Items"),
      ),
      body: Container(
        child: Column(
          children: [
            CustomTextField(
              text: "Title: ",
              hint: "Write a title here ...",
              onChanged: (value) {
                setState(() {
                  todoTitle = value;
                });
              },
            ),
            CustomTextField(
              text: "Description: ",
              hint: "Write a description here ...",
              onChanged: (value) {
                setState(() {
                  todoDesc = value;
                });
              },
            ),
            TextButton(
                onPressed: () {
                  // 此处可直接获取两个输入框的最终值
                  debugPrint("标题：$todoTitle，描述：$todoDesc");
                  // 后续提交业务逻辑可直接使用这两个变量
                },
                child: Text("Submit",
                  style: TextStyle(
                    color: Colors.deepPurple[500],
                    fontSize: 20
                ),
                ))
          ],
        ),
      ),
    );
  }
}

可选适配方案 #

• 若不需要实时监听输入，仅需要用户点击回车提交时才获取值，可删除onChanged参数，仅保留onSubmitted回调即可
• 若需要给输入框设置初始值，可给CustomTextField新增String? initialValue参数，传入TextField的controller即可实现

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