如何在 Flutter 中使用带有 Provider 的 textEditiing 控制器

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

要将 TextField 中的文本存储到提供程序中，您需要将文本属性从控制器发送到提供程序：

_nameController.addListener(() {
    myProvider.setName(_nameController.text);
});

这也将解决您在文本字段中获取反向文本的问题

Answer 2

这是因为 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,
    );
  }
}

如何在 Flutter 中使用带有 Provider 的 textEditiing 控制器

How to use textEditiing controller with Provider in Flutter

flutter

dart

flutter-provider