99 lines
2.8 KiB
Swift
99 lines
2.8 KiB
Swift
import SwiftUI
|
||
|
||
/// 一个可配置的圆形视图封装，便于在项目中复用。
|
||
/// 使用示例：
|
||
/// CircleView(diameter: 24, color: .orange, stroke: .white, lineWidth: 2)
|
||
public struct CircleView: View {
|
||
public var diameter: CGFloat
|
||
public var color: Color
|
||
public var stroke: Color? = nil
|
||
public var lineWidth: CGFloat = 1
|
||
|
||
public init(
|
||
diameter: CGFloat,
|
||
color: Color = .black,
|
||
stroke: Color? = nil,
|
||
lineWidth: CGFloat = 1
|
||
) {
|
||
self.diameter = diameter
|
||
self.color = color
|
||
self.stroke = stroke
|
||
self.lineWidth = lineWidth
|
||
}
|
||
|
||
public var body: some View {
|
||
Group {
|
||
if let stroke = stroke, lineWidth > 0 {
|
||
Circle()
|
||
.fill(color)
|
||
.overlay(
|
||
Circle().stroke(stroke, lineWidth: lineWidth)
|
||
)
|
||
} else {
|
||
Circle().fill(color)
|
||
}
|
||
}
|
||
.frame(width: diameter, height: diameter)
|
||
.accessibilityHidden(true)
|
||
}
|
||
}
|
||
|
||
/// 水平渲染多个等尺寸圆形的小组件。
|
||
public struct CircleRow: View {
|
||
public var count: Int
|
||
public var diameter: CGFloat
|
||
public var color: Color
|
||
public var spacing: CGFloat
|
||
|
||
public init(
|
||
count: Int,
|
||
diameter: CGFloat,
|
||
color: Color = .black,
|
||
spacing: CGFloat = 8
|
||
) {
|
||
self.count = count
|
||
self.diameter = diameter
|
||
self.color = color
|
||
self.spacing = spacing
|
||
}
|
||
|
||
public var body: some View {
|
||
HStack(spacing: spacing) {
|
||
ForEach(0..<(max(0, count)), id: \.self) { _ in
|
||
CircleView(diameter: diameter, color: color)
|
||
}
|
||
}
|
||
.accessibilityElement(children: .ignore)
|
||
}
|
||
}
|
||
|
||
#if DEBUG
|
||
struct CircleView_Previews: PreviewProvider {
|
||
static var previews: some View {
|
||
Group {
|
||
CircleView(diameter: 40, color: .black, stroke: .white, lineWidth: 2)
|
||
.padding()
|
||
.previewDisplayName("Single Circle")
|
||
|
||
ZStack {
|
||
Color(.black)
|
||
HStack {
|
||
RoundedRectangle(cornerRadius: 12, style: .continuous)
|
||
.fill(.white)
|
||
.shadow(color: Color.black.opacity(0.06), radius: 6, x: 0, y: 2)
|
||
.overlay(
|
||
HStack {
|
||
CircleRow(count: 6, diameter: 10, color: .black, spacing: 6)
|
||
}
|
||
.padding(.horizontal, 16)
|
||
)
|
||
.frame(height: 56)
|
||
.padding()
|
||
}
|
||
}
|
||
.previewDisplayName("Circle Row")
|
||
}
|
||
.previewLayout(.sizeThatFits)
|
||
}
|
||
}
|
||
#endif |