在用户输入时实时从 TextFormField() 中减去 Text() 中的数字值

Question

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

当用户在 TextFormField();

中输入数字时，TextFormField() 中输入的值应该自动减去 Text() 小部件中的值

注意最终结果应该显示在同一个 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

尝试为 TextFormField 的 onChanged 属性实施此方法。希望这就是您要实现的目标。

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

在用户输入时实时从 TextFormField() 中减去 Text() 中的数字值

Subtract number value from TextFormField() with number value from Text() in real time while user is typing

math

mobile

real-time

dart

flutter