如何在android compose中创建OTP布局? [英] How to create a OTP layout in android compose?

问题描述

我正在新的 android jetpack 的 compose 中为我的应用登录.

I was making a login for my app in the new android jetpack's compose.

我想像给定的照片一样制作 OTP 布局.

I want to make a OTP layout like in the given photo.

推荐答案

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

A very simple layout for each char in the 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 个 OtpChars

Then just use something like a Row to display 6 OtpChars

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

这篇关于如何在android compose中创建OTP布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！