I have a view that contains this and I'm trying to make a straight button with rounded ends. Each the buttons would directly connect to each other. This view simply gets a list of SF button names. I want it to look like this but more buttons:
var body: some View {
HStack(spacing: 0) {
ForEach(Array(theToolbar.enumerated()), id: \.offset) { (index, curToolBar) in
let inCenter = index > 0 && index < theToolbar.count - 1
// Text("C: \(inCenter)")
Button( action:{ dm.setCurTool( curToolBar.tool )}) {
Image( curToolBar.image )
}
.contentShape(Rectangle())
.background( getBGColor(curToolBar.tool ))
.cornerRadius(inCenter ? 0 : 0)
.overlay(inCenter ? nil : RoundedRectangle(cornerRadius: 10).stroke(Color.clear))
.clipShape(clipShape(for: inCenter))
}
}
}
Currently I see this:
As you can see, there is an effect on the end buttons as the radius for the corners are larger but the request for a 0 radius is not being listened to (middle buttons). I even tried to force the clipping shape to a rect. Here is the clipShape function.
private func clipShape(for isCenter: Bool) -> AnyShape {
if isCenter {
print( "-->rect:" )
return AnyShape(Rectangle())
} else {
print( "-->RR:" )
return AnyShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
}
}
I would prefer a reusable style in another function like this clipShape which of course would be re-usable.
Edit-1
Neither of the suggested methods solve the problem. The first one partially covers up radius of each button. Adding a 2 point while rectangle to the entire border. None of which is a standard Mac OS guidelines. The second solution would be fine for usage in a dialog but not in a secondary toolbar. Adding icons leaves me with blank buttons. Also, I'll need multi selection in some of these button bars and the second method says that it doesn't support multiple selections. Basically these buttons still have rounded corners.
Picker(selection: $dm.selectedOption, label: Text(""), content: {
Button( action: { print("A")}) { Image( "circle" )}
Button( action: { print("B")}) { Image( "square" )}
Button( action: { print("C")}) { Image( "circle.circle" )}
}).pickerStyle(SegmentedPickerStyle())


