SwiftUI 如何制作一个修剪过的圆来填充列表行中的 space

Question

我有一个修剪过的圆（完整圆的 60%），我想尽可能多地填满这个项目：

struct ContentView: View {
  var body: some View {
    List {
      Group {
        Circle()
          .trim(from: 0.4, to: 1)
          .rotationEffect(.degrees(18)) // 360/10/2 = 18
      }
      .scaledToFit()
    }
  }
}

旋转18度，因为是从0.4到1修剪的圆，所以多了半个圆0.1x360=36度。所以我顺时针调整18度旋转

我得到了这个结果。该行太高（好像是一个完整的圆圈）。如果底部没有额外的 space，我如何才能很好地适应形状？

Answer 1

它来自 rotationEffect。您必须按照我的示例绘制自定义形状。

感谢@meomeomeo 的 .aspectRatio 提示：

struct ContentView: View {
    var body: some View {
        List {
            Circle()
                .trim(from: 0.4, to: 1)
                .rotationEffect(.degrees(18)) // 360/10/2 = 18
                .scaledToFit()
            
            CircleShape()
                .fill()
                .aspectRatio(1.5, contentMode: .fit)
        }
    }
}


struct CircleShape: Shape {
    func path(in rect: CGRect) -> Path {
        let r = rect.height / 2 * 1.5
        let center = CGPoint(x: rect.midX, y: rect.midY * 1.5)
        var path = Path()
        path.addArc(center: center, radius: r,
                        startAngle: Angle(degrees: 160), endAngle: Angle(degrees: 20), clockwise: false)
        path.closeSubpath()
        return path
    }
}

SwiftUI 如何制作一个修剪过的圆来填充列表行中的 space

SwiftUI how to make a trimmed circle to fill up the space in list row

ios

swiftui