在按钮单击时更新颤动中的文本字段

Question

我正在开发一个关于颤振的应用程序，在主屏幕上我有一个按钮可以打开另一个屏幕，该屏幕位于方法内。在那个屏幕上，我想做一些计算，比如接受用户输入和更新文本字段，单击按钮时调用的方法 calculateAmount 会更新反映在文本字段上的变量 total但是文本字段没有更新，它只会在键盘上按下完成时更新......如何完成这项任务。 这是我的代码：

    import 'package:flutter/material.dart';
    void main() {

      runApp(new MaterialApp(
          debugShowCheckedModeBanner: false,
        home: new homePage()
      ));
    }

    class homePage extends StatefulWidget {

      @override
      homePageState  createState() => new homePageState();
    }
    class homePageState extends State<homePage> {

    double metal = 0.0;
    double total = 0.0;

      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text("APP-Title",), backgroundColor: Colors.orange),
           body: new Container(
            child: new Center(
                child: new Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[

                    new Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[

                        new Expanded(child: new RaisedButton.icon(
                          color: Colors.orange,
                          icon: const Icon(
                            Icons.info, size: 25.0, color: Colors.white,),
                          label: new Text('Calculate', style: new TextStyle(
                              color: Colors.white
                              )),
                          onPressed: () {
                            calculateWindow();
                          ),),
                   ],
                )
              ],
            )
        ),
      ),
    );
  }
 void calculateWindow(){
    Navigator.of(context).push(
      new MaterialPageRoute(
        builder: (context) {
          return new Scaffold(
            appBar: new AppBar(
              title: new Text('Calculator'),
              backgroundColor: Colors.orange,
            ),
            body: new ListView(
              children: <Widget>[

                new Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    new Container(
                      height: 50.0,
                      width: 360.0,
                      decoration: new BoxDecoration(
                        color: Colors.orange,
                        shape: BoxShape.rectangle,
                      ),
                      child: new Center(
                        child: new Row(
                          children: <Widget>[
                            new Expanded(
                              child: new Container(
                                child:  new Text("Gold & Silver in Sold & Ornaments",
                                  style: textStyle,
                                  textAlign: textAlign
                                ),
                              ),
                            ),
                            new Container(
                              height: 40.0,
                              width: 80.0,
                              decoration:  new BoxDecoration(
                                  color: Colors.white),
                              child: new TextField(
                                  keyboardType: TextInputType.number,
                                  onSubmitted : (String value) {
                                    try {
                                      metal = double.parse(value.toString());
                                      print(total);
                                    } catch (exception) {
                                      metal = 0.0;
                                    }
                                  }
                              ),
                            ),
                          ],
                        ),
                      ),
                      ),

                  ],
                new Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    new Expanded(
                      child: new Container(
                          width: 50.0,
                          child: new RaisedButton.icon(
                            color: Colors.grey,
                            icon: const Icon(
                              Icons.check, size: 25.0, color: Colors.white,),
                            label: new Text('Calculate', style: new TextStyle(
                                color: Colors.white,
                               )),
                            onPressed: calculateAmount,
                          ),
                      ),
                    ),
                  ],
                ),
                new Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    new Container(
                      height: 50.0,
                      width: 350.0,
                      decoration: new BoxDecoration(
                        color: Colors.blueGrey,
                        shape: BoxShape.rectangle,
                      ),
                      child: new Center(
                        child: new Row(
                          children: <Widget>[
                            new Expanded(
                              child: new Container(
                                child:  new Text("Total Amount:",
                                  style: new TextStyle(
                                  color: Colors.white,),
                                  textAlign: TextAlign.left,),
                              ),
                            ),
                            new Container(

                              child: new Text(
                                '$total',
                                textAlign: TextAlign.left,
                                overflow: TextOverflow.ellipsis,
                                style: textStyle,
                                textDirection: TextDirection.ltr,
                              )
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          );
        },
      ),
    );
  }
 void calculateAmount(){

    setState((){
      total =  metal + 0.025;

    });
  }
}

Answer 1

我不太明白您想要的输出是什么，但这个示例可能有助于向您展示代码中哪里出了问题。

class TextFieldEx extends StatefulWidget {
  @override
  _TextFieldExState createState() => new _TextFieldExState();
}

class _TextFieldExState extends State<TextFieldEx> {
  TextEditingController _c ;
  double _metal = 0.0;
  double _total = 0.0;
  String _text = "initial";
  @override
  void initState() {
      _c = new TextEditingController();
      super.initState();
    }

  @override
  void dispose(){
   _c?.dispose();
   super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new TextField(
              keyboardType: TextInputType.number,
              onChanged: (v)=>setState((){_text=v;}),
              controller: _c,
            ),
            new RaisedButton(
              child: new Text("Update"),
              onPressed: (){
                setState((){
                  _metal = double.parse(_c.text);
                  _total = _metal+0.025;
                  _c.text = "";
                });
              },
            ),
            new Text("Text Input: $_text"),
            new Text("Metal :$_metal"),
            new Text("Total:$_total")
          ],
        )
      )
    );
  }
}

Answer 2

你的代码有很多问题。

1. 如果您想从 TextField 读取数据，请使用控制器。
2. On Button Pressed 在 setState() 方法中进行计算。
3. 由于您想在文本中再次显示计算值，您必须创建一个 StateFullWidget 以便在调用 setState() 时重新渲染并显示更新后的值。

希望对你有帮助。