useInterval的ready使用教程？

[danatechgithub4]

感觉哪里不对劲。。。useInterval被我用的稀烂。。。

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import xyz.junerver.compose.hooks.optionsOf
import xyz.junerver.compose.hooks.useBoolean
import xyz.junerver.compose.hooks.useEffect
import xyz.junerver.compose.hooks.useInterval
import xyz.junerver.compose.hooks.useLatestState
import xyz.junerver.compose.hooks.useState
import kotlin.time.Duration.Companion.seconds

class MainActivity8 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(
                    modifier = Modifier
                            .fillMaxSize()
                            .padding(16.dp)) {
                Column {
                    val (text, setText) = remember { mutableStateOf("") }
                    CustomTextField(
                            text = text,
                            onTextChanged = { setText(it) },
                            onSendClicked = { /* Handle send button click */ }
                    )
                }
            }
        }
    }
}

@Composable
fun CustomTextField(
    text: String,
    onTextChanged: (String) -> Unit,
    onSendClicked: () -> Unit,
    placeholderText: String = "请输入手机号",
    buttonText: String = "获取验证码"
) {
    BasicTextField(
            value = text,
            onValueChange = { onTextChanged(it) },
            keyboardOptions = KeyboardOptions(
                    keyboardType = KeyboardType.Number,
                    imeAction = ImeAction.Send
            ),
            keyboardActions = KeyboardActions(
                    onSend = { onSendClicked() }
            ),
            textStyle = TextStyle(
                    fontSize = 12.sp,
                    color = Color(0xFF222222)
            ),
            decorationBox = { innerTextField ->
                MyDecorationBox(
                        innerTextField = innerTextField,
                        text = text,
                        placeholderText = placeholderText,
                        buttonText = buttonText,
                        onSendClicked = onSendClicked
                )
            }
    )
}

@Composable
fun MyDecorationBox(
    innerTextField: @Composable () -> Unit,
    countDownTimer: Int = 10,
    text: String,
    placeholderText: String,
    buttonText: String,
    onSendClicked: () -> Unit
) {
    val (state, toggle, _, setTrue, setFalse) = useBoolean(false)
    val (countdown, setCountdown) = useState(countDownTimer)
    val currentCount by useLatestState(value = countdown)
    val (startCountdown, cancel, isCounting) = useInterval(
            optionsOf {
                initialDelay = 1.seconds
                period = 1.seconds
                ready = state
            }
    ) {
        setCountdown(currentCount - 1)
    }
    useEffect(currentCount) {
        if (currentCount == 0) {
            setCountdown(countDownTimer)
            setFalse()
            cancel()
        }
    }
    Row(
            modifier = Modifier
                    .width(235.dp)
                    .height(40.dp)
                    .background(color = Color(0xFFF7F7F7), shape = RoundedCornerShape(size = 4.dp)),
            verticalAlignment = Alignment.CenterVertically
    ) {
        Box(
                modifier = Modifier
                        .weight(1f)
                        .padding(start = 12.dp, end = 12.dp)
        ) {
            innerTextField()
            if (text.isEmpty()) {
                Text(
                        text = placeholderText,
                        style = TextStyle(
                                fontSize = 12.sp,
                                color = Color(0xFFBBBBBB)
                        ),
                )
            }
        }
        if (isCounting) {
            Text(
                    text = "${countdown}s",
                    modifier = Modifier
                            .width(40.dp)
                            .padding(end = 12.dp),
                    style = TextStyle(
                            fontSize = 12.sp,
                            lineHeight = 20.sp,
                            fontWeight = FontWeight(600),
                            color = Color(0xFFBBBBBB),
                            textAlign = TextAlign.End,
                    )
            )
        } else {
            Text(text = buttonText,
                    style = TextStyle(
                            fontSize = 12.sp,
                            color = Color(0xFF045FFE),
                            fontWeight = FontWeight.SemiBold
                    ),
                    modifier = Modifier
                            .clickable(onClick = {
                                if (state) {
                                    startCountdown()
                                } else {
                                    setTrue()
                                }
                                onSendClicked()
                            })
                            .clip(RoundedCornerShape(size = 4.dp))
                            .padding(12.dp, 10.dp, 12.dp, 10.dp)
            )
        }
    }
}

[danatechgithub4]

此代码中还存在双击的问题，连续点击“获取验证码”倒计时s 会乱跳。

[danatechgithub4]

双击的问题是因为 initialDelay = 0.seconds设置为1，按钮会延迟1s变，所以需要改成0，改成0后倒计时从9s开始又不符合产品定义（应该从10s开始）。

[junerver]

双击问题是一个 bug，thanks；

ready 与 解构返回值手动控制存在一定程度的功能重合，本意是提供除手动控制在外的状态控制，但是目前看来它造成了一些心智负担，考虑将ready抽离到一个新的重载。
新重载不再返回元组，通过接受 ready 这一状态对间隔调用进行 暂停、恢复，也就是说只需要toggle ready的状态即可；

[junerver]

15快照版本更新~

同时优化了闭包问题，现在无需担心在 useInterval 中是使用解构 useState、useGetState 可能导致的闭包问题了；

ready 从配置选项中移除，增加了一个新的重载，可以直接使用 ready 对 interval 闭包进行 执行(resume)、结束(pause) 的控制

[danatechgithub4]

@junerver

Preview的时候报错了

[danatechgithub4]

useInterval运行时没问题，预览不出来UI了

[junerver]

预览时将 optionsOf 函数替换成 IntervalOptions.optionOf