android - 如何在 android compose 中创建 OTP 布局？

Question

我在新的 android jetpack compose 中为我的应用程序登录。
我想制作一个像给定照片中的 OTP 布局。

Answer 1

otp 中每个字符的非常简单的布局。

   @Composable
   fun OtpChat(){
       var text by remember { mutableStateOf("1") }
       val maxChar = 1

       Column(Modifier.background(DarkGray),
              horizontalAlignment = Alignment.CenterHorizontally){
           TextField(
               value =text,
               onValueChange = {if (it.length <= maxChar) text = it},
               modifier = Modifier.width(50.dp),
               textStyle = LocalTextStyle.current.copy(
                   fontSize = 20.sp, 
                   textAlign= TextAlign.Center),
               colors= TextFieldDefaults.textFieldColors(
                   textColor = White,
                   backgroundColor = Transparent,
                   unfocusedIndicatorColor = Transparent,
                   focusedIndicatorColor = Transparent)
           )
           Divider(Modifier
                    .width(28.dp)
                    .padding(bottom = 2.dp)
                    .offset(y=-10.dp), 
             color = White,
             thickness = 1.dp)
       }
   }

然后只需使用 Row 之类的东西显示 6 OtpChar s

   Row(horizontalArrangement = Arrangement.SpaceBetween){
       OtpChar()
       OtpChar()
       OtpChar()
       //....
   }