SwiftUI之明暗度brightness设置View Image Color

SwiftUI之明暗度brightness设置View Image Color

brightness修饰器能够对视图进行明暗设置，咱们能够从0％至100％设调节视图亮点。

本文价值与收获

看完本文后，您将可以做出下面的界面

看完本文您将掌握的技能

• 了解brightness
• 使用brightness设置颜色明暗度
• 使用brightness设置照片明暗度

brightness简介

下面显示了同一图像的两个版本。左边是原稿，右边是副本，其亮度设置为0.6

代码

struct Brightness_Intro: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Brightness").font(.largeTitle)
            Text("Introduction").font(.title).foregroundColor(.gray)
            Text("您可使用“亮度”修改器更改颜色，图像或视图，使它们更亮。有效值为0（无效果）至1（完整效果）。")
                .frame(maxWidth: .infinity)
                .font(.title).padding()
                .background(Color.pink)
                .layoutPriority(1)
                .foregroundColor(.white)
            
            HStack {
                Color.black
                    .frame(width: 50, height: 50)
                    .brightness(0)
                    .overlay(Text("0%").foregroundColor(.white))
                Color.black
                    .frame(width: 50, height: 50)
                    .brightness(0.2)
                    .overlay(Text("20%").foregroundColor(.white))
                Color.black
                    .frame(width: 50, height: 50)
                    .brightness(0.4)
                    .overlay(Text("40%").foregroundColor(.white))
                Color.black
                    .frame(width: 50, height: 50)
                    .brightness(0.6)
                    .overlay(Text("60%"))
                Color.black
                    .frame(width: 50, height: 50)
                    .brightness(0.8)
                    .overlay(Text("80%"))
                Color.black
                    .frame(width: 50, height: 50)
                    .brightness(1)
                    .overlay(Text("100%"))
            }
            HStack {
                Color.red
                    .frame(width: 50, height: 50)
                    .brightness(0)
                    .overlay(Text("0%"))
                Color.red
                    .frame(width: 50, height: 50)
                    .brightness(0.2)
                    .overlay(Text("20%"))
                Color.red
                    .frame(width: 50, height: 50)
                    .brightness(0.4)
                    .overlay(Text("40%"))
                Color.red
                    .frame(width: 50, height: 50)
                    .brightness(0.6)
                    .overlay(Text("60%"))
                Color.red
                    .frame(width: 50, height: 50)
                    .brightness(0.8)
                    .overlay(Text("80%"))
                Color.red
                    .frame(width: 50, height: 50)
                    .brightness(1)
                    .overlay(Text("100%"))
            }
            HStack {
                Color.purple
                    .frame(width: 50, height: 50)
                    .brightness(0)
                    .overlay(Text("0%"))
                Color.purple
                    .frame(width: 50, height: 50)
                    .brightness(0.2)
                    .overlay(Text("20%"))
                Color.purple
                    .frame(width: 50, height: 50)
                    .brightness(0.4)
                    .overlay(Text("40%"))
                Color.purple
                    .frame(width: 50, height: 50)
                    .brightness(0.6)
                    .overlay(Text("60%"))
                Color.purple
                    .frame(width: 50, height: 50)
                    .brightness(0.8)
                    .overlay(Text("80%"))
                Color.purple
                    .frame(width: 50, height: 50)
                    .brightness(1)
                    .overlay(Text("100%"))
            }
            HStack {
                Color.blue
                    .frame(width: 50, height: 50)
                    .brightness(0)
                    .overlay(Text("0%"))
                Color.blue
                    .frame(width: 50, height: 50)
                    .brightness(0.2)
                    .overlay(Text("20%"))
                Color.blue
                    .frame(width: 50, height: 50)
                    .brightness(0.4)
                    .overlay(Text("40%"))
                Color.blue
                    .frame(width: 50, height: 50)
                    .brightness(0.6)
                    .overlay(Text("60%"))
                Color.blue
                    .frame(width: 50, height: 50)
                    .brightness(0.8)
                    .overlay(Text("80%"))
                Color.blue
                    .frame(width: 50, height: 50)
                    .brightness(1)
                    .overlay(Text("100%"))
            }
            HStack {
                Color.orange
                    .frame(width: 50, height: 50)
                    .brightness(0)
                    .overlay(Text("0%"))
                Color.orange
                    .frame(width: 50, height: 50)
                    .brightness(0.2)
                    .overlay(Text("20%"))
                Color.orange
                    .frame(width: 50, height: 50)
                    .brightness(0.4)
                    .overlay(Text("40%"))
                Color.orange
                    .frame(width: 50, height: 50)
                    .brightness(0.6)
                    .overlay(Text("60%"))
                Color.orange
                    .frame(width: 50, height: 50)
                    .brightness(0.8)
                    .overlay(Text("80%"))
                Color.orange
                    .frame(width: 50, height: 50)
                    .brightness(1)
                    .overlay(Text("100%"))
            }
            HStack {
                Image("sunset")
                    .brightness(0.25)
                    .overlay(Text("25%"))
                Image("sunset")
                    .brightness(0.5)
                    .overlay(Text("50%"))
                Image("sunset")
                    .brightness(0.75)
                    .overlay(Text("75%"))
            }
        }
    }
}

技术交流

QQ:3365059189
SwiftUI技术交流QQ群:518696470

• 请关注个人专栏icloudend, SwiftUI教程与源码

https://www.jianshu.com/c/7b3...