【JetCompose】入门教程实战基础案例01之显隐动画

风清云淡_A2026-01-01 13:54

任务

实现一个文字显示隐藏的动画

效果预览

图文混排组件

核心组件代码

js 复制代码

@Composable
fun JetpackCompose(modifier: Modifier = Modifier){
    Card(modifier = modifier) {
        var expaned by remember { mutableStateOf(false) }
        Column(verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.padding(all = 16.dp).clickable {
                expaned = !expaned
            }
            ) {
            Image(
                painter = painterResource(id = R.drawable.avatar),
                contentDescription = null,
                modifier = Modifier.padding(all = 8.dp).clip(CircleShape)
            )
           AnimatedVisibility(expaned) {
               Text(text = "Hello World", style = MaterialTheme.typography.bodyLarge)
           }
        }
    }
}

组件预览

js 复制代码

@Preview
@Composable
fun PreviewJetpackCompose(){
    MyJetCompomApp01Theme {
        JetpackCompose()
    }
}

完整实现

js 复制代码

class MainActivity05 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyJetCompomApp01Theme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    JetpackCompose(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun JetpackCompose(modifier: Modifier = Modifier){
    Card(modifier = modifier) {
        var expaned by remember { mutableStateOf(false) }
        Column(verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.padding(all = 16.dp).clickable {
                expaned = !expaned
            }
            ) {
            Image(
                painter = painterResource(id = R.drawable.avatar),
                contentDescription = null,
                modifier = Modifier.padding(all = 8.dp).clip(CircleShape)
            )
           AnimatedVisibility(expaned) {
               Text(text = "Hello World", style = MaterialTheme.typography.bodyLarge)
           }
        }
    }
}

@Preview
@Composable
fun PreviewJetpackCompose(){
    MyJetCompomApp01Theme {
        JetpackCompose()
    }
}