我在 VStack 和 HStack 中显示了一排自定义按钮,奇怪的是,这两行没有对齐 - 请参阅示例以获得最佳效果。我怀疑这是由于不同的内容(文本或 SFSymbol),但按钮“看起来”大小相同。为了得到这个,我必须在 HStacks 中有不同的间距。
谢谢
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()
}
}