How to extend tappable area to whole frame in SwiftUI (iOS14)? - swiftui

Question

I am trying to make a VGrid with Swift 5.3, but the only tappable area is the upper part of the rectangle. Other answers suggest contentShape, but I am unable to make that work either. How to make the whole frame tappable? Code below:
import SwiftUI
import Combine
import Foundation
struct Item: Codable, Identifiable, Equatable {
var id: Int
var name: String
}
final class UserData: ObservableObject {
#Published var items = Bundle.main.decode([Item].self, from: "data.json")
}
struct ContentView: View {
#State var itemID = Item.ID()
#StateObject var userData = UserData()
let columns = [
GridItem(.adaptive(minimum: 118))
]
var body: some View {
NavigationView {
ScrollView {
LazyVGrid(columns: columns) {
ForEach(userData.items) { item in
NavigationLink(destination: ContentDetail(itemID: item.id - 1)) {
ContentRow(item: item)
}
}
}
}
}
}
}
struct ContentRow: View {
var item: Item
var body: some View {
VStack {
GeometryReader { geo in
ZStack{
VStack(alignment: .trailing) {
Text(item.name)
.font(.caption)
}
}
.padding()
.foregroundColor(Color.primary)
.frame(width: geo.size.width, height: 120)
.border(Color.primary, width: 2)
.cornerRadius(5)
.contentShape(Rectangle())
}
}
}
}
struct ContentDetail: View {
#State var itemID = Item.ID()
#StateObject var userData = UserData()
var body: some View {
Text(userData.items[itemID].name)
}
}
extension Bundle {
func decode<T: Decodable>(_ type: T.Type, from file: String, dateDecodingStrategy: JSONDecoder.DateDecodingStrategy = .deferredToDate, keyDecodingStrategy: JSONDecoder.KeyDecodingStrategy = .useDefaultKeys) -> T {
guard let url = self.url(forResource: file, withExtension: nil) else {
fatalError("Failed to locate \(file) in bundle.")
}
guard let data = try? Data(contentsOf: url) else {
fatalError("Failed to load \(file) from bundle.")
}
let decoder = JSONDecoder()
decoder.dateDecodingStrategy = dateDecodingStrategy
decoder.keyDecodingStrategy = keyDecodingStrategy
do {
return try decoder.decode(T.self, from: data)
} catch DecodingError.keyNotFound(let key, let context) {
fatalError("Failed to decode \(file) from bundle due to missing key '\(key.stringValue)' not found – \(context.debugDescription)")
} catch DecodingError.typeMismatch(_, let context) {
fatalError("Failed to decode \(file) from bundle due to type mismatch – \(context.debugDescription)")
} catch DecodingError.valueNotFound(let type, let context) {
fatalError("Failed to decode \(file) from bundle due to missing \(type) value – \(context.debugDescription)")
} catch DecodingError.dataCorrupted(_) {
fatalError("Failed to decode \(file) from bundle because it appears to be invalid JSON")
} catch {
fatalError("Failed to decode \(file) from bundle: \(error.localizedDescription)")
}
}
}
And the JSON part:
[
{
"id": 1,
"name": "Example data",
},
{
"id": 2,
"name": "Example data 2",
}
]
Any help is appreciated. Could this be a bug in SwiftUI?

Answer 1

You could simply remove the GeometryReader since you set the height anyway:
struct ContentRow: View {
var item: Item
var body: some View {
VStack {
ZStack{
VStack(alignment: .trailing) {
Text(item.name)
.font(.caption)
}
}
.padding()
.foregroundColor(Color.primary)
.frame(width: 120, height: 120)
.border(Color.primary, width: 2)
.cornerRadius(5)
.background(Color.red)
}
}
}

Answer 2

Try putting the contentShape on the outermost VStack of ContentRow. You need to put the contentShape on the view that is expanding to fill its parent (or on its parent), which in your case I think is the GeometryReader. The views inside the GeometryReader all shrink to fit their contents, so your contentShape rectangle doesn’t help there.