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.