swiftUI 颜色渐变的实现

134 阅读1分钟
  • 左右渐变
.background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .leading, endPoint: .trailing))
  • 上下渐变
.background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .top, endPoint: .bottom))
  • 按钮背景颜色渐变
Button {
    debugPrint("登录操作")
} label: {
    // 按钮样式
    Text("测试按钮")
        .font(.system(size: 18))
        .frame(maxWidth: .infinity)
        .foregroundColor(.white)
        .padding(.top,10)
        .padding(.bottom,10)
}
.background(LinearGradient(gradient: Gradient(colors: [Color(hex: "#FFC0CB"), Color.green]), startPoint: .leading, endPoint: .trailing))
.cornerRadius(10)
.padding()
  • 十六进制工具
extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: // RGB (12-bit)
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6: // RGB (24-bit)
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: // ARGB (32-bit)
            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (a, r, g, b) = (1, 1, 1, 0)
        }
        self.init(
            .sRGB,
            red: Double(r) / 255,
            green: Double(g) / 255,
            blue:  Double(b) / 255,
            opacity: Double(a) / 255
        )
    }
}