如何为accessoryCorner 系列编写一个能够正确呈现的WatchOS 小部件？

Question

我正在尝试构建一个具有如所附图像所示的仪表的小部件。似乎没有任何 API 可以在弧上渲染仪表（或任何其他视图），具体取决于使用哪个角。

是否有任何此类支持，或者此类小部件仅适用于 Apple？例如，可以知道小部件正在渲染在哪个角落，以便计算正确的转换吗？

谢谢你！

Answer 1

您可以接近 Apple 风格的角落小部件，但目前存在一些限制。据我所知，您必须使用.widgetLabel修饰符，它将您限制为“图像、文本、仪表、进度视图或具有多个子视图的容器”。

Gauge 和 ProgressView 的样式似乎也是预定义的 - 例如，设置仪表的样式.gaugeStyle(LinearCapacityGaugeStyle())不会改变外观。

var body: some View {
      switch widgetFamily {
      case .accessoryCorner: // WatchOS only
         Text("50%") // Watch out for clipping
            .font(.system(size: 20))
            .foregroundColor(.blue)
            .widgetLabel {
               ProgressView(value: 0.5)
                  .tint(.blue)
            }
      }
}

或者

var body: some View {
      switch widgetFamily {
      case .accessoryCorner: // WatchOS only
         Text("50%") // Watch out for clipping
            .font(.system(size: 20))
            .foregroundColor(.blue)
            .widgetLabel {
               Gauge(value: 50.0, in: 0...100) {
                  Text("Not shown")
               } currentValueLabel: {
                  Text("Not shown")
               } minimumValueLabel: {
                  Text("0") // Watch out for clipping
               } maximumValueLabel: {
                  Text("100") // Watch out for clipping
               }
               .tint(.blue)
               .gaugeStyle(LinearCapacityGaugeStyle()) // Doesn't do anything
            }

给你：

您可以手动旋转文本以尝试使其与角对齐，但正如您所说，似乎没有办法识别小部件位于哪个角，因此您不知道以哪种方式旋转它。 ..