Group/组堆栈布局, AnimationUpdate/动画更新, Menu/菜单栏的使用

Hanyang Li

已于 2023-09-26 10:07:40 修改

阅读量194

点赞数

于 2023-07-14 15:56:55 首次发布

本文链接：https://blog.csdn.net/u011193452/article/details/131725534

版权

SwiftUI Bootcamp 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文介绍了在SwiftUI中如何使用Group进行堆栈布局，展示了一个简单的示例以及其效果图。接着，文章讲解了如何为View添加Animation效果，包括spring和linear两种动画类型，并提供了交互式的按钮示例。最后，文章展示了Menu组件的运用，用于创建下拉菜单并更新文本状态。

摘要由CSDN通过智能技术生成

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