Jetpack Compose入门

Jetpack Compose的学习笔记，组件详情参考 中文官网

Jetpack Compose 是用于构建原生 Android 界面的新工具包。
只需编写函数代码就能构建简单的界面布局。

打开Android Studio，新建项目，在 Phone and Tablet 类别下，选择 Empty Compose Activity

1. 可组合函数

在onCreate方法的setContent内，调用可组合函数

可组合函数 ：在函数上方添加注解@Composable，相当于一个元素

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

预览：在@Composable上方添加注解@Preview，可以直接预览，不用老是构建安装到模拟器

// 预览可组合函数 必须无参函数
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeTheme {
        Greeting("Android")
    }
}

2. 布局

1. Column 垂直排列（相当于垂直线性），Row 水平排列

添加图片，初步布局

@Composable
fun Greeting(message: Message) {

    Row() {
        Image(
            painter = painterResource(id = R.drawable.sweet_girl),
            contentDescription = "Contact profile picture")

        Column() {
            Text(text = "Hello ${message.author}!")
            Text(text = "Hello ${message.body}!")
        }
    }
}

 2. 配置布局

修改参数，调整布局

@Composable
fun Greeting(message: Message) {

    // 行padding = 8.dp
    Row(modifier = Modifier.padding(all = 8.dp)) {

        Image(
            painter = painterResource(id = R.drawable.sweet_girl),
            contentDescription = "Contact profile picture",
            // 图片参数
            modifier = Modifier
                .size(65.dp)
                .clip(CircleShape) // 形状为圆形
        )
        
        // 添加间隔
        Spacer(modifier = Modifier.width(8.dp))

        Column() {
            Text(
                text = "Hello ${message.author}!",
                fontWeight = FontWeight.Bold // 加粗字体
            )
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = "Hello ${message.body}!")
        }
    }
}

3. Material Design

Material Design 是 Google 提供的一个设计系统，旨在帮助您构建界面和体验

Surface 和 MaterialTheme 是与 Material Design 相关的概念。

主要围绕 Color、Typography、Shape这三大要素构建

Color：通过MaterialTheme.colors来使用颜色，color = ...

Typography（排版）：MaterialTheme.typography，style = ...

Shape： MaterialTheme.shapes，shape = ...

边框和字体修改颜色

Surface会了解，当该背景设置为primary颜色后，其上的任何文本都应使用onPrimary颜色

修改排版

修改形状，使用Surface把text包起来，这里除了阴影好像没啥用

 深色主题

自动深色主题

// ...
import android.content.res.Configuration

@Preview(name = "Light Mode")
@Preview(
    uiMode = Configuration.UI_MODE_NIGHT_YES,
    showBackground = true,
    name = "Dark Mode"
)

4. 列表和动画

以创建列表和添加动画为例

LazyColumn创建消息列表

@Composable
fun Conversation(messages: List<Message>){
    LazyColumn {
        items(messages) {
            message -> MessageCard(message = message)
        }
    }

}

@Preview(showBackground = true)
@Composable
fun PreviewConversation() {
    ComposeTheme {
        Conversation(SampleData.conversationSample)
    }
}

object SampleData{
    val conversationSample = listOf(
        Message("lucy","RPG是Role-Playing Game（角色扮演游戏）的缩写"),
        Message("jerry","RPG游戏中，玩家扮演一个虚构的角色，并通过控制角色的行动和发展来推动游戏的进程。"),
        Message("tom","玩家通常需要完成任务、战斗敌人、升级角色等，以获得游戏中的奖励和进展。")
    )
}

 消息收起和展开

1. 需要一个变量记录当前消息的状态
   使用 Compose 的状态 API，如remember和mutableStateOf
   定义状态变量 isExpanded
2. 添加点击事件
   在Surface里添加 Modifier.clickable { isExpanded = !isExpanded }
3. 设置最大行数
   也是与isExpanded绑定

@Composable
fun MessageCard(message: Message) {

    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(id = R.drawable.sweet_girl),
            contentDescription = "Contact profile picture",
            modifier = Modifier
                .size(65.dp)
                .clip(CircleShape)
                .border(2.dp, MaterialTheme.colors.secondary, CircleShape)
        )
        Spacer(modifier = Modifier.width(8.dp))

        // 状态变量，注意要写在函数里面
        var isExpanded by remember { mutableStateOf(false) }

        Column() {
            Spacer(modifier = Modifier.height(9.dp))
            Text(text = "${message.author}", style = MaterialTheme.typography.subtitle2)
            Spacer(modifier = Modifier.height(9.dp))

            // 添加点击事件
            Surface(shape = MaterialTheme.shapes.medium, elevation = 6.dp,
                modifier = Modifier.clickable { isExpanded = !isExpanded }) {
                Text(
                    text = "${message.body}",
                    color = MaterialTheme.colors.secondaryVariant,
                    modifier = Modifier.padding(all = 6.dp),
                    style = MaterialTheme.typography.body2,
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1 // 最大行数
                )
            }
        }
    }
}

与直接的 val expanded = mutableStateOf(false) 相比 ，remember可以在重组后记住可变状态，防止状态在重组时被重置

mutableStateOf 获得状态值，当该值发生变化时，会触发界面更新 传送➡️

val expanded = remember { mutableStateOf(false) }

颜色与大小的渐变

相关函数：
animateColorAsState
animateContentSize

大小，感觉没啥大用

modifier = Modifier.animateContentSize().padding(1.dp)