Mistj's Digital Garden

Appearance

SwiftUI组件-VStack如何填满宽度

参考StackOverflow: ios - Make a VStack fill the width of the screen in SwiftUI - Stack Overflow

默认效果 ​

截屏2024-01-18 08.56.54.png

frame ​

swift
import SwiftUI

struct DemoVstackFullWidth: View {
    var body: some View {
        VStack(content: {
            Text("Hello, World!")
                .background(Color.red)
            Spacer()
        })
        .background(Color.green)
        .frame(
            minWidth: 0,
            maxWidth: .infinity,
            minHeight: 0,
            maxHeight: .infinity,
            alignment: .topLeading
        )
        .background(Color.yellow)
    }
}

#Preview {
    DemoVstackFullWidth()
}
import SwiftUI

struct DemoVstackFullWidth: View {
    var body: some View {
        VStack(content: {
            Text("Hello, World!")
                .background(Color.red)
            Spacer()
        })
        .background(Color.green)
        .frame(
            minWidth: 0,
            maxWidth: .infinity,
            minHeight: 0,
            maxHeight: .infinity,
            alignment: .topLeading
        )
        .background(Color.yellow)
    }
}

#Preview {
    DemoVstackFullWidth()
}

截屏2024-01-18 08.58.15.png

嵌入HStack,再用Spacer填充剩余空间 ​

swift
import SwiftUI

struct DemoVstackFullWidth: View {
    var body: some View {
        HStack(content: {
            VStack(content: {
                Text("Hello, World!")
                    .background(Color.red)
                Spacer()
            })
            .background(Color.green)
            Spacer()
        }).background(Color.blue)
    }
}

#Preview {
    DemoVstackFullWidth()
}
import SwiftUI

struct DemoVstackFullWidth: View {
    var body: some View {
        HStack(content: {
            VStack(content: {
                Text("Hello, World!")
                    .background(Color.red)
                Spacer()
            })
            .background(Color.green)
            Spacer()
        }).background(Color.blue)
    }
}

#Preview {
    DemoVstackFullWidth()
}

截屏2024-01-18 09.01.40.png

使用ZStack + Full Size Background View ​

  1. embed  VStack inside  ZStack(alignment: .topLeading)
  2. add full size background view
swift
import SwiftUI
struct DemoVstackFullWidth: View {
    var body: some View {
        ZStack(alignment: .topLeading, content: {
            Color.blue.frame(maxWidth: .infinity, maxHeight: .infinity)
            VStack(content: {
                Text("Hello, World!")
                    .background(Color.red)
                Spacer()
            })
            .background(Color.green)
        })
    }
}

#Preview {
    DemoVstackFullWidth()
}
import SwiftUI
struct DemoVstackFullWidth: View {
    var body: some View {
        ZStack(alignment: .topLeading, content: {
            Color.blue.frame(maxWidth: .infinity, maxHeight: .infinity)
            VStack(content: {
                Text("Hello, World!")
                    .background(Color.red)
                Spacer()
            })
            .background(Color.green)
        })
    }
}

#Preview {
    DemoVstackFullWidth()
}

GeometryReader 计算 ​

截屏2024-01-18 09.15.18.png

swift
import SwiftUI

struct DemoVstackFullWidth: View {
    var body: some View {
        GeometryReader(content: { geometry in
            VStack(alignment: .leading, content: {
                Text("Hello, World!")
                    .background(Color.red)
                Spacer()
            })
            .background(Color.yellow)
            .frame(width: geometry.size.width, height: geometry.size.height,
                   alignment: .topLeading)
            .background(Color.blue)
        })
    }
}

#Preview {
    DemoVstackFullWidth()
}
import SwiftUI

struct DemoVstackFullWidth: View {
    var body: some View {
        GeometryReader(content: { geometry in
            VStack(alignment: .leading, content: {
                Text("Hello, World!")
                    .background(Color.red)
                Spacer()
            })
            .background(Color.yellow)
            .frame(width: geometry.size.width, height: geometry.size.height,
                   alignment: .topLeading)
            .background(Color.blue)
        })
    }
}

#Preview {
    DemoVstackFullWidth()
}

Overlay ​

截屏2024-01-18 09.18.54.png

swift
import SwiftUI
struct DemoVstackFullWidth: View {
    var body: some View {
        Color.pink
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .overlay(
                VStack(alignment: .leading, content: {
                    Text("Hello, World!")
                        .background(Color.green)
                    Spacer()
                }).background(Color.purple),
                alignment: .topLeading
            )
    }
}

#Preview {
    DemoVstackFullWidth()
}
import SwiftUI
struct DemoVstackFullWidth: View {
    var body: some View {
        Color.pink
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .overlay(
                VStack(alignment: .leading, content: {
                    Text("Hello, World!")
                        .background(Color.green)
                    Spacer()
                }).background(Color.purple),
                alignment: .topLeading
            )
    }
}

#Preview {
    DemoVstackFullWidth()
}