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

发布于05月18日

我正在使用Provider进行状态管理.我所处的情况是，我的表单中有多种类型的字段.问题出在文本字段上每当我更改文本时，它的行为都很奇怪，就像输入的文本以相反的顺序显示一样.

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,
    );

}

推荐答案

之所以会发生这种情况，是因 for each 小部件构建都会创建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,
    );
  }
}