math - 用户键入时，实时从TextFormField()中减去数字值从Text()中减去

Question

我有一个Text()小部件和一个带有TextFormField()的TextInputType.number小部件。我想要的是，当用户输入TextFormField() 减法时，应该实时进行。

当用户在TextFormField()中键入数字时，在Text()中输入的值应自动减去TextFormField()小部件内的值；

注意最终结果应显示在同一Text()小部件中，因为所有这些键入和减法都在进行。

import 'package:flutter/material.dart';

class ChangeValuesPage extends StatefulWidget {

  @override
  _ChangeValuesPageState createState() {
    return _ChangeValuesPageState();
  }
}

class _ChangeValuesPageState extends State<ChangeValuesPage> {

  final pureNumbers = RegExp(r'^[0-9]+$');

  int numberValue = 200;
  int latestNumberValue;

  final formKey = new GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appbar(context, 'Simple App', 'otherData'),
      drawer: TopDrawer(),
      body: SingleChildScrollView(
        child: new Card(
          child: Padding(
            padding: EdgeInsets.all(5.0),
            child: new Column(
              children: <Widget>[
/**
 * Below is the Text() field where subtraction math should occure.
 */
/// The value in the Text() widget should be subtracted automatically with 
/// the number values inside the TextFormField() widget automatically as the user is typing the numbers
                Text(
                  'Number value text: ${this.numberValue}',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(
                  height: 6,
                ),
                new Form(
                  key: formKey,
                  child: new Column(
                    children: <Widget>[
                      TextFormField(
                        keyboardType: TextInputType.number,
                        decoration: new InputDecoration(
                          labelText: 'Reduce number value?',
                          hintText: 'Default number value is "0"',
                        ),
                        validator: (val) {
                          if (val.isEmpty == true) {
                            return 'Fill in number values';
                          }
                          if (pureNumbers.hasMatch(val) == false) {
                            return 'Use alphanumeric characters only in nickname';
                          }
                          return null;
                        },
                        onSaved: (val) => this.latestNumberValue = int.parse(val),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

我尝试了不同的方法来实现此目的，但是没有任何效果。谢谢，贴着爱。

Answer 1

尝试针对onChanged的TextFormField属性实现此功能。希望这是您要实现的目标。

onChanged: (val) {
  if (val.isEmpty) {
    setState(() => numberValue = 200);
  } else {
    numberValue = 200;
    setState(() => numberValue -= int.parse(val));
  }
},