Group, AnimationUpdate, Menu 的使用-编程知识

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 = falsevar 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"}}}
}