Stack 的使用

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

  5.2 效果图: