💈CircleText
在文字外面加一個有顏色的圓圈,圓圈會隨著文字變大而變大。
設計重點
在一開始佈局的時候,請 Text 回報自己的「最大邊」(定義在:🌀 GeometryProxy + 🅿️ Rectangular) 給 MaxSide (🅿️ PreferenceKey),然後 CircleText 再透過 .onPreferenceChange(),用回報來的值更新自己的 maxSide @State 變數,進一步推動 Text 更新自己的 frame。
程式碼

// live view
struct ContentView: View {
var body: some View {
HStack {
Group {
CircleText("Hello, World") // 🌅 CircleText
CircleText("Hello", color: .blue)
}// Group
// ⭐️ 這裡可以確定 CircleText's frame 已經包含整個圓。
.border(Color.black)
}// HStack (container)
.padding()
.background(Color.gray)
.shadow(radius: 8).shadow(radius: 8)
}
}
PlaygroundPage.current.setLiveView(ContentView())
修改記錄
初版
2020.10.15:
將 SizePreferenceKey 改為 generic FirstNonNil<T>
新增 generic view.report(to: key) {...} 統一各種 view.report 函數。
Last updated
Was this helpful?