Search code examples
swiftuivisionos

How to make Button highlight in LazyVGrid less rounded?

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)
                }
            }
        }
    }
}

enter image description here

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?

Solution

  • 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 Buttons here might be inappropriate. Consider building your own tappable view instead.