前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >代码实现第三方登录

代码实现第三方登录

原创
作者头像
艳艳代码杂货店
修改2021-09-26 09:37:39
7360
修改2021-09-26 09:37:39
举报
文章被收录于专栏:艳艳代码杂货店

第三方登录

代码语言:javascript
复制
复制Row(horizontalArrangement = Arrangement.SpaceBetween,verticalAlignment = Alignment.CenterVertically) {
      Row(
          Modifier
              .height(1.dp)
              .weight(1f)
              .background(Color(0xFFCFC5C5))
              .padding(end = 10.dp)){}
      Text(text = "第三方登录", fontSize = 16.sp, color = Color.Gray)
      Row(
          Modifier
              .height(1.dp)
              .weight(1f)
              .background(Color(0xFFCFC5C5))
              .padding(start = 10.dp)){}
}

Spacer(modifier = Modifier.height(20.dp))
Row(Modifier.fillMaxWidth(),horizontalArrangement = Arrangement.Center) {
  repeat(3){
      Column(Modifier.weight(1f),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally) {
          Image(modifier = Modifier.size(50.dp),painter = painterResource(id = R.drawable.qq), contentDescription = null)
          Text("QQ", color = Color(0xffcdcdcd), fontSize = 16.sp,fontWeight = FontWeight.Bold)
      }
  }
}
源码
@Preview(showBackground = true)
@Composable
fun LoginPageDemo() {
    var name by remember { mutableStateOf("") }
    var pwd by remember { mutableStateOf("") }

    val pwdVisualTransformation = PasswordVisualTransformation()
    var showPwd by remember {
        mutableStateOf(true)
    }

    val transformation = if (showPwd) pwdVisualTransformation else VisualTransformation.None

    ComposeDemoTheme {

        Box(Modifier.fillMaxSize()) {
            Image(painter = painterResource(id = R.drawable.bg_login), contentDescription = null)
            Text(
                text = "注册",
                color = Color.White,
                fontSize = 20.sp,
                textAlign = TextAlign.End,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(20.dp)
            )
            Column() {
                Spacer(modifier = Modifier.weight(1f))
                Column(
                    modifier = Modifier
                        .weight(3f)
                        .background(Color.White)
                        .padding(40.dp)
                        .fillMaxWidth()
                ) {
                    Column() {
                        TextField(
                            modifier = Modifier.fillMaxWidth(),
                            value = name,
                            placeholder = {
                                Text("请输入用户名")
                            },
                            onValueChange = { str -> name = str },
                            colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent),
                            leadingIcon = {
                                Icon(
                                    imageVector = Icons.Default.AccountBox,
                                    contentDescription = null
                                )
                            })
                        TextField(
                            value = pwd, onValueChange = { str -> pwd = str },
                            modifier = Modifier.fillMaxWidth(),
                            placeholder = {
                                Text("请输入密码")
                            },
                            visualTransformation = transformation,
                            colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent),
                            leadingIcon = {
                                Icon(
                                    imageVector = Icons.Default.Lock,
                                    contentDescription = null
                                )
                            }, trailingIcon = {
                                if (showPwd) {
                                    IconButton(onClick = { showPwd = !showPwd }) {
                                        Icon(
                                            painter = painterResource(id = R.drawable.eye_hide),
                                            contentDescription = null,
                                            Modifier.size(30.dp)
                                        )
                                    }
                                } else {
                                    IconButton(onClick = { showPwd = !showPwd }) {
                                        Icon(
                                            painter = painterResource(id = R.drawable.eye_show),
                                            contentDescription = null,
                                            Modifier.size(30.dp)
                                        )
                                    }
                                }
                            }
                        )
                    }
                    Spacer(modifier = Modifier.height(20.dp))
                    Row(horizontalArrangement = Arrangement.SpaceBetween,modifier = Modifier.fillMaxWidth()) {
                        Text(text = "快捷登录", fontSize = 16.sp, color = Color.Gray)
                        Text(text = "忘记密码", fontSize = 16.sp, color = Color.Gray)
                    }
                    Spacer(modifier = Modifier.height(20.dp))
                  Button(
                      modifier = Modifier
                          .fillMaxWidth(),
                      onClick = {
                          if (name == "test" && pwd == "123") {
                              Toast.makeText(context, "登录成功", Toast.LENGTH_SHORT).show()
                          } else {
                              Toast.makeText(context, "登录失败", Toast.LENGTH_SHORT).show()
                          }
                      },
                      shape = RoundedCornerShape(50),
                      colors = ButtonDefaults.buttonColors(backgroundColor = Color(0xff5c59fe)),
                      contentPadding = PaddingValues(12.dp, 16.dp)
                  ) {
                      Text("登录", color = Color.White, fontSize = 18.sp)
                  }

                  Spacer(modifier = Modifier.height(100.dp))
                  Row(horizontalArrangement = Arrangement.SpaceBetween,verticalAlignment = Alignment.CenterVertically) {
                      Row(
                          Modifier
                              .height(1.dp)
                              .weight(1f)
                              .background(Color(0xFFCFC5C5))
                              .padding(end = 10.dp)){}
                      Text(text = "第三方登录", fontSize = 16.sp, color = Color.Gray)
                      Row(
                          Modifier
                              .height(1.dp)
                              .weight(1f)
                              .background(Color(0xFFCFC5C5))
                              .padding(start = 10.dp)){}
                  }
                  Spacer(modifier = Modifier.height(20.dp))
                  Row(Modifier.fillMaxWidth(),horizontalArrangement = Arrangement.Center) {
                      repeat(3){
                          Column(Modifier.weight(1f),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally) {
                              Image(modifier = Modifier.size(50.dp),painter = painterResource(id = R.drawable.qq), contentDescription = null)
                              Text("QQ", color = Color(0xffcdcdcd), fontSize = 16.sp,fontWeight = FontWeight.Bold)
                          }
                      }
                  }
                }
            }
        }
    }
}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第三方登录
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档