如何使用 Provider 包监听 TextField 的变化？

Question

我正在重新编写一个非常简单的计算平均值的应用程序，但是我很难使用 Provider 包。我想将业务逻辑移出负责创建小部件的文件。我想使用 Provider 包。

好的，我有负责构建布局的文件，但我想听听 TextField 小部件的变化。我如何有效地做到这一点？我有另一个文件，它是一个提供程序类，它将监听这个 TextField 小部件的变化。但是，我不想在 main.dart 文件中创建 ChangeNotifierProvider，因为我想要一个本地状态。我想将 TextField 的值传递给提供程序类。

我的应用如下所示：

代码：

布局：

import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:provider/provider.dart';

import '../providers/arithmetic_average.dart';

class ArithmeticAverageScreen extends StatefulWidget {
  @override
  _ArithmeticAverageScreenState createState() => _ArithmeticAverageScreenState();
}


class _ArithmeticAverageScreenState extends State<ArithmeticAverageScreen> {

  final _textFieldController = TextEditingController();

  var _grades = List<Widget>();

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
          create: (context) => ArithmeticAverageProvider(),
          child: Scaffold(
        appBar: AppBar(
          title: Text('arithmetic_average_title').tr(),
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: ListView(
            children: <Widget>[
              Card(
                child: Container(
                  padding: EdgeInsets.symmetric(vertical: 20.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      ListTile(
                        leading: Icon(Icons.help),
                        title: Text('arithmetic_average_help').tr(),
                        subtitle: Text('arithmetic_average_help_content').tr(),
                      )
                    ],
                  ),
                ) 
              ),
              SizedBox(height: 16.0),
              Card(
                child: Container(
                  padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Text('arithmetic_average_your_grades', style: Theme.of(context).textTheme.headline5).tr(),
                      SizedBox(height: 16.0),
                      Text('arithmetic_average_grades_one_at_a_time', style: Theme.of(context).textTheme.headline6,).tr(),
                      SizedBox(height: 16.0),
                      Row(
                        children: <Widget>[
                          Container(
                            width: 60.0,
                            child: TextField(
                              controller: _textFieldController,
                              keyboardType: TextInputType.numberWithOptions(
                                decimal: true
                              ),
                              decoration: InputDecoration(
                                hintText: '5',
                                labelText: 'arithmetic_average_grade'.tr()
                              ),
                            ),
                          ),
                          SizedBox(width: 20.0,),
                          RaisedButton(
                            onPressed: () {
                            },
                            color: Colors.teal[300],
                            textColor: Colors.white,
                            child: Text('arithmetic_average_add_button').tr(),
                          ),
                        ],
                      ),
                      SizedBox(height: 16.0,),
                      Wrap(
                        children: _grades,
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        )
      ),
    );
  }
}

提供者：

import 'package:flutter/material.dart';

class ArithmeticAverageProvider extends ChangeNotifier {

}

Answer 1

TextField "onChange" 应该调用 "ArithmeticAverageProvider()" 中的一个方法，该方法调用 "NotifyListeners()"。