Look:
LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: columnCount), spacing: 10) {
ForEach(transformations.keys.sorted(), id: \.self) { transformationId in
if let transformation = transformations[transformationId] {
Button(action: {
self.sharedState.transformationId = transformationId
sharedState.menu = .transformation
}) {
VStack {
Text(transformation.name)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 20)
Text(["#itx", "#tutorial"] .map { "#\($0)" }.joined(separator: " ")) //tags
.font(.caption)
.foregroundColor(.yellow)
}
}
}
}
}
How to make cells less rounded. It happens only in Vision Pro not on iPad as on iPad the hover effect has no meaning, and anyway content of a cell, button is not highlighted like this with gray oval.
I tried use a custom button style but that only created an other reactangle inside the gray oval shape. But I would change this gray oval shape not put someing inside. Do you have any idea how?
You should change the buttonBorderShape
.buttonBorderShape(.roundedRectangle(radius: 10))
Note that the Human Interface Guidelines says that you should prefer round/capsule buttons:
In general, prefer circular or capsule-shape buttons. People’s eyes tend to be drawn toward the corners in a shape, making it difficult to keep looking at the shape’s center. The more rounded a button’s shape, the easier it is for people to look steadily at it.
Judging from the content of your view, using Button
s here might be inappropriate. Consider building your own tappable view instead.