为什么需要按两次按钮才能使用提供程序在 flutter 中更新状态？

Question

我刚接触 flutter 才几天。

我正在尝试使用提供者模式，发现它易于使用和理解。但是，在实现之后我发现按钮需要按两次才能更新状态。

我到处都检查过了，像双重函数调用，似乎没有什么问题。这是代码。

    class CounterPage extends StatelessWidget {

  final changeName = TextEditingController();
  final changeNumber = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final CounterBloc counterBloc = Provider.of<CounterBloc>(context);
    return Scaffold(
      appBar: 
      AppBar(
        title: Text(counterBloc.name.toString()),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: <Widget>[
              Text(
                counterBloc.counter.toString(),
                style: TextStyle(fontSize: 62.0),
              ),
              TextField(
                controller: changeName,
              ),
                TextField(
                controller: changeNumber,
              ),
              IncrementButton( changeNumber.text, changeName.text),
            ],
          ),
        ),
      ),
    );
  }
}

命名错误，增量按钮的用途是，只需传递两个字符串并使用提供程序设置到UI中的某些地方。

这就是我的增量按钮的样子，简单没什么特别的

   class IncrementButton extends StatelessWidget{

  final String name;
  final String number;
  IncrementButton(this.name, this.number);
  @override
  Widget build(BuildContext context) {
    final CounterBloc counterBloc = Provider.of<CounterBloc>(context);
    return FlatButton.icon(
      icon: Icon(Icons.add),
      label: Text("Add"),
      onPressed: ()=>counterBloc.nameAndCounter(name,number),
    );
  }

}

这就是 counterBloc 的样子

   import 'package:flutter/material.dart';

class CounterBloc extends ChangeNotifier{

  String _counter = "10";
  String _name ="Alphhit";

  String get counter => _counter;
  String get name => _name;
   nameAndCounter( String name, String digit){
    _name =  name;
    _counter = digit;

    notifyListeners();
  }
}

只有按下按钮两次才能更新和反映状态？有人可以告诉我做错了什么吗？

Answer 1

当您调用 IncrementButton( changeNumber.text, changeName.text,), 时，它将以以前的值开始，因此您必须在添加新文本时更新它。您可以使用 onChanged: (_){setState(() {});

Column( children: <Widget>[
              Text(
                counterBloc.counter,
                style: TextStyle(fontSize: 62.0),
              ),
              TextField(
                controller: changeName,
                onChanged: (_){
                  setState(() {
                  });
                },
              ),
                TextField(
                controller: changeNumber,
                onChanged: (_){
                  setState(() {
                  });
                },
              ),
              IncrementButton( changeNumber.text, changeName.text,),
            ],
          ),

或者将函数发送到按钮

    class CounterPage extends StatelessWidget {

  final changeName = TextEditingController();
  final changeNumber = TextEditingController();
  final changeName = TextEditingController();

  final changeNumber = TextEditingController();
   _updateData() {
     Provider.of<CounterBloc>(context).nameAndCounter(changeNumber.text, changeName.text);
  }

  @override
  Widget build(BuildContext context) {
    CounterBloc counterBloc = Provider.of<CounterBloc>(context);
    print(counterBloc.name);
    return Scaffold(
      appBar: AppBar(
        title: Text(counterBloc.name),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: <Widget>[
              Text(
                counterBloc.counter,
                style: TextStyle(fontSize: 62.0),
              ),
              TextField(
                controller: changeName,

              ),
              TextField(
                controller: changeNumber,

              ),
              IncrementButton(_updateData),
            ],
          ),
        ),
      ),
    );
  }
}

class IncrementButton extends StatelessWidget {
  final Function updateData;

  IncrementButton(this.updateData);
  @override
  Widget build(BuildContext context) {
    return FlatButton.icon(
      icon: Icon(Icons.add),
      label: Text("Add"),
      onPressed: updateData,
    );
  }
}

为什么需要按两次按钮才能使用提供程序在 flutter 中更新状态？

Why button needs to be pressed twice for state update in flutter using provider?

provider-model

flutter