如何在相親交友原始碼中實現正方形驗證碼輸入框？

實現效果

總的來說就是對相親交友原始碼的輸入框顯示進行重繪

1.監聽使用者輸入

TextField是Jetpack compose中獲取相親交友原始碼使用者輸入內容的常用輸入框。
在此我們只需要獲取輸入法輸入內容就行，不需要外觀，因此使用BasicTextField即可。
相親交友原始碼的驗證碼一般都是純數字組成，通過KeyboardOptions 的keyboardType來限制輸入內容為數字（類似於EditText 的inputType）
但是還需要隱藏輸入回顯的文字，因此使用Modifier.drawWithContent { }重新覆蓋繪製，就能去掉了。

var content by remember { mutableStateOf("") }BasicTextField(
            value = content,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),//設定僅輸入數字
            onValueChange = {
                content = it//儲存使用者輸入的內容
                
            },
            modifier = Modifier                .drawWithContent { }//清除繪製內容
                .matchParentSize()//填充至父佈局大小
        )

還需要響應相親交友原始碼中點選調起輸入法的效果，因此可以利用Box將BasicTextField覆蓋在我們的重繪的控制元件上。使用者點選的時候實際點選在BasicTextField上便能自動調起輸入法。

Box {
    //重新繪製的驗證碼輸入框
    BasicTextField(...}

2.繪製驗證碼內容

接下來就是根據輸入內容content進行重新繪製
相親交友原始碼的驗證碼輸入框的UI就是橫著的一排矩形，使用一個Row完成，然後適當在中間加一些間距。
為了使得相親交友原始碼的矩形框的樣式更加靈活，可以將矩形框繪製通過Composable引數向上暴露。

Row(horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically) {
        repeat(digits) {//根據矩形框數量繪製
            if (it != 0) {
                //在中間新增間距
                Spacer(modifier = Modifier.width(horizontalMargin))
            }
            //獲取當前框的文字
            val text = content.getOrNull(it)?.toString() ?: ""
            //是否正在輸入的框
            val focused = it == content.length            //繪製文字
            itemScope(text, focused)
        }
    }

然後完成相親交友原始碼單個矩形框的繪製，使用Text將驗證碼文字繪製出來就行，由於沒發現使Text文字垂直居中的Modifier，所以套上了一個Box。

@Composable
fun SimpleVerificationCodeItem(text: String, focused: Boolean) {
    val borderColor = if (focused) Color.Gray else Color(0xeeeeeeee)
    Box(
        modifier = Modifier            .border(1.dp, borderColor)
            .size(55.dp, 55.dp), contentAlignment = Alignment.Center    ) {
        Text(
            text = text,
            fontSize = 24.sp,
            textAlign = TextAlign.Center,
            maxLines = 1
        )
    }}

完整程式碼

相親交友原始碼正方形驗證碼輸入框的實現

/**
 * @param text 文字內容
 * @param focused 是否高亮當前輸入框
 */@Composable
fun SimpleVerificationCodeItem(text: String, focused: Boolean) {
    val borderColor = if (focused) Color.Gray else Color(0xeeeeeeee)
    Box(
        modifier = Modifier            .border(1.dp, borderColor)
            .size(55.dp, 55.dp), contentAlignment = Alignment.Center    ) {
        Text(
            text = text,
            fontSize = 24.sp,
            textAlign = TextAlign.Center,
            maxLines = 1
        )
    }}/**
 * @param digits 驗證碼位數（框數量）
 * @param horizontalMargin 水平間距
 * @param inputCallback 輸入回撥
 */@Composable
fun VerificationCodeField(
    digits: Int,
    horizontalMargin: Dp = 10.dp,
    inputCallback: (content: String) -> Unit = {},
    itemScope: @Composable (text: String, focused: Boolean) -> Unit) {
    var content by remember { mutableStateOf("") }
    Box {
        Row(
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically        ) {
            //繪製框
            repeat(digits) {
                if (it != 0) {
                    //新增間距
                    Spacer(modifier = Modifier.width(horizontalMargin))
                }
                //獲取當前框的文字
                val text = content.getOrNull(it)?.toString() ?: ""
                //是否正在輸入的框
                val focused = it == content.length                //繪製文字
                itemScope(text, focused)
            }
        }
        BasicTextField(value = content, onValueChange = {
            content = it            inputCallback(it)
        }, modifier = Modifier            .drawWithContent { }//清楚繪製內容
            .matchParentSize())//填充至父佈局大小
    }}

使用方法

   VerificationCodeField(5){text,focused->
        SimpleVerificationCodeItem(text,focused)
    }

以上便是“如何在相親交友原始碼中實現正方形驗證碼輸入框？”的全部內容，希望對大家開發相親交友原始碼有幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：