Home > Software design >  Is their a better way to create a SwiftUI list looping through an array than looping for each VStack
Is their a better way to create a SwiftUI list looping through an array than looping for each VStack

Time:12-03

I am trying to create a table that scrolls horizontally after the first column inside, I have a for loop for each column to get data from an array. I know this isn't the correct way because of how many times i am looping the same array but i cant figure out a better solution of doing this.

    struct SampleData: Identifiable {
      let id = UUID()
      let Entity: String
      let address1: String
      let address2: String
      let city: String
      let state: String
      let zip: Int
      let website: String
      let billToName: String
      let billable: Bool
      let hours: String
      let accountNo: Int
      let BillToEntity: String
      let email: String

    }

    let datas = [
      SampleData(
        Entity: "Entity 1", address1: "1234 N. Main", address2: "Suite 200", city: "austin",
        state: "TX", zip: 12345, website: "www.website.com", billToName: "Test Name 1", billable: false,
        hours: "8-5 M-F", accountNo: 123_456_789, BillToEntity: "Bill To Entity 1",
        email: "[email protected]"),
      SampleData(
        Entity: "Entity 2", address1: "5678 N. Main", address2: "Suite 300", city: "livingston",
        state: "TX", zip: 12345, website: "www.website.com", billToName: "Test Name 2", billable: false,
        hours: "8-5 M-F", accountNo: 123_456_789, BillToEntity: "Bill To Entity 2",
        email: "[email protected]"),
      SampleData(
        Entity: "Entity 3", address1: "90025 N. Main", address2: "Suite 400", city: "houston",
        state: "TX", zip: 12345, website: "www.website.com", billToName: "Test Name 3", billable: true,
        hours: "8-5 M-F", accountNo: 123_456_789, BillToEntity: "Bill To Entity 3",
        email: "[email protected]"),
      SampleData(
        Entity: "Entity 4", address1: "4456 N. Main", address2: "Suite 500", city: "spring",
        state: "TX", zip: 12345, website: "www.website.com", billToName: "Test Name 4", billable: true,
        hours: "8-5 M-F", accountNo: 123_456_789, BillToEntity: "Bill To Entity 4",
        email: "[email protected]"),
      SampleData(
        Entity: "Entity 5", address1: "4456 N. Main", address2: "Suite 500", city: "spring",
        state: "TX", zip: 12345, website: "www.website.com", billToName: "Test Name 4", billable: true,
        hours: "8-5 M-F", accountNo: 123_456_789, BillToEntity: "Bill To Entity 4",
        email: "[email protected]"),
      SampleData(
        Entity: "Entity 6", address1: "56 N. Main", address2: "Suite 500", city: "spring", state: "TX",
        zip: 12345, website: "www.website.com", billToName: "Test Name 4", billable: false,
        hours: "8-5 M-F", accountNo: 123_456_789, BillToEntity: "Bill To Entity 4",
        email: "[email protected]"),
      SampleData(
        Entity: "Entity 7", address1: "4456 N", address2: "Suite 500", city: "spring", state: "TX",
        zip: 12345, website: "www.website.com", billToName: "Test Name 4", billable: true,
        hours: "8-5 M-F", accountNo: 123_456_789, BillToEntity: "Bill To Entity 4",
        email: "[email protected]"),
      SampleData(
        Entity: "Entity 8", address1: "44 Main", address2: "Suite 500", city: "spring", state: "TX",
        zip: 12345, website: "www.website.com", billToName: "Test Name 4", billable: true,
        hours: "8-5 M-F", accountNo: 123_456_789, BillToEntity: "Bill To Entity 4",
        email: "[email protected]"),
    ]

    struct TablesView: View {
      @State var billable = false

      var body: some View {

        HStack (alignment: .top){
          VStack {
            Text("Entity")
             
            HStack(spacing: 16) {

              VStack {
                ForEach(datas) { val in
                  Text(val.Entity)
                }
              }

            }
          }

          ScrollView(.horizontal) {
            HStack(alignment: .top) {

              VStack {

                VStack {
                  Text("Address1")
                  ForEach(datas) { val in
                    Text(val.address1)
                  }
                }
              }
              VStack {

                VStack {
                  Text("Address2")
                  ForEach(datas) { val in
                    Text(val.address2)
                  }
                }
              }
              VStack {

                VStack {
                  Text("City")
                  ForEach(datas) { val in
                    Text(val.city)
                  }
                }
              }
              VStack {

                VStack {
                  Text("State")
                  ForEach(datas) { val in
                    Text(val.state)
                  }
                }
              }
              VStack {

                VStack {
                  Text("Zip")
                  ForEach(datas) { val in
                    Text(String(val.zip))
                  }
                }
              }
              VStack {

                VStack {
                  Text("Website")
                  ForEach(datas) { val in
                    Text(val.website)
                  }
                }
              }
              VStack {

                VStack {
                  Text("Bill To")
                  ForEach(datas) { val in
                    Text(val.billToName)
                  }
                }
              }
              VStack {

                VStack {
                  Text("Billable")
                  ForEach(datas) { val in

                    Image(systemName: val.billable ? "checkmark.square.fill" : "square")
                      .foregroundColor(val.billable ? Color(UIColor.systemBlue) : Color.secondary)
                      .onTapGesture {
                        self.billable.toggle()
                      }
                  }
                }
              }
            }
          }
        }
      }
    }

enter image description here

  • Related