Flutter 我如何编程一个按钮，在点击和保持时连续增加或减少计数器？

按钮图像

我已经定义了一个RoundIconButton来增加用户点击按钮时的计数。 如果用户需要将计数增加50，则必须点击50次

当用户点击并按住时，如何更改按钮以持续增加计数

int age = 20;

RoundIconButton(
 icon: FontAwesomeIcons.plus,
 onPressed: () {
 setState(() {
 age++;
});

class RoundIconButton extends StatelessWidget {
  RoundIconButton({@required this.icon, @required this.onPressed});

  final IconData icon;
  final Function onPressed;

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      child: Icon(icon),
      onPressed: onPressed,
      elevation:
      6.0, // will show only when onpress is defined. it is disabled by default.
      shape: CircleBorder(),
      fillColor: Color(0xFF4C4F5E),
      constraints: BoxConstraints.tightFor(
        width: 56.0,
        height: 56.0,
      ),
    );
  }
}

---

为了实现您想要的功能，您需要将

dart:async

包中的

Timer

与

gesturedector

组合使用。下面是基于您提供的示例图像的完整示例

class WeightSelect extends StatefulWidget {
  @override
  _WeightSelectState createState() => _WeightSelectState();
}

class _WeightSelectState extends State<WeightSelect> {
  Timer _timer;
  var _weight = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(16.0),
          decoration: BoxDecoration(
            color: Colors.grey.shade600,
            borderRadius: BorderRadius.circular(20.0)
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text("Weight".toUpperCase(),style: TextStyle(
                fontSize: 24.0,
                fontWeight: FontWeight.w500,
                color: Colors.indigo,
              ),),
              const SizedBox(height: 10.0),
              Text("$_weight",style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 30.0,
              ),),
              const SizedBox(height: 10.0),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  GestureDetector(
                    child: Container(
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Colors.blue,
                      ),
                      width: 60,
                      height: 60,
                      child: Center(
                          child: Container(
                            color: Colors.white,
                            width: 20,
                            height: 5.0,
                          ),
                      ),
                    ),
                    onTap: (){
                      setState(() {
                        if(_weight > 0 ) _weight--;
                      });
                    },
                    onTapDown: (TapDownDetails details) {
                      print('down');
                      _timer = Timer.periodic(Duration(milliseconds: 100), (t) {
                        setState(() {
                          if(_weight > 0 )
                          _weight--;
                        });
                        print('value $_weight');
                      });
                    },
                    onTapUp: (TapUpDetails details) {
                      print('up');
                      _timer.cancel();
                    },
                    onTapCancel: () {
                      print('cancel');
                      _timer.cancel();
                    },
                  ),
                  const SizedBox(width: 10.0),
                  GestureDetector(
                    child: Container(
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Colors.blue,
                      ),
                      width: 60,
                      height: 60,
                      child: Center(
                          child: Icon(Icons.add,size: 40.0, color: Colors.white,),
                      ),
                    ),
                    onTap: (){
                      setState(() {
                        _weight++;
                      });
                    },
                    onTapDown: (TapDownDetails details) {
                      print('down');
                      _timer = Timer.periodic(Duration(milliseconds: 100), (t) {
                        setState(() {
                          _weight++;
                        });
                        print('value $_weight');
                      });
                    },
                    onTapUp: (TapUpDetails details) {
                      print('up');
                      _timer.cancel();
                    },
                    onTapCancel: () {
                      print('cancel');
                      _timer.cancel();
                    },
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class WeightSelect扩展StatefulWidget{
@凌驾
_WeightSelectState createState（）=>\u WeightSelectState（）；
}
类_WeightSelectState扩展状态{
定时器(u定时器),；
var _权重=0；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：中(
子：容器(
填充：常数边集全部（16.0），
装饰：盒子装饰(
颜色：Colors.grey.shade600，
边界半径：边界半径。圆形（20.0）
),
子：列(
mainAxisSize:mainAxisSize.min，
儿童：[
Text（“Weight”.toUpperCase（），样式：TextStyle(
字体大小：24.0，
fontWeight:fontWeight.w500，
颜色：颜色，靛蓝，
),),
const SizedBox（高度：10.0），
文本（$\u权重），样式：TextStyle(
颜色：颜色，白色，
fontWeight:fontWeight.bold，
字体大小：30.0，
),),
const SizedBox（高度：10.0），
划船(
mainAxisSize:mainAxisSize.min，
儿童：[
手势检测器(
子：容器(
装饰：盒子装饰(
形状：BoxShape.circle，
颜色：颜色，蓝色，
),
宽度：60，
身高：60，
儿童：中心(
子：容器(
颜色：颜色，白色，
宽度：20，
身高：5.0，
),
),
),
onTap:（）{
设置状态（）{
如果（_权重>0）_权重--；
});
},
onTapDown：（tappdown详细信息）{
打印（“向下”）；
_计时器=计时器。周期性（持续时间（毫秒：100），（t）{
设置状态（）{
如果（_权重>0）
_重量--；
});
打印（'value$_weight'）；
});
},
onTapUp：（TapUpDetails）{
打印（‘向上’）；
_timer.cancel（）；
},
onTapCancel:（）{
打印（“取消”）；
_timer.cancel（）；
},
),
常量大小框（宽度：10.0），
手势检测器(
子：容器(
装饰：盒子装饰(
形状：BoxShape.circle，
颜色：颜色，蓝色，
),
宽度：60，
身高：60，
儿童：中心(
子：图标（Icons.add，大小：40.0，颜色：Colors.white，），
),
),
onTap:（）{
设置状态（）{
_权重++；
});
},
onTapDown：（tappdown详细信息）{
打印（“向下”）；
_计时器=计时器。周期性（持续时间（毫秒：100），（t）{
设置状态（）{
_权重++；
});
打印（'value$_weight'）；
});
},
onTapUp：（TapUpDetails）{
打印（‘向上’）；
_timer.cancel（）；
},
onTapCancel:（）{
打印（“取消”）；
_timer.cancel（）；
},
),
],
),
],
),
),
),
);
}
}

谢谢！这就是我要找的！很高兴这有帮助。一定要接受答案如果这能解决你的问题，对其他人会有帮助。