Android compose 一个简陋的登陆页面

class LoginActivity : ComponentActivity() {
    
    
    override fun onCreate(savedInstanceState: Bundle?) {
    
    
        super.onCreate(savedInstanceState)
        setContent {
    
    
            GoodNewsTheme {
    
    
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color.White
                ) {
    
    
                    Login()
                }
            }
        }
    }
}

@Composable
fun Login() {
    
    
    var inputPhone by remember {
    
    
        mutableStateOf("")
    }
    val pwd = remember {
    
    
        mutableStateOf("")
    }
    val maxLength = 11
    val minLength = 6
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = Modifier
            .padding(horizontal = 16.dp)
            .background(Color.White)
            .fillMaxWidth()
    ) {
    
    
        Image(painter = painterResource(id = R.mipmap.logo), contentDescription = null, Modifier
            .size(120.dp, 120.dp).align(Alignment.CenterHorizontally))
        Text(
            text = "好兄弟快快登录",
            color = colorResource(id = R.color.blue700),
            fontFamily = FontFamily.Monospace,
            fontSize = 36.sp,
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
        )
        Spacer(modifier = Modifier.height(48.dp))
        TextField(
            value = inputPhone,
            onValueChange = {
    
    
                if (it.length <= maxLength) inputPhone = it
                else "手机号格式错误".showToast()
            },
            label = {
    
     Text(text = "请输入账号") },
            leadingIcon = {
    
    
                Icon(
                    imageVector = Icons.Default.AccountBox,
                    contentDescription = "AccountBox"
                )
            },
            trailingIcon = {
    
    
                IconButton(onClick = {
    
     inputPhone = "" }) {
    
    
                    Icon(
                        imageVector = Icons.Default.Clear,
                        contentDescription = "Clear"
                    )
                }
            },
            keyboardOptions = KeyboardOptions(
                //设置键盘类动作为搜索按钮
                imeAction = ImeAction.Next,
                //设置键盘类似为纯文本
                keyboardType = KeyboardType.Number
            ),
            modifier = Modifier
                .fillMaxWidth()
                .border(1.dp, color = Color.Blue),
            //设置点击键盘的搜索动作按钮的监听
            keyboardActions = KeyboardActions(onSearch = {
    
    
                "当前输入的数据为：$inputPhone".showToast()
            }),
            //设置输入框的背景色为透明
            colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent)
        )
        Spacer(modifier = Modifier.height(24.dp))
        TextField(
            value = pwd.value,
            //visualTransformation设置文本的视觉格式
            visualTransformation = (
                    if (pwd.value.isEmpty())
                        VisualTransformation.None//普通文本样式
                    else
                        PasswordVisualTransformation()//密码样式，星号显示文字
                    ),
            onValueChange = {
    
    
                pwd.value = it
            },
            label = {
    
     Text(text = "请输入密码") },
            leadingIcon = {
    
    
                Icon(
                    imageVector = Icons.Default.Password,
                    contentDescription = "Password"
                )
            },
            trailingIcon = {
    
    
                IconButton(onClick = {
    
     pwd.value = "" }) {
    
    
                    Icon(
                        imageVector = Icons.Default.Clear,
                        contentDescription = "Clear"
                    )
                }
            },
            keyboardOptions = KeyboardOptions(
                //设置键盘类动作为搜索按钮
                imeAction = ImeAction.Send,
                //设置键盘类似为纯文本
                keyboardType = KeyboardType.Password
            ),
            modifier = Modifier
                .fillMaxWidth()
                .border(1.dp, color = Color.Blue),
            keyboardActions = KeyboardActions(onSend = {
    
    
                if (pwd.value.length in minLength..maxLength)
                "账号为：${
      
      inputPhone},密码为：${
      
      pwd.value}".showToast()
                else
                "密码长度为6 - 11 位".showToast()
            }),
            //设置输入框的背景色为透明
            colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent)
        )
        Spacer(modifier = Modifier.height(24.dp))
        Button(
            onClick = {
    
    
                if (pwd.value.length in minLength..maxLength)
                "账号为：${
      
      inputPhone},密码为：${
      
      pwd.value}".showToast()
                else "密码长度为6 - 11 位".showToast()
            },
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
                .fillMaxWidth()
                .height(48.dp),
            shape = RoundedCornerShape(20),
            //or shape = CircleShape
        ) {
    
    
            Text(text = "登录下好兄弟！", color = Color.White)
        }

    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    
    
    GoodNewsTheme {
    
    
        Login()
    }
}

感觉和Flutter UI神相似啊