手把手教你用Compose UI打造Google Bloom欢迎页

Android

2023-10-31 02:40:15

Compose实战：打造Bloom欢迎页

简介

Jetpack Compose作为安卓开发领域的新星，以其简洁的语法和强大的功能深受开发者的喜爱。现在，让我们利用Compose的基础组件来打造一个酷炫的欢迎页。

Bloom欢迎页分析

Bloom是一个虚拟产品，其欢迎页主要包含两个元素：

*** ** 按钮：“开始”**

所需Compose组件

实现该效果，我们需要以下Compose组件：

Text组件： 显示文本
Button组件： 创建按钮
Modifier组件： 修改组件外观和行为

步骤分解

1. 标题Text组件

Text(text = "Bloom",
    modifier = Modifier
        .fillMaxWidth()
        .wrapContentHeight()
        .align(Alignment.Center)
        .padding(top = 50.dp))

text： 文本内容
modifier： 修改外观（最大宽度、居中对齐、上部填充）

2. 按钮Button组件

Button(onClick = { /* Do something */ },
    modifier = Modifier
        .fillMaxWidth()
        .height(50.dp)
        .align(Alignment.BottomCenter)
        .padding(bottom = 50.dp),
    colors = ButtonDefaults.buttonColors(
        backgroundColor = Color.Blue,
        contentColor = Color.White)) {
    Text(text = "Get Started")
}

onClick： 点击事件（此处留空，具体操作需自行定义）
modifier： 修改外观（最大宽度、固定高度、底部居中对齐、底部填充、背景和文本颜色）
ButtonDefaults.buttonColors： 提供按钮默认配色方案

3. Compose布局

将这两个组件放入Compose布局：

@Composable
fun BloomWelcomePage() {
    Column {
        Text(text = "Bloom",
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight()
                .align(Alignment.Center)
                .padding(top = 50.dp))
        Button(onClick = { /* Do something */ },
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp)
                .align(Alignment.BottomCenter)
                .padding(bottom = 50.dp),
            colors = ButtonDefaults.buttonColors(
                backgroundColor = Color.Blue,
                contentColor = Color.White)) {
            Text(text = "Get Started")
        }
    }
}