1. 前言

上一篇文章我们讲到了Compose Bloom项目开发之前的一些配置及沉浸式状态栏的修改。
这篇文章接着上文，会介绍欢迎页的开发。

需要实现的页面效果如下所示

2. 分析页面组件

根据UI图，我们可以可知，该页面是由背景和前面部分部分组成的。

3. 实现背景部分

3.1 创建 WelcomePage

首先，我们需要先创建WelcomePage.kt

@Composable
fun WelcomePage() {
}

3.2 将MainActivity设置为WelcomePage

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)WindowCompat.setDecorFitsSystemWindows(window, false)val controller = WindowCompat.getInsetsController(window, window.decorView)controller?.isAppearanceLightStatusBars = truesetContent {BloomTheme {WelcomePage()  // <-------- 设置为WelcomePage}}}
}

3.3 添加背景色

由设计稿可知，页面的背景色是pink100

@Preview
@Composable
fun WelcomePage() {Box(modifier = Modifier.fillMaxSize().background(color = pink100)){}
}

我们使用快捷键 ctrl + shift + F5 (Windows，其他系统请自行百度)，可以预览到效果

3.3.2 设置白色的不规则形状图片

我们之前添加的资源文件里，ic_light_welcome_bg.xml就是白色的不规则形状图片

将其设置到页面中

@Composable
private fun BackgroundImage() {Image(painter = rememberVectorPainter(image = ImageVector.vectorResource(id = R.drawable.ic_light_welcome_bg)),modifier = Modifier.fillMaxSize(),contentDescription = "")
}

效果如下所示

4. 实现前面部分

4.1 添加树叶图片

我们查看之前添加的资源文件里，ic_light_welcome_illos.xml就是树叶的图片

我们将图片设置到页面中

@Composable
fun LeafImage() {Image(painter = rememberVectorPainter(image = ImageVector.vectorResource(id = R.drawable.ic_light_welcome_illos)),contentDescription = "")
}

可以看到效果

发现这个页面是在最顶端，我们期望改变一下它的位置，可以给他设置padding

在Compose里面，没有margin，而是通过padding的调用顺序，从而实现margin和padding的效果

这里我们用到了Column布局，设置了align(Alignment.End))靠右摆放，所以把Modifier抽取了出来

@Composable
fun WelComeContent() {Column(modifier = Modifier.fillMaxSize()) {LeafImage(Modifier.padding(top = 88.dp, start = 88.dp).align(Alignment.End))}
}@Composable
fun LeafImage(modifier: Modifier) {Image(painter = rememberVectorPainter(image = ImageVector.vectorResource(id = R.drawable.ic_light_welcome_illos)),modifier = modifier,contentDescription = "")
}

效果如下

4.2 添加Bloom标题

Bloom这几个字也是用图片实现的，我们把它加上

Spacer(modifier = Modifier.height(48.dp))
BloomTitle(modifier = Modifier.align(Alignment.CenterHorizontally))@Composable
fun BloomTitle(modifier: Modifier) {Image(modifier = modifier,painter = rememberVectorPainter(image =ImageVector.vectorResource(id = R.drawable.ic_light_logo),), contentDescription = "")
}

效果如下

4.3 添加副标题

Spacer(modifier = Modifier.height(8.dp))
BloomSubTitle(modifier = Modifier.align(Alignment.CenterHorizontally))@Composable
fun BloomSubTitle(modifier: Modifier) {Text(text = "Beautiful home garden solutions",style = subtitle1,color = gray,modifier = modifier)
}

效果如下所示

4.4 添加注册账号按钮

Spacer(modifier = Modifier.height(40.dp))
CreateAccountButton()@Composable
fun CreateAccountButton() {Button(onClick = { },modifier = Modifier.padding(horizontal = 16.dp).fillMaxWidth().height(48.dp).clip(medium),colors = ButtonDefaults.buttonColors(pink900)) {Text(text = "Create Account", style = button, color = white)}
}

效果如下

4.5 添加登录按钮

Spacer(modifier = Modifier.height(24.dp))
LoginButton()@Composable
fun LoginButton() {Text(text = "Log in", style = button, color = pink900)
}

最终效果如下

至此，我们就完成了欢迎页的界面，下一篇文章我们将接着介绍登录页界面的实现。(待更新)