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

原创

Nimyears

发布于 2024-11-13 09:10:12

1760

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

47. 多媒体处理

Image with Placeholder - 带占位符的图片

Image(
    painter = rememberImagePainter("https://xx.com/image.jpg"),
    contentDescription = "Remote image",
    modifier = Modifier.size(200.dp),
    contentScale = ContentScale.Crop,
    placeholder = painterResource(R.drawable.placeholder)
)

VideoPlayer - 嵌入视频播放器

AndroidView(
    factory = { context ->
        val videoView = VideoView(context)
        videoView.setVideoURI(Uri.parse("https://xx.com/video.mp4"))
        videoView.start()
        videoView
    },
    modifier = Modifier.size(300.dp)
)

48. 视图层次和布局层叠

Modifier.zIndex - 调整视图层级

Box(
    modifier = Modifier.size(300.dp)
) {
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Red)
            .zIndex(2f)
    )
    Box(
        modifier = Modifier
            .size(150.dp)
            .background(Color.Blue)
            .zIndex(1f)
    )
}

zIndex: 控制组件在布局中的层级顺序。

Box with Overlapping Content - 层叠内容

Box {
    Text("Bottom Layer", modifier = Modifier.align(Alignment.BottomStart))
    Text("Top Layer", modifier = Modifier.align(Alignment.Center))
}

49. 屏幕尺寸和分辨率适配

Modifier.sizeIn - 设置最小/最大尺寸

Box(
    modifier = Modifier
        .sizeIn(minWidth = 100.dp, minHeight = 100.dp, maxWidth = 300.dp, maxHeight = 300.dp)
        .background(Color.Yellow)
) {
    Text("Resize me!")
}

Responsive Design - 响应式设计

BoxWithConstraints {
    if (maxWidth < 600.dp) {
        // Small screen layout
        Text("Small screen")
    } else {
        // Large screen layout
        Text("Large screen")
    }
}

50. 使用组合函数构建UI

Composable Function Composition - 组合函数构建

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

@Composable
fun MyScreen() {
    Column {
        Greeting("User 1")
        Greeting("User 2")
        Greeting("User 3")
    }
}

Composable Function Composition: 通过将多个可组合函数嵌套使用来构建复杂UI。

Reusable Composables - 复用可组合函数

@Composable
fun CustomButton(text: String, onClick: () -> Unit) {
    Button(onClick = onClick) {
        Text(text)
    }
}

@Composable
fun ButtonScreen() {
    CustomButton("Click Me") {
        // Handle click
    }
}