JavaFx實現倒計時按鈕組件(類似發送激活碼)

原文地址: JavaFx實現倒計時按鈕組件(類似發送激活碼) - Stars-One的雜貨小窩

本文基於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)
            }
        }
        
    }
}