自定义NoteField组件中TextField输入后，外部变量_note始终为空的问题

Dart中的String是不可变值类型，当你把_note传入NoteField时，传递的是当前值的副本。子组件里修改widget.n只是修改了这个副本，并不会影响父组件中原始的_note变量，所以点击按钮打印_note时还是空值。

另外，直接修改widget.n本身就不符合Flutter的组件设计规范——StatefulWidget的成员变量应该是不可变的（建议用final修饰），状态变更应该通过回调或者状态管理来通知父组件。

通过回调函数让子组件把输入值传递回父组件，由父组件更新自己的状态：

1. 修改自定义NoteField组件 #

class NoteField extends StatefulWidget {
  // 用final修饰成员变量，添加回调参数
  const NoteField({Key? key, required this.initialValue, required this.onChanged}) : super(key: key);
  final String initialValue;
  final Function(String) onChanged;

  @override
  State<NoteField> createState() => _NoteFieldState();
}

class _NoteFieldState extends State<NoteField> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    // 用initialValue初始化控制器
    _controller = TextEditingController(text: widget.initialValue);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      maxLength: 40,
      onChanged: (String value) {
        // 调用回调把值传给父组件
        widget.onChanged(value);
        print(value);
      },
      decoration: InputDecoration(
        border: OutlineInputBorder(
            borderSide: BorderSide(
          color: Theme.of(context).primaryColor,
        )),
        hintText: 'Enter a label for your visit',
      ),
    );
  }
}

2. 父组件中使用NoteField #

// 父组件的状态类中
String _note = '';

// 构建Widget时
NoteField(
  initialValue: _note,
  onChanged: (value) {
    // 父组件更新自己的状态
    setState(() {
      _note = value;
    });
  },
),
// 按钮部分
ElevatedButton(
  onPressed: () {
    print(_note); // 现在能正确打印输入的内容了
  },
  child: const Text('打印Note'),
)

补充说明 #

• 使用TextEditingController可以更好地控制TextField的文本状态，也能避免直接修改widget成员变量的问题。
• 如果你的项目比较复杂，也可以使用Provider、Riverpod等状态管理工具来统一管理状态，避免多层组件间的回调嵌套。

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