【发布时间】：2022-02-09 20:00:52
【问题描述】：
我在 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()
}
}
【问题讨论】：
-
你不能给按钮一个固定的大小吗？
-
你可以使用 alinement 而不必使用固定大小，或者使用 5 个 VStack 和 1 个 HStack 是更好的选择。
标签： button swiftui spacing vstack hstack