Skip to content

Instantly share code, notes, and snippets.

@mazz
Last active March 16, 2021 15:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mazz/863887c090266797ddaad096148448d2 to your computer and use it in GitHub Desktop.
Save mazz/863887c090266797ddaad096148448d2 to your computer and use it in GitHub Desktop.
swiftui CardViewModifier
//
// ContentView.swift
// MixedInsets2
//
// Created by Michael Hanna on 2021-03-11.
//
import SwiftUI
struct ContentView: View {
let data = ["Row 1", "Row 2", "Row 3", "Row 4", "Row 5"]
@ScaledMetric private var spacing: CGFloat = 4
var body: some View {
ScrollView {
VStack {
HStack(spacing: 4) {
VStack(alignment: .leading, spacing: spacing) {
Text("First VStack")
}
Spacer()
VStack(alignment: .trailing, spacing: spacing) {
Text("Has")
}
}
HStack(spacing: 4) {
VStack(alignment: .leading, spacing: spacing) {
Text("First VStack")
}
Spacer()
VStack(alignment: .trailing, spacing: spacing) {
Text("No")
}
}
HStack(spacing: 4) {
VStack(alignment: .leading, spacing: spacing) {
Text("First VStack")
}
Spacer()
VStack(alignment: .trailing, spacing: spacing) {
Text("Inset")
}
}
}
.background(Color.white)
VStack {
HStack(spacing: 4) {
VStack(alignment: .leading, spacing: spacing) {
Text("Section Header")
.foregroundColor(.white)
}
Spacer()
VStack(alignment: .trailing, spacing: spacing) {
Button(action: {
print("info bug tapped")
}) {
Image(systemName: "pencil")
.foregroundColor(Color.white)
}
.buttonStyle(BorderlessButtonStyle())
}
}
.background(Color.black)
.accessibilityRemoveTraits(.isStaticText)
.accessibilityAddTraits(.isHeader)
Divider()
ForEach(data, id:\.self) { row in
VStack {
Text("Section 1, \(row)")
Divider()
}
}
}
.modifier(CardViewModifier())
}
.background(Color(.lightGray))
}
}
struct CardViewModifier: ViewModifier {
func body(content: Content) -> some View {
content
.padding()
.frame(maxWidth: .infinity)
.background(Color(.white))
.cornerRadius(12)
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
@mazz
Copy link
Author

mazz commented Mar 11, 2021

Screen Shot 2021-03-11 at 10 39 10 AM

@mazz
Copy link
Author

mazz commented Mar 16, 2021

fixed:

//
//  ContentView.swift
//  MixedInsets2
//
//  Created by Michael Hanna on 2021-03-11.
//

import SwiftUI

struct ContentView: View {
    let data = ["Row 1", "Row 2", "Row 3", "Row 4", "Row 5"]
    @ScaledMetric private var spacing: CGFloat = 4
    var body: some View {
        ScrollView {
            VStack {
                HStack(spacing: 4) {
                    VStack(alignment: .leading, spacing: spacing) {
                        Text("First VStack")
                    }
                    Spacer()
                    VStack(alignment: .trailing, spacing: spacing) {
                        Text("Has")
                    }
                }
                HStack(spacing: 4) {
                    VStack(alignment: .leading, spacing: spacing) {
                        Text("First VStack")
                    }
                    Spacer()
                    VStack(alignment: .trailing, spacing: spacing) {
                        Text("No")
                    }
                }
                HStack(spacing: 4) {
                    VStack(alignment: .leading, spacing: spacing) {
                        Text("First VStack")
                    }
                    Spacer()
                    VStack(alignment: .trailing, spacing: spacing) {
                        Text("Inset")
                    }
                }
            }
            .background(Color.white)

            VStack {
                HStack(spacing: 4) {
                    VStack(alignment: .leading, spacing: spacing) {
                        Text("Section Header")
                            .foregroundColor(.white)
                    }
                    Spacer()
                    VStack(alignment: .trailing, spacing: spacing) {
                        Button(action: {
                            print("info bug tapped")
                        }) {
                            Image(systemName: "pencil")
                                .foregroundColor(Color.white)
                        }
                        .buttonStyle(BorderlessButtonStyle())
                    }
                }
                .padding()
                .background(Color.black)
                .accessibilityRemoveTraits(.isStaticText)
                .accessibilityAddTraits(.isHeader)
                ForEach(data, id:\.self) { row in
                    VStack {
                        Text("Section 1, \(row)")
                        Divider()
                    }
                }
            }
            .modifier(CardViewModifier())
        }
        .background(Color(.lightGray))
    }
}

struct CardViewModifier: ViewModifier {
    
    func body(content: Content) -> some View {
        content
            .frame(maxWidth: .infinity)
            .background(Color(.white))
            .cornerRadius(12)
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment