Android Compose Bloom 项目实战 (三) : 登录页

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 项目实战 (三) : 登录页