如何在 Flutter 中将 textEditiing 控制器与 Provider 一起使用

Question

我正在使用提供程序进行状态管理。我的表单中有多种类型的字段。问题在于文本字段 每当我更改文本时，它的行为都很奇怪，就像输入的文本以相反的顺序显示一样。

class MyProvider with ChangeNotifier{
  String _name;
  String get name => _name;
  setname(String name) {
    _name = name;
    notifyListeners();
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final MyProvider myProvider = Provider.of<MyProvider>(context);

    final TextEditingController _nameController = TextEditingController(
        text: myProvider.name,
    );

    return TextField(
        controller: _nameController,
        onChanged: myProvider.setname,
    );

}

Answer 1

发生这种情况是因为TextEditingController在每次构建小部件时都会创建新实例，并且有关当前光标位置 ( TextEditingValue) 的信息正在丢失。

在initState方法中创建一个控制器并在方法中处理它dispose。

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  TextEditingController _nameController;

  @override
  void initState() {
    final MyProvider myProvider = Provider.of<MyProvider>(context, listen: false);

    super.initState();
    _nameController = TextEditingController(text: myProvider.name);
  }

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

  @override
  Widget build(BuildContext context) {
    final MyProvider myProvider = Provider.of<MyProvider>(context);

    return TextField(
        controller: _nameController,
        onChanged: myProvider.setname,
    );
  }
}