安卓软件开发:Jetpack Compose中常见的核心概念总结-9

原创

Nimyears

发布于 2024-11-11 21:55:59

1020

文章被收录于专栏：JetpackCompose M3JetpackCompose M3 玩转全栈

41. 动画状态切换

AnimatedVisibility - 动画显示/隐藏

var isVisible by remember { mutableStateOf(true) }

AnimatedVisibility(visible = isVisible) {
    Text("Hello, Jetpack Compose!")
}

Button(onClick = { isVisible = !isVisible }) {
    Text("Toggle Visibility")
}

AnimatedVisibility: 根据状态切换，实现组件的淡入淡出或其他动画效果。

animateFloatAsState - 动态浮点数动画

val alpha by animateFloatAsState(targetValue = if (isVisible) 1f else 0f)

Box(modifier = Modifier.alpha(alpha)) {
    Text("Fading Text")
}

animateFloatAsState: 为浮点数创建动画效果，可以控制透明度、旋转角度等属性。

42. 弹出菜单窗口

DropdownMenu - 下拉菜单

var expanded by remember { mutableStateOf(false) }

Box {
    Button(onClick = { expanded = true }) {
        Text("Show Menu")
    }
    DropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false }
    ) {
        DropdownMenuItem(onClick = { /* Handle click */ }) {
            Text("Option 1")
        }
        DropdownMenuItem(onClick = { /* Handle click */ }) {
            Text("Option 2")
        }
    }
}

DropdownMenu: 创建下拉菜单，显示选项。

43. 序列化和反序列化数据

Json Serialization - Kotlinx序列化

@Serializable
data class User(val name: String, val age: Int)

val json = Json { prettyPrint = true }
val user = User("John", 25)
val jsonString = json.encodeToString(user)
val userData = json.decodeFromString<User>(jsonString)

@Serializable: 注解标识数据类可以被序列化。
Json: 进行序列化和反序列化操作

44. 分屏和折叠屏支持

Modifier.paddingFromBaseline - 基于基线的布局

Text(
    "Text with baseline padding",
    modifier = Modifier.paddingFromBaseline(top = 32.dp)
)

Modifier.foldablePane - 支持折叠屏的Modifier

Box(
    modifier = Modifier
        .fillMaxSize()
        .foldablePane(FoldOrientation.Vertical)
) {
    Text("Content adapts to fold orientation")
}

45. 自定义动画和变换

animateContentSize - 内容尺寸动画

var expanded by remember { mutableStateOf(false) }

Box(
    modifier = Modifier
        .clickable { expanded = !expanded }
        .animateContentSize()
        .background(Color.Gray)
        .padding(16.dp)
) {
    Text("Click to expand", maxLines = if (expanded) Int.MAX_VALUE else 1)
}

animateContentSize: 动态调整内容尺寸的动画。

Rotation Animation - 旋转动画

val rotation by animateFloatAsState(targetValue = if (isRotated) 360f else 0f)

Box(
    modifier = Modifier
        .size(100.dp)
        .graphicsLayer(rotationZ = rotation)
) {
    Text("Rotating Box")
}

46. 分页和加载更多

Paging - 分页加载数据

val lazyPagingItems = pager.collectAsLazyPagingItems()

LazyColumn {
    items(lazyPagingItems) { item ->
        Text("Item: ${item?.name}")
    }
}

collectAsLazyPagingItems: 使用Paging 3库进行分页加载。

Load More - 滚动到底部加载更多

LazyColumn {
    items(list) { item ->
        Text("Item $item")
    }

    item {
        Button(onClick = { loadMoreItems() }) {
            Text("Load More")
        }
    }
}

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

android-jetpack-compose