普通按钮
swift
Button(action: {}, label: {
Text("搜索")
.font(.system(size: 16))
.foregroundColor(.black)
.opacity(0.48)
.padding()
})
.border(Color.myPrimaryColor, width: 1)Button(action: {}, label: {
Text("搜索")
.font(.system(size: 16))
.foregroundColor(.black)
.opacity(0.48)
.padding()
})
.border(Color.myPrimaryColor, width: 1)
圆角按钮
swift
Button(action: {}, label: {
Text("搜索")
.font(.system(size: 16))
.foregroundColor(.white)
.padding()
})
.background(Color.red)
.clipShape(Capsule())Button(action: {}, label: {
Text("搜索")
.font(.system(size: 16))
.foregroundColor(.white)
.padding()
})
.background(Color.red)
.clipShape(Capsule())
边框
swift
Button(action: {}, label: {
Text("搜索")
.font(.system(size: 16))
.foregroundColor(.white)
.padding()
})
.background(Color.red)
.border(Color.myPrimaryColor, width: 4)Button(action: {}, label: {
Text("搜索")
.font(.system(size: 16))
.foregroundColor(.white)
.padding()
})
.background(Color.red)
.border(Color.myPrimaryColor, width: 4)
圆角按钮带边框
不能同时设置.border(Color.myPrimaryColor, width: 4)和.clipShape(Capsule()) 这样会产生奇怪的效果。
swift
Button(action: {}, label: {
Text("搜索")
.font(.system(size: 16))
.foregroundColor(.black)
.opacity(0.48)
.padding()
})
.background(
Capsule().stroke(Color.myPrimaryColor, lineWidth: 1)
)Button(action: {}, label: {
Text("搜索")
.font(.system(size: 16))
.foregroundColor(.black)
.opacity(0.48)
.padding()
})
.background(
Capsule().stroke(Color.myPrimaryColor, lineWidth: 1)
)