我想用一个你也可以手动输入的数字做一个计数器

Posted 2023-05-07

【中文标题】我想用一个你也可以手动输入的数字做一个计数器

【英文标题】：I wanna make a counter with a number that you can also put manually

【发布时间】：2022-01-14 22:13:57

【问题描述】：

我想制作一个像每个美食应用都有的计数器。 我已经有了递增和递减函数，而且效果很好。 但是我想让那个用户也可以通过输入来输入一个特定的数字，并且递增和递减功能也可以。

我该怎么做？

这里是计数器函数

  int _counter = 0;

  _incrementCounter() 
    setState(() 
      if (isChecked = true && _counter < (widget.productDetail['stock'])) 
        _counter++;
      
    );
  

  _decrementCounter() 
    setState(() 
      if (_counter > 0) 
        _counter--;
      
    );
  

这里是柜台

Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            // Minus
                            Expanded(
                              flex: 1,
                              child: InkWell(
                                onTap: () 
                                  _decrementCounter();
                                ,
                                child: Container(
                                  alignment: Alignment.center,
                                  // padding: EdgeInsets.only(
                                  //     right: 10),
                                  child: Icon(
                                    Icons.remove,
                                    color: Color(0xffFFFFFF),
                                  ),
                                ),
                              ),
                            ),
                            // Qty Number
                            Expanded(
                              flex: 1,
                              child: Text(
                                '$_counter',
                                textAlign: TextAlign.center,
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                            // Add
                            Expanded(
                              flex: 1,
                              child: InkWell(
                                onTap: () 
                                  _incrementCounter();
                                ,
                                child: Container(
                                  alignment: Alignment.center,
                                  child: Icon(
                                    Icons.add,
                                    color: Color(0xffFFFFFF),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ), // Counter

【问题讨论】：

what article should I read for me to understand the logic? 在这里询问文章将使您的问题得到解决，因此不涉及询问资源，发布您拥有的代码并解释您在哪里挣扎

噢，好的。谢谢，我会编辑

【参考方案1】：

要获取输入，您需要将Text 替换为TextFiled 并使用TextEditingController 来处理更新

状态内的代码

 final TextEditingController controller =
      TextEditingController.fromValue(TextEditingValue(text: "0"));

  int _parseCounter() 
    return int.tryParse(controller.text) ?? 0;
  

  _incrementCounter() 
    setState(() 
      controller.text = (_parseCounter() + 1).toString();
    );
  

  _decrementCounter() 
    setState(() 
      if (_parseCounter() > 0) 
        controller.text = (_parseCounter() - 1).toString();
      
    );
  

并使用控制器将Text 小部件替换为TextField。

   TextField(
            controller: controller,
            textAlign: TextAlign.center,
            style: TextStyle(color: Colors.white),
          ),

【讨论】：

GG，朋友。谢谢你帮助我