JavaFx实现倒计时按钮组件(类似发送激活码)

本文基于TornadoFx框架进行编写,封装工具代码是kotlin版本

然后也是顺便把这个封装成了stars-one/common-controls
里的xCountDownBtn

效果

思路

点击按钮的时候,将当前按钮设置为禁用状态,之后开启一个线程去倒计时,间隔1s修改一下按钮的文本文字,当倒计时结束的时候,将按钮从禁用状态改为正常状态即可

在JavaFx中,由于提供了对应的观察者模式,按钮的文本和禁用状态都是与某个数据绑定,之后修改这个数据即可实现修改文本和状态的功能,还是挺方便的

下面的是简单的源代码

代码

//倒计时的按钮提示
val tip = "发送验证码"
val codeTip = SimpleStringProperty(tip)
val time = SimpleIntegerProperty(0)

jfxbutton(codeTip) {
    disableWhen { time.greaterThan(0) }

    time.addListener { _, _, newValue ->
        runLater {
            if (newValue == 0) {
                codeTip.value = tip
            } else {
                codeTip.value = "$tip $newValue"
            }
        }
    }
    action {
       
        //todo 你的逻辑..
        
        time.value = 60
        
        runAsync {
            repeat(60) {
                runLater {
                    time.value = time.value - 1
                }
                Thread.sleep(1000)
            }
        }
        
    }
}