|
@@ -0,0 +1,278 @@
|
|
|
+package com.ys.bdtp.adm.mvvm.ui.screen.login
|
|
|
+
|
|
|
+import androidx.compose.foundation.Image
|
|
|
+import androidx.compose.foundation.background
|
|
|
+import androidx.compose.foundation.layout.Arrangement
|
|
|
+import androidx.compose.foundation.layout.Box
|
|
|
+import androidx.compose.foundation.layout.Column
|
|
|
+import androidx.compose.foundation.layout.Row
|
|
|
+import androidx.compose.foundation.layout.Spacer
|
|
|
+import androidx.compose.foundation.layout.fillMaxHeight
|
|
|
+import androidx.compose.foundation.layout.fillMaxSize
|
|
|
+import androidx.compose.foundation.layout.fillMaxWidth
|
|
|
+import androidx.compose.foundation.layout.height
|
|
|
+import androidx.compose.foundation.layout.padding
|
|
|
+import androidx.compose.foundation.layout.size
|
|
|
+import androidx.compose.foundation.layout.wrapContentHeight
|
|
|
+import androidx.compose.foundation.shape.RoundedCornerShape
|
|
|
+import androidx.compose.material.Button
|
|
|
+import androidx.compose.material.ButtonDefaults
|
|
|
+import androidx.compose.material.Icon
|
|
|
+import androidx.compose.material.IconButton
|
|
|
+import androidx.compose.material.OutlinedTextField
|
|
|
+import androidx.compose.material.Text
|
|
|
+import androidx.compose.material.TextFieldDefaults
|
|
|
+import androidx.compose.runtime.Composable
|
|
|
+import androidx.compose.runtime.getValue
|
|
|
+import androidx.compose.runtime.mutableStateOf
|
|
|
+import androidx.compose.runtime.remember
|
|
|
+import androidx.compose.runtime.setValue
|
|
|
+import androidx.compose.ui.Alignment
|
|
|
+import androidx.compose.ui.Modifier
|
|
|
+import androidx.compose.ui.focus.FocusState
|
|
|
+import androidx.compose.ui.focus.onFocusChanged
|
|
|
+import androidx.compose.ui.graphics.Color
|
|
|
+import androidx.compose.ui.layout.ContentScale
|
|
|
+import androidx.compose.ui.platform.LocalDensity
|
|
|
+import androidx.compose.ui.res.painterResource
|
|
|
+import androidx.compose.ui.text.input.PasswordVisualTransformation
|
|
|
+import androidx.compose.ui.text.input.VisualTransformation
|
|
|
+import androidx.compose.ui.tooling.preview.Preview
|
|
|
+import androidx.compose.ui.unit.dp
|
|
|
+import androidx.compose.ui.unit.sp
|
|
|
+import com.google.accompanist.insets.LocalWindowInsets
|
|
|
+import com.google.accompanist.insets.rememberInsetsPaddingValues
|
|
|
+import com.ys.bdtp.adm.R
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun LoginScreen() {
|
|
|
+ // val vm by rememberViewModel<LoginViewModel>()
|
|
|
+ val insets = LocalWindowInsets.current
|
|
|
+ println("insets: ${insets.statusBars.layoutInsets.left}")
|
|
|
+ println("insets: ${insets.statusBars.layoutInsets.bottom}")
|
|
|
+ val imeBottom = with(LocalDensity.current) { insets.ime.bottom.toDp() }
|
|
|
+ println("insets: $imeBottom")
|
|
|
+
|
|
|
+ var isShowPassword by remember { mutableStateOf(false) }
|
|
|
+ var isLoginBtnEnable by remember { mutableStateOf(false) }
|
|
|
+
|
|
|
+ var username by remember { mutableStateOf("") }
|
|
|
+ var password by remember { mutableStateOf("") }
|
|
|
+
|
|
|
+ var visualState: VisualTransformation by remember { mutableStateOf(PasswordVisualTransformation()) }
|
|
|
+
|
|
|
+ var usernameLeadingIconColor by remember { mutableStateOf(Color(0xFFC3C7CB)) }
|
|
|
+ var passwordLeadingIconColor by remember { mutableStateOf(Color(0xFFC3C7CB)) }
|
|
|
+
|
|
|
+ Row(
|
|
|
+ modifier = Modifier
|
|
|
+ .fillMaxSize()
|
|
|
+ .background(Color.White)
|
|
|
+
|
|
|
+
|
|
|
+ ) {
|
|
|
+ Box(
|
|
|
+ modifier = Modifier.weight(3.0f).fillMaxHeight()
|
|
|
+ ) {
|
|
|
+
|
|
|
+
|
|
|
+ Image(
|
|
|
+ painter = painterResource(R.drawable.login_background),
|
|
|
+ contentDescription = "",
|
|
|
+ modifier = Modifier.fillMaxSize(),
|
|
|
+ contentScale = ContentScale.Crop
|
|
|
+ )
|
|
|
+
|
|
|
+ Column(
|
|
|
+ modifier = Modifier.fillMaxSize().padding(
|
|
|
+ rememberInsetsPaddingValues(
|
|
|
+ LocalWindowInsets.current.statusBars,
|
|
|
+ additionalStart = 32.dp,
|
|
|
+ additionalTop = 12.dp
|
|
|
+
|
|
|
+ )
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ Icon(
|
|
|
+ painter = painterResource(R.drawable.logo),
|
|
|
+ contentDescription = "",
|
|
|
+ modifier = Modifier.size(112.dp, 48.dp)
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ Column(modifier = Modifier.align(Alignment.Center)) {
|
|
|
+ Text(text = "Yushu", fontSize = 36.sp, color = Color(0XFF1F2429))
|
|
|
+ Text("智慧建筑运维平台", fontSize = 48.sp, color = Color(0XFF1F2429))
|
|
|
+ Text("为您提供什么服务,能够用一句话概括出来吧。", fontSize = 16.sp, color = Color(0XFF8D9399))
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ Column(
|
|
|
+ modifier = Modifier.weight(2.0f)
|
|
|
+ .fillMaxHeight()
|
|
|
+ .padding(start = 56.dp, end = 96.dp),
|
|
|
+ verticalArrangement = Arrangement.Center
|
|
|
+ ) {
|
|
|
+ Column(modifier = Modifier.wrapContentHeight()) {
|
|
|
+ Text(text = "登录", fontSize = 30.sp, color = Color(0XFF1F2429))
|
|
|
+ Spacer(modifier = Modifier.height(32.dp))
|
|
|
+
|
|
|
+ OutlinedTextField(
|
|
|
+ value = username,
|
|
|
+ modifier = Modifier.fillMaxWidth().onFocusChanged { focusState: FocusState ->
|
|
|
+ if (focusState.isFocused)
|
|
|
+ usernameLeadingIconColor = Color(0xFF0091FF)
|
|
|
+ else
|
|
|
+ usernameLeadingIconColor = Color(0xFFC3C7CB)
|
|
|
+ },
|
|
|
+ onValueChange = {
|
|
|
+ username = it
|
|
|
+ isLoginBtnEnable = username.isNotEmpty() && password.isNotEmpty()
|
|
|
+
|
|
|
+ },
|
|
|
+ label = {
|
|
|
+ Text(text = "请输入账号")
|
|
|
+ },
|
|
|
+ colors = TextFieldDefaults.outlinedTextFieldColors(
|
|
|
+ textColor = Color(0xFF1F2429),
|
|
|
+ cursorColor = Color(0xFF0091FF),
|
|
|
+ focusedBorderColor = Color(0xFF0091FF),
|
|
|
+ unfocusedBorderColor = Color(0xFFC3C7CB),
|
|
|
+ focusedLabelColor = Color(0xFF0091FF),
|
|
|
+ unfocusedLabelColor = Color(0xFFC3C7CB),
|
|
|
+ backgroundColor = Color.Transparent
|
|
|
+ ),
|
|
|
+ leadingIcon = {
|
|
|
+ Icon(
|
|
|
+ painter = painterResource(R.drawable.login_user),
|
|
|
+ contentDescription = "",
|
|
|
+ tint = usernameLeadingIconColor
|
|
|
+ )
|
|
|
+ },
|
|
|
+ trailingIcon = {
|
|
|
+ if (username.isNotBlank()) {
|
|
|
+ IconButton(
|
|
|
+ onClick = { username = "" },
|
|
|
+ enabled = username.isNotEmpty()
|
|
|
+ ) {
|
|
|
+
|
|
|
+ Icon(
|
|
|
+ painter = painterResource(R.drawable.login_delete),
|
|
|
+ contentDescription = "",
|
|
|
+ modifier = Modifier.size(16.dp),
|
|
|
+ tint = Color(0xFFC3C6CB)
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ shape = RoundedCornerShape(4.dp)
|
|
|
+ )
|
|
|
+
|
|
|
+ Spacer(modifier = Modifier.height(32.dp))
|
|
|
+
|
|
|
+ OutlinedTextField(
|
|
|
+ value = password,
|
|
|
+ modifier = Modifier.fillMaxWidth()
|
|
|
+ .onFocusChanged { focusState ->
|
|
|
+ if (focusState.isFocused)
|
|
|
+ passwordLeadingIconColor = Color(0xFF0091FF)
|
|
|
+ else
|
|
|
+ passwordLeadingIconColor = Color(0xFFC3C7CB)
|
|
|
+ },
|
|
|
+ onValueChange = {
|
|
|
+ password = it
|
|
|
+ isLoginBtnEnable = username.isNotEmpty() && password.isNotEmpty()
|
|
|
+ },
|
|
|
+ label = { Text(text = "请输入密码") },
|
|
|
+ colors = TextFieldDefaults.outlinedTextFieldColors(
|
|
|
+ textColor = Color(0xFF1F2429),
|
|
|
+ cursorColor = Color(0xFF0091FF),
|
|
|
+ focusedBorderColor = Color(0xFF0091FF),
|
|
|
+ unfocusedBorderColor = Color(0xFFC3C7CB),
|
|
|
+ focusedLabelColor = Color(0xFF0091FF),
|
|
|
+ unfocusedLabelColor = Color(0xFFC3C7CB),
|
|
|
+ backgroundColor = Color.Transparent
|
|
|
+ ),
|
|
|
+ visualTransformation = visualState,
|
|
|
+ leadingIcon = {
|
|
|
+ Icon(
|
|
|
+ painter = painterResource(R.drawable.login_lock),
|
|
|
+ contentDescription = "",
|
|
|
+ tint = passwordLeadingIconColor
|
|
|
+ )
|
|
|
+ },
|
|
|
+ trailingIcon = {
|
|
|
+ Row(
|
|
|
+ horizontalArrangement = Arrangement.End,
|
|
|
+ verticalAlignment = Alignment.CenterVertically
|
|
|
+ ) {
|
|
|
+ if (password.isNotBlank()) {
|
|
|
+ IconButton(
|
|
|
+ onClick = { isShowPassword = !isShowPassword }
|
|
|
+ ) {
|
|
|
+ val icon =
|
|
|
+ if (isShowPassword) R.drawable.login_eye_open else R.drawable.login_eye_close
|
|
|
+ visualState =
|
|
|
+ if (isShowPassword) VisualTransformation.None else PasswordVisualTransformation()
|
|
|
+ val description = if (isShowPassword) "Show password" else "Hide password"
|
|
|
+ Icon(
|
|
|
+ painter = painterResource(icon),
|
|
|
+ contentDescription = description,
|
|
|
+ modifier = Modifier.size(18.dp).padding(0.dp),
|
|
|
+ tint = Color(0xFFC3C6CB)
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ IconButton(
|
|
|
+ onClick = {
|
|
|
+ password = ""
|
|
|
+ isShowPassword = false
|
|
|
+ },
|
|
|
+ enabled = password.isNotEmpty()
|
|
|
+ ) {
|
|
|
+ Icon(
|
|
|
+ painter = painterResource(R.drawable.login_delete),
|
|
|
+ contentDescription = "",
|
|
|
+ modifier = Modifier.size(18.dp),
|
|
|
+ tint = Color(0xFFC3C6CB)
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ Spacer(modifier = Modifier.height(48.dp))
|
|
|
+
|
|
|
+ Button(
|
|
|
+ onClick = {
|
|
|
+ // TODO
|
|
|
+ // 处理完后清空数据
|
|
|
+ isLoginBtnEnable = username.isNotEmpty() && password.isNotEmpty()
|
|
|
+ // TODO
|
|
|
+ // 返回登录结果进行处理
|
|
|
+ },
|
|
|
+ enabled = isLoginBtnEnable,
|
|
|
+ modifier = Modifier.fillMaxWidth().height(48.dp),
|
|
|
+ shape = RoundedCornerShape(4),
|
|
|
+ colors = ButtonDefaults.buttonColors(
|
|
|
+ backgroundColor = Color(0xFF0091FF),
|
|
|
+ disabledBackgroundColor = Color(0xFFEFF0F1)
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ Text(
|
|
|
+ text = "立即登录",
|
|
|
+ color = if (isLoginBtnEnable) Color(0xFFFFFFFF) else Color(0XFFC3C7CB),
|
|
|
+ fontSize = 16.sp
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@Preview(widthDp = 1280, heightDp = 800)
|
|
|
+@Composable
|
|
|
+fun PreviewLoginScreen() {
|
|
|
+ LoginScreen()
|
|
|
+}
|