ComposeUI条件语句与动画

if条件语句

ComposeUI中if条件语句的基本用法。

Name
基本语法
Type
if-syntax
Description
- if 单一条件判断
- if-else 二选一
- if-else if 多条件判断
- 条件中的布尔表达式
Name
使用场景
Type
use-cases
Description
- 控制组件显示/隐藏
- 根据状态切换组件
- 条件性修饰符应用
- 动态内容渲染

if条件示例

@Composable
fun ContentView() {
    var isShowingDetail by remember { mutableStateOf(false) }
    
    Column {
        // 简单if条件
        if (isShowingDetail) {
            Text("详细信息")
        }
        
        // if-else条件
        if (isShowingDetail) {
            Text("显示状态")
        } else {
            Text("隐藏状态")
        }
        
        Button(onClick = { isShowingDetail = !isShowingDetail }) {
            Text("切换")
        }
    }
}

条件表达式

使用when表达式实现简洁的条件判断。

Name
语法格式
Type
syntax
Description
- when 表达式
- 多分支条件
- 与修饰符配合
- 用于计算属性
Name
应用技巧
Type
tips
Description
- 多选一场景
- 动态样式设置
- 文本内容切换
- 状态颜色变化

条件表达式示例

@Composable
fun StatusView() {
    var isActive by remember { mutableStateOf(false) }
    
    Text(
        text = if (isActive) "激活" else "未激活",
        color = if (isActive) Color.Green else Color.Red,
        style = MaterialTheme.typography.titleLarge,
        modifier = Modifier.clickable { isActive = !isActive }
    )
}

条件动画

基于条件状态的简单动画效果。

Name
动画类型
Type
animation-types
Description
- 渐隐渐现
- 缩放动画
- 位移动画
- 旋转动画
Name
动画配置
Type
animation-config
Description
- 动画时长
- 动画曲线
- 动画延迟
- 重复次数

条件动画示例

@Composable
fun AnimatedView() {
    var isExpanded by remember { mutableStateOf(false) }
    
    Column {
        Box(
            modifier = Modifier
                .size(
                    animateDpAsState(
                        targetValue = if (isExpanded) 200.dp else 100.dp,
                        animationSpec = spring()
                    ).value
                )
                .background(Color.Blue, CircleShape)
        )
        
        Button(onClick = { isExpanded = !isExpanded }) {
            Text("展开/收起")
        }
    }
}

实践技巧

条件语句和动画的最佳实践。

Name
代码优化
Type
optimization
Description
- 提取条件逻辑
- 使用remember
- 避免复杂嵌套
- 合理使用Box
Name
性能考虑
Type
performance
Description
- 减少状态变化
- 优化动画性能
- 条件判断缓存
- 避免频繁重组

最佳实践示例

@Composable
fun OptimizedView() {
    var currentState by remember { mutableStateOf(0) }
    
    @Composable
    fun StateView() {
        AnimatedVisibility(
            visible = true,
            enter = when (currentState) {
                0 -> scaleIn()
                1 -> slideInHorizontally()
                else -> fadeIn()
            }
        ) {
            Text(
                text = when (currentState) {
                    0 -> "状态A"
                    1 -> "状态B"
                    else -> "状态C"
                }
            )
        }
    }
    
    Column {
        StateView()
        
        Button(
            onClick = { 
                currentState = (currentState + 1) % 3 
            }
        ) {
            Text("切换状态")
        }
    }
}