Why Does Image Overlap In GridRow?

struct TweetFeedSelectionGridView: View {
  private let ICON_SIZE: CGFloat = 40
  private let ROW_BOTTOM_PADDING: CGFloat = 40
   
  var body: some View {
    Grid(alignment: .top, verticalSpacing: ROW_BOTTOM_PADDING) {
      createTwitterFeedRow(["TwitterDilg", "TwitterDoh", "TwitterDole"])
      createTwitterFeedRow(["TwitterDswd", "TwitterDepEd", "TwitterMmda"])
      createTwitterFeedRow(["TwitterNdrmmc", "TwitterPagasa", "TwitterPcoo"])
      createTwitterFeedRow(["TwitterPhivolcs", "TwitterPia", "TwitterPna"])
      createTwitterFeedRow(["TwitterPnp", "TwitterRedCross", "TwitterTxtFire"])
    }
    .frame(maxWidth: .infinity)
    .background(.red)
  }
   
  @ViewBuilder
  func createTwitterFeedRow(_ feeds: [String]) -> some View {
    GridRow {
      createTwittedFeedCell(feeds[0])
      createTwittedFeedCell(feeds[1])
      createTwittedFeedCell(feeds[2])
    }
    .frame(maxWidth: .infinity)
  }
   
  @ViewBuilder
  func createTwittedFeedCell(_ iconLabel: String) -> some View {
    VStack {
      Image(uiImage: UIImage(named: iconLabel)!)
        .frame(width: ICON_SIZE, height: ICON_SIZE)
      Text(iconLabel.replacingOccurrences(of: "Twitter", with: ""))
        .padding(.top, 10)
    }
  }
}

struct TwitterFeedSelectionGridView_Previews: PreviewProvider {
  static var previews: some View {
    TweetFeedSelectionGridView()
  }
}

Why does the image in the first row overlap? I have no clue why. The image is an ImageSet of 80, 160 and 240x240 images.

Answered by chitgoks in 742795022

add .resizable() to Image is the solution.

@claude31 i have not seen any replies, thought of tagging you if you do not mind since you help a lot. What do you think is wrong with the code?

Accepted Answer

add .resizable() to Image is the solution.

Why Does Image Overlap In GridRow?
 
 
Q