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

qacovj5a 于 2023-09-28 发布在其他

关注(0)|答案(2)|浏览(81)

按钮图片

我定义了一个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

来源：https://stackoverflow.com/questions/59552545/how-to-i-program-a-button-to-continuously-increase-or-decrease-a-counter-when-ta

2条答案

按热度按时间

r8xiu3jd1#

为了实现您正在寻找的功能，您需要使用dart:async包中的Timer与GestureDetector的组合。下面是一个完整的样本，它看起来像什么样的基础上提供的样本图像。

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();
                    },
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-09-28

vsdwdz232#

holding_gesture包允许您实现“onHold”手势：

HoldDetector(
  holdTimeout: const Duration(milliseconds: 10),
  onHold: () {
    x--;
  },
  child: const Icon(Icons.arrow_back),
)

在上面的代码中，当图标被按下时，onHold回调将每隔10ms被调用一次。

赞(0）回复(0）举报 2023-09-28

我来回答

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

2条答案

相关问题

热门标签

最新问答