visionOS SwiftUI rounded square button

I'm writing a visionOS App using SwiftUI language, in which I wrote a button with the following code:

import SwiftUI

        Button(action: {
            openWindow(id: landmark.windowTag)
        }) {
            VStack {
                Image(landmark.imageName)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .clipShape(RoundedRectangle(cornerRadius: 10))
                    .frame(width: 150, height: 150)
                VStack(alignment: .leading){
                    Text(landmark.name)
                        .font(.title)
                        .foregroundColor(.white)
                    
                    Text(landmark.describe)
                        .font(.subheadline)
                        .foregroundColor(.gray)
                }
            }
            .frame(width: 200, height: 400)
            .padding()
            .clipShape(RoundedRectangle(cornerRadius: 20))
        }
        .padding(20)

My idea is that the border of the button is a rounded square (note that I'm not talking about the picture is a rounded square, but the border of the button is a rounded square), but the default button border of visionOS is oval, so I added the following code: .clipShape(RoundedRectangle(cornerRadius: 20))

But there is no change in operation, and the border of the button has not become a rounded square. It is still the default oval of visionOS. How can I modify the code?

Hi @lijiaxu , Instead of using .clipShape, use .buttonBorderShape(.roundedRectangle(radius: 25))

eg:

Button{
print("clicked")
} label: {
//your image code
}
.buttonBorderShape(.roundedRectangle(radius: 25))
visionOS SwiftUI rounded square button
 
 
Q