1. 前言
上篇文章 我们实现了 Compose Bloom项目的开发页,这篇文章接着上文,来介绍登录页的开发。
2. 分析页面布局
根据UI稿我们可知,这个页面就用一个垂直的列表,把一个个组件实现了就好了。
3. 实现标题
Column( //垂直列表
modifier = Modifier
.fillMaxSize()
.background(color = white),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Log in with email",
style = h1,
color = gray,
modifier = Modifier.padding(top = 184.dp)
)
}
效果如下所示
4. 实现输入框
OutlinedTextField(
value = "", onValueChange = {
},
modifier = Modifier
.padding(top = 16.dp, start = 16.dp, end = 16.dp)
.fillMaxWidth(),
placeholder = {
Text(
text = "Email address",
style = body1,
color = gray,
modifier = Modifier.padding(top = 3.dp)
)
}
)
OutlinedTextField(
value = "", onValueChange = {
},
modifier = Modifier
.padding(top = 16.dp, start = 16.dp, end = 16.dp)
.fillMaxWidth(),
placeholder = {
Text(
text = "Password (8+ characters)",
style = body1,
color = gray,
modifier = Modifier.padding(top = 3.dp)
)
}
)
效果如下所示
5. 实现Tips小字
Text(
text = "by clicking below,you agree to our Terms of Use and consent to our Privacy Prolicy.",
style = body2,
color = gray,
modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 16.dp),
textAlign = TextAlign.Center
)
效果如下所示
6. 实现登录按钮
Button(
onClick = {
},
colors = ButtonDefaults.buttonColors(pink900),
modifier = Modifier
.padding(top = 16.dp, start = 16.dp, end = 16.dp)
.fillMaxWidth()
.height(48.dp)
.clip(medium)
) {
Text(text = "Log in", style = button, color = white)
}
效果如下所示
7.小结
至此,我们就完成了登录页面。下一篇文章我们将来实现主页的逻辑。(待更新)
Compose 项目实战 系列文章
Android Compose Bloom 项目实战 (一) : 项目说明与配置
Android Compose Bloom 项目实战 (二) : 欢迎页
Android Compose Bloom 项目实战 (三) : 登录页