Ctrlk

🔸color.gradient

standard gradient for the color.

SwiftUI ⟩ shapes ⟩ ShapeStyle ⟩ Color ⟩ .gradient

color's standard gradient.

SwiftUI ⟩ Color ⟩ .gradient：standard gradient for the color.

import SwiftUI

struct StandardGradientView: View {

    let spacing: CGFloat = 8
    let width: CGFloat = 80    // column width
    
    // 8 columns
    var columns: [GridItem] {
        // ⭐️ last GridItem's spacing is ignored.
        Array(
            repeating: GridItem(
                .fixed(width),        // ⭐️ fixed width
                spacing: spacing+6    // spacing to next column
            ), 
            count: 8
        )
    }
    
    var body: some View {
        // ⭐️ lazy v grid
        LazyVGrid(columns: columns, spacing: spacing) { // spacing between rows
            ForEach(Color.standardColors, id: \.self) { color in
                ColorSwatch(color: color, size: 80)
            }
        }.padding() 
    }
}

// previews
struct StandardGradientView_Previews: PreviewProvider {
    static var previews: some View {
        StandardGradientView()
    }
}

import SwiftUI

struct ColorSwatch: View {
    
    let color: Color        
    let size: CGFloat    // swatch size
    
    var body: some View {
        VStack {
            
            Rectangle()
                .fill(color.gradient.shadow(.inner(
                    color: .bg2, radius: 2, x: 2, y: -2
                )))
                .frame(width: size, height: size)
                .border(Color.bg3)    // Color + system colors
            
            Text("\(color)")
                .font(.system(size: 14))
                .fixedSize()            // ⭐️ no wrap
        }
        .padding(4)
        .border(Color.bg3)
    }
}

PreviousColor NextTheme

Last updated 11 months ago

Was this helpful?