代码之家 › 专栏 › 技术社区 › fs_tigre

如何将模型中的浮点值绑定到SwiftUI视图中的@Binding:Float属性

combine swiftui swift

fs_tigre · 技术社区 · 4 年前

我有一个圆形的ProgressBar视图 @Binding var progress: Float 作为其进度价值,我希望能够通过 var progress: Float 价值来自 Task 令人尊敬的物品 List .我试着分配 progress = task.progress 来自 任务 对象在ContentView中指向@State属性,但这当然不能在视图中完成(请参见下面的注释代码行)。

如何将每个任务的进度值体面地传递给ProgressBar视图?

任务模型:

class Task:Identifiable{
    var name = ""
    var progress: Float = 0.0
    
    init(name:String, progress:Float){
        self.name = name
        self.progress = progress
    }
}

内容视图

var tasks = [Task(name: "Ketchen Floors", progress: 0.5),
            Task(name: "Install Windows", progress: 0.75)]

struct ContentView: View {
    @State var progress:Float = 0.15
    
    var body: some View {
        List {
            ForEach(tasks) { task in
                // outputs error: Type '()' cannot conform to 'View'
                // progress = task.progress 
                HStack{
                    Text(task.name)
                    // here $progress value shoud come from task.progress
                    ProgressBar(progress: $progress)
                }
            }
        }
    }
}

ProgressBar视图

struct ProgressBar: View {
    @Binding var progress: Float
    
    var body: some View {
        ZStack {
            Circle()
                .stroke(lineWidth:5.0)
                .opacity(0.3)
                .foregroundColor(Color.orange)
            
            Circle()
                .trim(from: 0.0, to: CGFloat(min(self.progress, 1.0)))
                .stroke(style: StrokeStyle(lineWidth: 5.0, lineCap: .round, lineJoin: .round))
                .foregroundColor(Color.orange)
                .rotationEffect(Angle(degrees: 270.0))
                .animation(.linear, value: progress)

            VStack{
                Text(String(format: "%.0f %%", min(self.progress, 1.0)*100.0))
                    .font(.caption2)
            }
        }
    }
}

屏幕

正如你所看到的,每个项目都显示了最初15%的进度值,这并不奇怪。同样,我想要的是能够体面地使用每项任务的价值,Ketchen地板的使用率为50%,安装Windows的使用率为75%。

1 回复 | 直到 4 年前

Raja Kishan 4 年前

首先,将数组添加到ContentView中并使其 @State

之后,可以通过任务直接绑定var。

struct ContentView: View {
    @State var progress:Float = 0.15
    
    @State var tasks = [Task(name: "Ketchen Floors", progress: 0.5),
                 Task(name: "Install Windows", progress: 0.75)] // <---- Here
    
    var body: some View {
        List {
            ForEach($tasks) { $task in // <---- Here
                // outputs error: Type '()' cannot conform to 'View'
                // progress = task.progress
                HStack{
                    Text(task.name)
                    // here $progress value shoud come from task.progress
                    ProgressBar(progress: $task.progress) // <---- Here
                }
            }
        }
    }
}