我想在下面的代碼中在圓角矩形的右上角有一個藍色帶。我已經旋轉了藍色矩形，但我不確定如何正確放置藍色矩形。藍色矩形應該被剪裁到圓形矩形（不出現在它外面）。藍色矩形中的文本也應該隨著矩形旋轉，這樣每個字母都向右流動。
有誰知道該怎么做？
struct MyCard: View {
var body: some View {
Rectangle()
.foregroundColor(.white)
.overlay(
ZStack {
RoundedRectangle(cornerRadius: 6)
.stroke(.gray)
HStack(spacing: 40) {
Text("some text here")
.enigFont(style: .body1)
Rectangle()
.foregroundColor(Color(.brand(main: .blue)))
.frame(width: 20)
.overlay(
Text("hello")
.foregroundColor(.yellow)
.rotationEffect(.degrees(0))
)
.frame(maxWidth: .infinity, alignment: .trailing)
.rotationEffect(.degrees(315))
}
.padding(.horizontal, 20)
}
)
}
}
struct MyCard_Previews: PreviewProvider {
static var previews: some View {
MyCard()
.padding(.horizontal, 40)
.previewLayout(.fixed(width: 400, height: 150))
.padding()
}
}
uj5u.com熱心網友回復：
這將為您提供一個視圖，該視圖RoundedRectangle在角落帶有帶有文本的橫幅。你可以在上面疊加任何你想要的東西。我還做了一個快速擴展，因為我需要對其中的一些進行平方，并且想要更簡潔的代碼。
struct BanneredCard: View {
let text: String
let multiplier:CGFloat = 10
var body: some View {
GeometryReader { geometry in
RoundedRectangle(cornerRadius: 6)
.stroke(.gray)
.overlay {
Rectangle()
.foregroundColor(Color.blue)
.overlay(
Text(text)
.foregroundColor(.yellow)
)
.frame(height: 20)
.rotationEffect(Angle(degrees: 45))
.offset(x: (geometry.size.width / 100).sqrd() * multiplier, y: -1 * (geometry.size.height / 100).sqrd() * multiplier)
}
.clipped()
}
}
}
extension CGFloat {
func sqrd() -> CGFloat {
self * self
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/410736.html
標籤：
上一篇：為Tableview解碼一組問題