当我们在flutter中更改其他文本字段时，如何自动更改标签值？

Question

我使用 TextEditingController 来获取文本字段中的更改。 使用相同的我创建了一个提交按钮，当用户单击提交按钮时，它将计算值并在最后更新标签。

下面是代码。

//main.dart
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome!!',
      home: Scaffold(
        appBar: AppBar(title: Text('scaffold appbar')),
        body: Center(
          child: CoinDetails(),
        ),
      ),
    );
  }
}

class CoinDetails extends StatefulWidget {
  @override
  _CoinDetailsState createState() => _CoinDetailsState();
}

class _CoinDetailsState extends State<CoinDetails> {
  TextEditingController coinController = TextEditingController();//replacement for onChanged event handling of a button
  TextEditingController priceController = TextEditingController();
  TextEditingController amountController = TextEditingController();
  double _price=0;
  double _amount=0;
  double _commission=0;
  double _totalCost=0;

  @override
  Widget build(BuildContext context) {
    TextStyle textStyle = Theme.of(context).textTheme.title;
    return Container(
      padding: EdgeInsets.all(15.0),
      child:Column(
        children: <Widget>[
          TextField(
            controller: coinController,
            decoration: InputDecoration(
            labelText: 'Coin',
            hintText: "e.g. BTT",
            labelStyle: textStyle,
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(5.0)
            ),
          ),
            keyboardType: TextInputType.text,
            /*onChanged: (String string){
            setState(() {
              name = string;
            });
            },*/
          ),
          TextField(
            controller: priceController,
            decoration: InputDecoration(
              labelText: 'Price',
              hintText: "e.g. BTT",
              labelStyle: textStyle,
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(5.0)
              ),
            ),
            keyboardType: TextInputType.text,
            /*onChanged: (String string){
            setState(() {
              name = string;
            });
            },*/
          ),
          TextField(
            controller: amountController,
            decoration: InputDecoration(
              labelText: 'Amount',
              hintText: "e.g. BTT purchase amount invested",
              labelStyle: textStyle,
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(5.0)
              ),
            ),
            keyboardType: TextInputType.text,
            /*onChanged: (String string){
            setState(() {
              name = string;
            });
            },*/
          ),
          RaisedButton(
              color: Theme.of(context).primaryColorDark,
              textColor: Theme.of(context).primaryColorLight,
              child: Text('Submit',textScaleFactor: 1.5),
              onPressed: (){
                setState(() {
                  _calculate();
                });
              }),

          Text("Commission: "+_commission.toString()+" Total Cost: "+_totalCost.toString()),
        ],
      ),
    );
  }
  String _calculate(){
    _price = double.parse(priceController.text);
    _amount = double.parse(amountController.text);
    _commission = _amount * 0.002;
    _totalCost = _amount + _commission;
  }
}

我想删除此提交按钮并在用户更改价格或金额文本字段或两者时自动更新值。

请指导我如何设置。

Answer 1

您可以使用TextField 小部件的onChanged 回调。每次TextField 的值发生变化时都会触发。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String name = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your name is: $name'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextFormField(
              onChanged: (String value) {
               /// The value is the value of the TextField.
               /// You can perform the calculations here:
               setState(() => name = value);
              },
              decoration: InputDecoration(
                  labelText: 'Name', hintText: 'Please enter your name'),
            ),
          ],
        ),
      ),
    );
  }
}

此外，700 的精度显示错误，而 70 和 7000 的精度显示正确。 你能检查一下吗？