SwiftUI - blur、background、Material

447 阅读1分钟

blur

截屏2022-12-08 下午4.10.21.png

Text("Stay Hungry, Stay Foolish!")
    .font(.largeTitle)
    .blur(radius: 2)

Image(systemName: "swift")
    .font(.largeTitle)
    .blur(radius: 4)

background、Material

截屏2022-12-08 下午4.21.29.png

struct ContentView: View {
    var label: some View {
        Label("Swift", systemImage: "swift")
            .font(.system(size: 30))
            .padding()
    }

    var body: some View {
        ZStack {
            Image("baige")
                .resizable()
                .scaledToFill()
                .frame(width: 300, height: 400)
                .cornerRadius(20)

            VStack {
                label
                    .background(.regularMaterial)
                label
                    .background(.thickMaterial)
                label
                    .background(.thinMaterial)
                label
                    .background(.ultraThinMaterial)
                label
                    .background(.ultraThickMaterial)
            }
        }
    }
}

light/Dark Mode 下,会自动调整效果适应系统的浅/深色外观。 Materia 还有另外一种样式:.bar ,其样式效果和系统的 toolbar 保持一致。