SwiftUI之明暗度brightness設置View Image Color

時間 2020-05-05

標籤 swiftui 之明暗度 brightness 設置 view image color 简体版

原文原文鏈接

SwiftUI之明暗度brightness設置View Image Color

brightness修飾器能夠對視圖進行明暗設置，咱們能夠從0％至100％設調節視圖亮點。

本文價值與收穫

看完本文後，您將可以做出下面的界面

看完本文您將掌握的技能

瞭解brightness
使用brightness設置顏色明暗度
使用brightness設置照片明暗度

brightness簡介

下面顯示了同一圖像的兩個版本。左邊是原稿，右邊是副本，其亮度設置爲0.6spa

代碼

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