Skip to content

Instantly share code, notes, and snippets.

@below
Last active February 7, 2021 16:50
Show Gist options
  • Save below/750544c10d9be8d3095581949d122927 to your computer and use it in GitHub Desktop.
Save below/750544c10d9be8d3095581949d122927 to your computer and use it in GitHub Desktop.
struct TeamMemberView: View {
var columns: [GridItem] =
Array(repeating: .init(.flexible()), count: 2)
var body: some View {
ScrollView {
LazyVGrid(columns: columns, alignment: .leading) {
Text("Name:")
Text("Anne Applebaum")
Text("Contact:")
Text("+1-415-555-1111, [email protected]").lineLimit(0)
}.padding()
}
}
}
@bigmountainstudio
Copy link

I'm not sure what the goal is but I think there might be a better way to go about this. If you have a TeamMember model you want to be repeated, then maybe something like this will work better?

Option 1 - Using String Interpolation

struct TeamMember: Identifiable {
    var id = UUID()
    var name = ""
    var contact = ""
}

struct TeamMemberView: View {
    var data = [TeamMember(name: "Anne Applebaum", contact: "+1-415-555-1111, [email protected]"),
                TeamMember(name: "Below The Chrome", contact: "+1-415-555-1111, [email protected]")]
    
    var columns = [GridItem()]
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, alignment: .leading) {
                ForEach(data) { datum in
                    VStack(alignment: .leading) {
                        Text("Name: \(datum.name)")
                        Text("Contact: \(datum.contact)")
                            .lineLimit(1)
                    }
                    .padding(.bottom)
                }
            }.padding()
        }
    }
}

Option1

Option 2 - Format individual Text views

ScrollView {
    LazyVGrid(columns: columns, alignment: .leading) {
        ForEach(data) { datum in
            VStack(alignment: .leading) {
                HStack {
                    Text("Name: ")
                        .bold()
                    Text(datum.name)
                }
                HStack {
                    Text("Contact: ")
                        .bold()
                    Text(datum.contact)
                        .lineLimit(1)
                }
            }
            .padding(.bottom)
        }
    }.padding()
}

Option2

Option 3 - Imitates columns

ScrollView {
    LazyVGrid(columns: columns, alignment: .leading) {
        ForEach(data) { datum in
            HStack {
                VStack(alignment: .leading) {
                    Text("Name: ")
                        .bold()
                    Text("Contact: ")
                        .bold()
                }
                VStack(alignment: .leading) {
                    Text(datum.name)
                    Text(datum.contact)
                        .lineLimit(1)
                }
            }
            .padding(.bottom)
        }
    }.padding()
}

Option3

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