Flutter可复用TextField无法传递数据求助

问题核心 #

自定义的CustomTextField组件输入内容无法同步到父组件的变量，导致提交数据库时拿不到有效数据，但使用原生TextField时功能正常。

错误原因 #

你在CustomTextField的onChanged中直接修改widget.textValue = value，这是无效的：
Flutter中StatefulWidget的成员变量是不可变的（即使没加final，框架也不允许修改widget的属性），修改后不会同步到父组件的chapterOpinion变量。

优化解决方案 #

方案一：利用TextEditingController直接取值（推荐，更简洁） #

既然已经给CustomTextField传递了TextEditingController，它本身就负责管理输入文本，不需要额外维护textValue变量：

1. 简化CustomTextField组件

import 'package:flutter/material.dart';
import 'package:sizer/sizer.dart';

class CustomTextField extends StatefulWidget {
  final TextEditingController controller;
  final String label;
  final int maxLines;
  final TextInputType keyboardType;

  CustomTextField({
    Key? key,
    required this.controller,
    required this.label,
    this.maxLines = 1,
    this.keyboardType = TextInputType.text,
  }) : super(key: key);

  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
  @override
  Widget build(BuildContext context) {
    return TextField(
      maxLines: widget.maxLines,
      textCapitalization: TextCapitalization.words,
      controller: widget.controller,
      cursorColor: Colors.white,
      style: const TextStyle(fontSize: 15),
      textInputAction: TextInputAction.next,
      keyboardType: widget.keyboardType,
      decoration: InputDecoration(
        hintText: widget.label,
      ),
    );
  }
}

2. 修改数据提交逻辑

直接从controller的text属性取值：

Future<void> addChapterReview() {
  return chapter_reviews
      .add({
        'anime_adaptation': animeAdaptation,
        'edited_in_france': editedInFrance,
        'link': chapterLink,
        'manga': chapterOriginalManga,
        'note': chapterNote,
        'number': chapterNumber,
        'opinion': chapterOpinionController.text, // 直接用controller取值
        'pic': chapterPic,
        'title': chapterTitle
      })
      .then((value) => print('Review ajoutée avec succès.'))
      .catchError((error) => print('Echec de l\'ajout de la review.'));
}

3. 使用组件的方式不变

CustomTextField(
  maxLines: 4,
  controller: chapterOpinionController,
  label: 'Critique du chapitre'),

方案二：通过回调同步父组件变量 #

如果需要实时同步父组件的chapterOpinion变量，可以给组件添加ValueChanged回调：

1. 修改CustomTextField组件

import 'package:flutter/material.dart';
import 'package:sizer/sizer.dart';

class CustomTextField extends StatefulWidget {
  final TextEditingController controller;
  final String label;
  final int maxLines;
  final TextInputType keyboardType;
  final ValueChanged<String>? onChanged; // 新增回调

  CustomTextField({
    Key? key,
    required this.controller,
    required this.label,
    this.maxLines = 1,
    this.keyboardType = TextInputType.text,
    this.onChanged,
  }) : super(key: key);

  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
  @override
  Widget build(BuildContext context) {
    return TextField(
      maxLines: widget.maxLines,
      textCapitalization: TextCapitalization.words,
      onChanged: (value) {
        widget.onChanged?.call(value); // 调用回调传递输入值
      },
      controller: widget.controller,
      cursorColor: Colors.white,
      style: const TextStyle(fontSize: 15),
      textInputAction: TextInputAction.next,
      keyboardType: widget.keyboardType,
      decoration: InputDecoration(
        hintText: widget.label,
      ),
    );
  }
}

2. 使用组件时更新父变量

CustomTextField(
  maxLines: 4,
  controller: chapterOpinionController,
  label: 'Critique du chapitre',
  onChanged: (value) {
    setState(() {
      chapterOpinion = value; // 父组件自己更新变量
    });
  },
),

关键原则 #

Flutter中StatefulWidget的实例是不可变的，所有状态更新必须通过回调让父组件处理，或者利用TextEditingController这类自带状态管理的类来维护数据，避免直接修改widget的属性。

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