如何在自定义视图中创建更改属性的修饰符

Question

我有这个用 SwiftUI 编写的 CircularProgressView。我想创建一种方法来添加一些自定义修饰符，这样我就可以从父视图中更改一些属性。下面的代码不起作用。

我说的是 func lineWidth(width:CGFloat) -> some View , func progressBarColor(color:Binding) -> some View { , func tintColor(color:Color) -> 一些视图 {

struct CircularProgressView: View {


@Binding var progress: CGFloat

@State private var lineWidth:CGFloat = 15
@State private var progressBarColor:Color = Color.red
@State private var tintColor:Color = Color.gray

 func lineWidth(width:CGFloat) -> some View {
    self.lineWidth = width
    return self
}

func progressBarColor(color:Color) -> some View {
    self.progressBarColor = color
    return self
}

func tintColor(color:Color) -> some View {
    self.tintColor = color
    return self
}

var body: some View {
    GeometryReader { geometry in
        ZStack {
            Circle()
                .stroke(tintColor, lineWidth: lineWidth)
                .aspectRatio(1, contentMode: .fit)
            Circle()
                .trim(from: 0.0, to: progress)
                .stroke(progressBarColor, lineWidth: lineWidth)
                .rotationEffect(Angle(degrees: -90))
                .aspectRatio(1, contentMode: .fit)
        }
    }
}

}

例如。我想像这样使用这个 CircularProgressView：

    struct ContentView: View {
    var body: some View {
        CircularProgressView(progress: .constant(0.3)).lineWidth(width: 20)
    }
}

如何使用 ViewModifiers 实现这一点？我认为这一切都错了吗？

Answer 1

你只是不需要 @State 包装所有这些属性，所以使用 as

struct CircularProgressView: View {

  @Binding var progress: CGFloat

  private var lineWidth:CGFloat = 15
  private var progressBarColor:Color = Color.red
  private var tintColor:Color = Color.gray

// ... other code

  func lineWidth(width:CGFloat) -> some View {       // << here !!
    var newView = self
    newView.lineWidth = width
    return newView
  }
}

但@Binding 应该保持原样，因为它就像对外部事实来源的引用（某些动态属性持有真实值），绑定本身不做任何事情 - 它就像一个代理。

所以下面的没用

func progressBarColor(color:Binding<Color>) -> some View {
    self.progressBarColor = color.wrappedValue
    return self
}

你应该像这样使用它

struct ContentView: View {
   @State private var progress = 0.3
    var body: some View {
        CircularProgressView(progress: $progress).lineWidth(width: 20)
        // ... modify progress somewhere later
    }
}

*** 但是我在提供的场景中看不到为什么您需要绑定...如果您将其从 CircularProgressView 中删除，那么以下内容也可以使用

struct ContentView: View {
   @State private var progress = 0.3
    var body: some View {
        CircularProgressView(progress: progress).lineWidth(width: 20)
        // ... modify progress somewhere later
    }
}