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

Question

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

我说的是func lineWidth(width:CGFloat) ->一些观点，函数progressBarColor(color:Binding) ->一些视图{，函数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包装器，因此使用just 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
}
}