SwiftUI条件语句与动画

if条件语句

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

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

if条件示例

struct ContentView: View {
    @State private var isShowingDetail = false
    
    var body: some View {
        VStack {
            // 简单if条件
            if isShowingDetail {
                Text("详细信息")
            }
            
            // if-else条件
            if isShowingDetail {
                Text("显示状态")
            } else {
                Text("隐藏状态")
            }
            
            Button("切换") {
                isShowingDetail.toggle()
            }
        }
    }
}

三元运算符

使用三元运算符实现简洁的条件判断。

Name
语法格式
Type
syntax
Description
- condition ? trueValue : falseValue
- 嵌套使用
- 与修饰符配合
- 用于计算属性
Name
应用技巧
Type
tips
Description
- 简单二选一场景
- 动态样式设置
- 文本内容切换
- 状态颜色变化

三元运算符示例

struct StatusView: View {
    @State private var isActive = false
    
    var body: some View {
        Text(isActive ? "激活" : "未激活")
            .foregroundColor(isActive ? .green : .red)
            .font(.title)
            .onTapGesture {
                isActive.toggle()
            }
    }
}

条件动画

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

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

条件动画示例

struct AnimatedView: View {
    @State private var isExpanded = false
    
    var body: some View {
        VStack {
            Circle()
                .fill(.blue)
                .frame(width: isExpanded ? 200 : 100)
                .animation(.spring(), value: isExpanded)
            
            Button("展开/收起") {
                withAnimation {
                    isExpanded.toggle()
                }
            }
        }
    }
}

实践技巧

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

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

最佳实践示例

struct OptimizedView: View {
    @State private var currentState = 0
    
    var stateView: some View {
        switch currentState {
        case 0:
            return AnyView(Text("状态A")
                .transition(.scale))
        case 1:
            return AnyView(Text("状态B")
                .transition(.slide))
        default:
            return AnyView(Text("状态C")
                .transition(.opacity))
        }
    }
    
    var body: some View {
        VStack {
            stateView
            
            Button("切换状态") {
                withAnimation {
                    currentState = (currentState + 1) % 3
                }
            }
        }
    }
}