I have a row of custom buttons displayed in a VStack and a HStack, strangely the 2 rows are not aligning - see the example for the best I could achieve. I suspect that it is due to the different content (text or SFSymbol) but the buttons "look" the same size. To get this I had to have different spacing within the HStacks which.
Thanks
import Foundation
import SwiftUI
struct MyRoundButton: ButtonStyle {
var color: Color = .purple
func makeBody(configuration: Configuration) -> some View {
configuration
.label
.frame(height: 30)
.font(Font.system(size: 25, weight: .semibold))
.foregroundColor(configuration.isPressed ? .white : color)
.padding(23)
.background(
Circle()
.fill(configuration.isPressed ? color : color.opacity(0.25)))
}
}
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(spacing: 30) {
HStack(alignment: .center, spacing: 23) {
Group {
Button {
print ("didTap roundButton")
} label: {
Image(systemName: "camera.fill")
}
Button {
print ("didTap roundButton")
} label: {
Image(systemName: "photo.fill.on.rectangle.fill")
}
Button {
print ("didTap roundButton")
} label: {
Image(systemName: "folder.fill")
}
Button {
print ("didTap roundButton")
} label: {
Image(systemName: "trash.fill")
}.buttonStyle(MyRoundButton(color: .red))
}.buttonStyle(MyRoundButton())
}
HStack(alignment: .center, spacing: 27) {
Group {
Button {
print ("didTap roundButton")
} label: {
Text("Ja")
}.buttonStyle(MyRoundButton(color: .green))
Button {
print ("didTap roundButton")
} label: {
Text("Ja")
}.buttonStyle(MyRoundButton(color: .blue))
Button {
print ("didTap roundButton")
} label: {
Text("Ja")
}.buttonStyle(MyRoundButton(color: .orange))
Button {
print ("didTap roundButton")
} label: {
Text("Ja")
}.buttonStyle(MyRoundButton(color: .yellow))
}.buttonStyle(MyRoundButton())
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
