Kotlin and Compose

概念

• Compose是谷歌为了简化界面开发，而推出的一个工具包，核心原理是响应式编程
• 需要使用Kotlin来编写代码
• 声明式界面框架
• 通过调用一系列函数来生成UI框架
• 当数据更新的时候，通过重新调用函数以实现UI的增量刷新和重构

更新状态来更新UI

• UI状态的更新导致其他UI状态的更新称之为UI重组

• 使用@Composable注解将代码转换为UI，我们将其称之为组合函数

• 可重用的垂直排列列表（好处：可以根据传入的数据来动态生成各种UI，也就是我们将通过数据来驱动UI的高效生成）

空视图展示将尤为简单和轻松

• UI交互与数据更新双向驱动，将变得尤为简单
• 如下代码所示：UI的选中或者不选中的状态根据answer的值来决定，选中之后，则反向驱动answer的值保存到list以便于完成数据更新
• MutableState和rememberState实现

mutableStateOf表示让Compose去关注某个值，当值改变的时候去自动刷新UI，需要配合remember关键字使用，意思就是每次UI重组的时候不需要每次都去重新初始化该值，而是使用上次修改过的值

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {

    // 记住该值 关注该值 用于后续该值变化过后执行UI重组  
    var expanded = remember { mutableStateOf(false) }

    Box(modifier = Modifier.padding(
        horizontal = 8.dp,
        vertical = 4.dp
    ).background(color = Color.Red)
    ) {
        Row(modifier = Modifier.padding(24.dp)){
            Column (modifier = Modifier
                .weight(1f)
            ){
                Text(
                    text = "Hello!",
                    color = Color.White,
                )
                Text(
                    text = "$name!",
                    color = Color.White,
                )
            }
            OutlinedButton(onClick = {
                expanded.value = !expanded.value
            },
                colors = ButtonDefaults.outlinedButtonColors(
                    containerColor = Color.White // 设置按钮的背景颜色为白色
                )
            ) {
                Text(text = if(expanded.value) "Show less" else "show more", color = Color.Cyan)
            }
        }

    }
}

• 通过以上的方法即可实现各种组合的UI以及可动态更新的重用UI组件：我们称之为可组合UI函数

一行代码为文本添加渐变背景色、圆角、内边距

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        color = Color.White,
        modifier = modifier
//            .background(Color.Red, shape = RoundedCornerShape(10.dp))
            .background(
                brush = Brush.verticalGradient(
                colors = listOf(Color.Red, Color.Green) // 渐变色从红色到绿色
                ), shape = RoundedCornerShape(10.dp))
            .padding(16.dp)
    )
}

• 代码提取和代码重构以增加代码的可读性

使用Column、Row、Box容器编写各种强大的UI组件

• 在 Jetpack Compose 中，可组合函数可以接受一个 "modifier" 参数，用于对该组件进行各种属性和行为的修饰。
• 修饰符可以改变组件的大小、颜色、形状、布局行为等多个方面
• "Modifier.fillMaxSize ()" 是一个预定义的修饰符函数，它的作用是让当前组件填充其父布局的最大可用空间。

LazyColumn 和 LazyRow 相当于 Android View 中的 RecyclerView

• 渲染一个1000元素的RV

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
// ...

@Composable
private fun Greetings(
    modifier: Modifier = Modifier,
    names: List<String> = List(1000) { "$it" }
) {
    LazyColumn(modifier = modifier.padding(vertical = 4.dp)) {
        items(items = names) { name ->
            Greeting(name = name)
        }
    }
}

• 请确保导入 androidx.compose.foundation.lazy.items，因为 Android Studio 默认会选择另一个 items 函数。

使用rememberSaveable代替remember以防止屏幕旋转之后视图的状态丢失导致UI被重置

使用animateDpAsState实现展开折叠动画

val extraPadding by animateDpAsState(if (expanded) 48.dp else 0.dp, label = "")

设置应用的样式和主题