List in SwiftUI not appearing correctly.

Question

DanDudeDev OP

Created Oct ’21

Replies 2

Boosts 0

Participants 2

I am building a list in SwiftUI.

In my view, I want the 'Jesse Lingard' and 'Manchester United' text to be next to the image but they are appearing underneath. How do I fix this?

Screenshot 2021-10-28 at 22.49.46.png

Answered by DanDudeDev in 693141022

I found a solution.

I created my View in a separate file then embedded it as a List in my main view like so:

SoccerCell

      HStack(alignment: .center, spacing: 15){
      Image("jesse-lingard")
        .resizable()
        .scaledToFit()
        .frame(height: 70)
        .cornerRadius(8)
       
      VStack(alignment: .leading, spacing: 5){
        Text("Jesse Lingard")
          .font(.system(size: 20, weight: .bold))
          .lineLimit(1)
        Text("Manchester United")
          .foregroundColor(.secondary)
          .font(.system(size: 15, weight: .regular))
      }
    }

Main content view

      List(0 ..< 5) { item in
      SoccerCell()
    }

Boost

Answer 1

DanDudeDev OP

Oct ’21

Accepted Answer

I found a solution.

I created my View in a separate file then embedded it as a List in my main view like so:

SoccerCell

      HStack(alignment: .center, spacing: 15){
      Image("jesse-lingard")
        .resizable()
        .scaledToFit()
        .frame(height: 70)
        .cornerRadius(8)
       
      VStack(alignment: .leading, spacing: 5){
        Text("Jesse Lingard")
          .font(.system(size: 20, weight: .bold))
          .lineLimit(1)
        Text("Manchester United")
          .foregroundColor(.secondary)
          .font(.system(size: 15, weight: .regular))
      }
    }

Main content view

      List(0 ..< 5) { item in
      SoccerCell()
    }

0

Answer 2

OOPer OP

Oct ’21

Can you show your code?

0

	HStack(alignment: .center, spacing: 15){
	Image("jesse-lingard")
	.resizable()
	.scaledToFit()
	.frame(height: 70)
	.cornerRadius(8)

	VStack(alignment: .leading, spacing: 5){
	Text("Jesse Lingard")
	.font(.system(size: 20, weight: .bold))
	.lineLimit(1)
	Text("Manchester United")
	.foregroundColor(.secondary)
	.font(.system(size: 15, weight: .regular))
	}
	}