Group, AnimationUpdate, Menu 的使用

1. Group 组堆栈布局的使用

  1.1 实现

// 组堆栈
struct GroupBootcamp: View {
    
    var body: some View {
        VStack(spacing: 50) {
            Text("Hello, world!")
            Group() {
                Text("Hello, world!")
                Text("Hello, world!")
            }
            .font(.caption)
            .foregroundColor(.green)
        }
        .foregroundColor(.red)
        .font(.headline)
    }
}

  1.2 效果图:

2. AnimationUpdate 给 View 添加动画效果

  2.1 实现

/// 动画
struct AnimationUpdateBootcamp: View {
    @State private var animation1: Bool = false
    @State private var animation2: Bool = false
    
    var body: some View {
        ZStack{
            VStack(spacing: 40) {
               
                Button("Action 1") {
                    animation1.toggle()
                }
                Button("Action 2") {
                    animation2.toggle()
                }
                ZStack {
                   Rectangle()
                        .frame(width: 100, height: 100)
                        .frame(maxWidth: .infinity, alignment: animation1 ? .leading : .trailing)
                        .background(Color.green)
                        .frame(maxHeight: .infinity, alignment: animation2 ? .top : .bottom)
                        .background(Color.orange)
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.red)
            }
        }
        // 不加 value 对整个 View 添加动画，View 中一些控件会出现一些问题
        // value: 解决就对某个设置动画的属性添加动画，其他的不做修改
        .animation(.spring(), value: animation1)
        .animation(.linear(duration: 3), value: animation2)
        // deprecated! 弃用
        //.animation(.spring())
    }
}

  2.2 效果图

3. Menu 菜单栏的使用

  3.1 实现

/// 菜单栏
struct MenuBootcamp: View {
    @State private var text: String = "Click me!"
    var body: some View {
        Menu(text) {
            Button("One") {
                text = "One"
            }
            Button("Two") {
                text = "Two"
            }
            Button("Three") {
                text = "Three"
            }
            Button("Four") {
                text = "Four"
            }
        }
    }
}

  3.2 效果图