Stack/堆栈布局的使用

Hanyang Li

已于 2023-09-25 17:52:44 修改

阅读量118

点赞数

分类专栏： SwiftUI Bootcamp 文章标签： iOS Swift UI

于 2023-05-19 15:29:31 首次发布

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

版权

SwiftUI Bootcamp 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

1. 说明:

// Vstacks -> Vertical 垂直的堆栈

// Hstacks -> Horizont 水平的堆栈

// Zstacks -> zIndex (back to front) Z的堆栈

2. 垂直/水平堆栈

2.1 实现

func testVHStack() -> some View{
    // VStack/HStack: alignment: 对齐方式 | spacing: 间距，nil 默认为: 8
    VStack(alignment: .center, spacing: nil) {
        Rectangle()
            .fill(Color.red)
            .frame(width: 200, height: 200)
        
        Rectangle()
            .fill(Color.green)
            .frame(width: 150, height: 150)
        
        Rectangle()
            .fill(Color.orange)
            .frame(width: 100, height: 100)
    }
}

2.2 效果图:

3. Z 堆栈嵌套

3.1 实现

// Z 堆栈嵌套
func testZStack() -> some View{
    ZStack(alignment: .top) {
        // 背景矩形
        Rectangle()
            .fill(Color.yellow)
            .frame(width: 350, height: 500, alignment: .center)
        // 嵌套垂直堆栈
        VStack(alignment: .leading, spacing: 20){
            Rectangle()
                .fill(Color.red)
                .frame(width: 150, height: 150) // 添加矩形
            Rectangle()
                .fill(Color.gray)
                .frame(width: 100, height: 100) // 添加矩阵
            // 嵌套水平堆栈
            HStack(alignment: .bottom, spacing: nil) {
                Rectangle()
                    .fill(Color.purple)
                    .frame(width: 50, height: 50) // 添加矩阵
                Rectangle()
                    .fill(Color.pink)
                    .frame(width: 75, height: 75) // 添加矩形
                Rectangle()
                    .fill(Color.blue)
                    .frame(width: 50, height: 50) // 添加矩形
            }
            .background(Color.white)
        }
        .background(Color.black)
    }
}

3.2 效果图:

4. 文字堆栈

4.1 实现

/// 文字堆栈
func testTextStack() -> some View{
    VStack(spacing: 20){
        HStack(alignment: .bottom, spacing: nil){
            Text("Items in your cart:")
                .font(.caption)
                .foregroundColor(.gray)
            Text("5")
                .font(.largeTitle)
        }
        VStack(alignment: .center, spacing: 5){
            Text("5")
                .font(.largeTitle)
                .underline()
            Text("Items in your cart:")
                .font(.caption)
                .foregroundColor(.gray)
        }
    }
}

4.2 效果图

5. 三种堆栈方式，实现不同，结果相同

5.1 实现

/// 三种堆栈方式，实现不同，结果相同
func bothStacks() -> some View{
    VStack(spacing: 50){
        // Z 堆栈实现布局
        ZStack{
            Circle()
                .fill(Color.black)
                .frame(width: 100, height: 100)
            Text("1")
                .font(.largeTitle)
                .foregroundColor(Color.white)
        }
        
        // 文字形式实现
        Text("1")
            .font(.largeTitle)
            .foregroundColor(Color.white)
            .background(
                Circle()
                    .fill(Color.black)
                    .frame(width: 100, height: 100)
            )
        
        // 先圆再文字
        Circle()
            .fill(Color.black)
            .frame(width: 100, height: 100)
            .overlay(
                Text("1")
                    .font(.largeTitle)
                    .foregroundColor(Color.white)
            )
    }
}