Flutter根据点击按钮的次数添加数字

Question

我有一个 flutter 应用程序，它有一个文本字段和五个圆圈，每个圆圈都包裹在一个手势检测器中。每个圆圈中都显示了一个数字。当用户点击圆圈时，数字会显示在文本字段中。

我如何添加附加功能，以便在用户多次点击圆圈时文本字段显示总金额。如果用户点击两个不同的圆圈，总和也会显示出来。这是在文本字段上显示数字的代码

  final _formKeyDialog = GlobalKey<FormState>();

  final TextEditingController _amountController = TextEditingController();
  final int balance = 2000;
  int taps = 0;

  void incrementTaps() => taps++;

  checkData(amount) {
    if (_amountController.text.isEmpty) {
      return 'Required field';
    } else if (int.parse(amount) > balance) {
      _amountController.clear();
      return 'Amount has exceeded account balance!';
    } else {
      _amountController.text = amount;
    }
    return null;
  }

  setAmount(amount) {
    if (int.parse(amount) > balance) {
      _amountController.text = 'Amount greater than account balance!';
    } else {
      _amountController.text = amount;

      print(taps);
    }
  }

这是显示文本字段的代码

              TextFormField(
                keyboardType: TextInputType.number,
                controller: _amountController,
                validator: (value) => checkData(value),
                style: const TextStyle(
                  // color: accentColor,
                  fontSize: 15,
                  fontFamily: 'PoppinsRegular',
                ),
                decoration: InputDecoration(
                  labelText: 'Enter Amount',
                  labelStyle: const TextStyle(
                      fontSize: 14,
                      color: Colors.black45,
                      fontWeight: FontWeight.w500),
                  // fillColor: Color(0xffFFFFFF),
                  border: InputBorder.none,
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8.0),
                    borderSide: const BorderSide(
                      // color: pinBoxColor,
                      width: 2.0,
                    ),
                  ),
                ),
              ),

显示圆圈的代码

              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  GestureDetector(
                    onTap: () {
                      incrementTaps();
                      setAmount('50');
                    },
                    child: Container(
                      height: 40,
                      width: 40,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Color(0xffFFFFFF),
                        border: Border.all(
                          color: Color(0xffDBDBDB),
                          width: 1,
                        ),
                      ),
                      child: const Center(
                        child: Text(
                          "50",
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  GestureDetector(
                    onTap: () {
                      incrementTaps();
                      setAmount('100');
                    },
                    child: Container(
                      height: 40,
                      width: 40,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Color(0xffFFFFFF),
                        border: Border.all(
                          color: Color(0xffDBDBDB),
                          width: 1,
                        ),
                      ),
                      child: const Center(
                        child: Text(
                          "100",
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  GestureDetector(
                    onTap: () {
                      incrementTaps();
                      setAmount('150');
                    },
                    child: Container(
                      height: 40,
                      width: 40,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Color(0xffFFFFFF),
                        border: Border.all(
                          color: Color(0xffDBDBDB),
                          width: 1,
                        ),
                      ),
                      child: const Center(
                        child: Text(
                          "150",
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  GestureDetector(
                    onTap: () {
                      incrementTaps();
                      setAmount('250');
                    },
                    child: Container(
                      height: 40,
                      width: 40,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Color(0xffFFFFFF),
                        border: Border.all(
                          color: Color(0xffDBDBDB),
                          width: 1,
                        ),
                      ),
                      child: const Center(
                        child: Text(
                          "250",
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  GestureDetector(
                    onTap: () {
                      incrementTaps();
                      setAmount('1000');
                    },
                    child: Container(
                      height: 40,
                      width: 40,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Color(0xffFFFFFF),
                        border: Border.all(
                          color: Color(0xffDBDBDB),
                          width: 1,
                        ),
                      ),
                      child: const Center(
                        child: Text(
                          "1000",
                        ),
                      ),
                    ),
                  ),
                ],
              ),

Answer 1

final _formKeyDialog = GlobalKey<FormState>();

  final TextEditingController _amountController = TextEditingController();
  final int balance = 2000;
  int taps = 0;
  int finalAmount = 0;

  void incrementTaps() => taps++;

  checkData(amount) {
    if (_amountController.text.isEmpty) {
      return 'Required field';
    } else if (int.parse(amount) > balance) {
      _amountController.clear();
      return 'Amount has exceeded account balance!';
    } else {
       _amountController.text = amount;
    }
    return null;
  }

  setAmount(amount) {
    if (int.parse(amount) > balance) {
      _amountController.text = 'Amount greater than account balance!';
    } else {
      finalAmount += amount;
      _amountController.text = finalAmount;

      print(taps);
    }
  }

Answer 2

试试下面的代码希望对你有帮助。您还可以使用 InkWell 小部件 Here

为 TextEditingController 创建一个变量

 var yourValue = TextEditingController();

您的小工具

  Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            controller: txt,
          ),
          SizedBox(
            height: 30,
          ),
          Row(
            children: [
              InkWell(
                onTap: () {
                  yourValue.text = "250";
                },
                child: Container(
                  height: 40,
                  width: 40,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xffFFFFFF),
                    border: Border.all(
                      color: Color(0xffDBDBDB),
                      width: 1,
                    ),
                  ),
                  child: const Center(
                    child: Text(
                      "250",
                    ),
                  ),
                ),
              ),
              SizedBox(
                width: 10,
              ),
              InkWell(
                onTap: () {
                  yourValue.text = "350";
                },
                child: Container(
                  height: 40,
                  width: 40,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xffFFFFFF),
                    border: Border.all(
                      color: Color(0xffDBDBDB),
                      width: 1,
                    ),
                  ),
                  child: const Center(
                    child: Text(
                      "350",
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),

当我点击 250 圈时你的结果屏幕->

我点击 350 圈时的结果屏幕->

Flutter根据点击按钮的次数添加数字

Flutter add number according to how many times button has been tapped

counter

flutter