SwiftUI - 如何通过函数更新一个值（带滑块）？

Question

我是编程和SwiftUI的新手，我正在努力解决这个问题。

我创建了一个简单的滑块。

Slider(value: $sliderValue, in: 0...100, step: 1)
            .padding(8)
            .overlay(
                Capsule()
                    .stroke(Color.purple, style: StrokeStyle(lineWidth: 5))
        )

我可以在一个TextView中显示数值。

Text("\(sliderValue)")

现在我想做的是创建另一个TextView，通过简单的计算来显示滑块值。当然，我可以在TextView中多播放sliderValue--这很好用。

Text("\(sliderValue * 10)")

但有没有办法把这个功能放到另一个函数中，使其更加灵活，尤其是当计算变得更加复杂的时候？每当滑块被拖动的时候，它应该还是实时更新的。

下面是经过美化的完整代码。也许你能给我解释一下这在SwiftUI中是如何工作的？

struct ContentView: View {

    @State private var sliderValue: Double = 0

    var body: some View {
        VStack(alignment: .leading) {
            VStack(alignment: .leading) {
                Text("value".uppercased())
                    .font(.largeTitle)
                    .fontWeight(.bold)
                Text("\(sliderValue)")
                    .font(.system(size: 60, weight: .bold))
                Text("new value".uppercased())
                    .font(.largeTitle)
                    .fontWeight(.bold)
                Text("\(sliderValue * 10)") // I'd like to put this into a function somehow!?
                    .font(.system(size: 60, weight: .bold))
            }


            Slider(value: $sliderValue, in: 0...100, step: 1)
                .padding(8)
                .overlay(
                    Capsule()
                        .stroke(Color.purple, style: StrokeStyle(lineWidth: 5))
            )


        }//END: VSTACK
        .padding()
    }
}

谢谢你的帮助！我是编程和Swift的新手。

Answer 1

以下是可能的方法

struct ContentView: View {

    @State private var sliderValue: Double = 0

    var body: some View {
        VStack(alignment: .leading) {
            VStack(alignment: .leading) {
                Text("value".uppercased())
                    .font(.largeTitle)
                    .fontWeight(.bold)
                Text("\(sliderValue)")
                    .font(.system(size: 60, weight: .bold))
                Text("new value".uppercased())
                    .font(.largeTitle)
                    .fontWeight(.bold)

                self.calculatedView(for: sliderValue)
            }

            Slider(value: $sliderValue, in: 0...100, step: 1)
                .padding(8)
                .overlay(
                    Capsule()
                        .stroke(Color.purple, style: StrokeStyle(lineWidth: 5))
            )


        }//END: VSTACK
        .padding()
    }

    private func calculatedView(for value: Double) -> some View {
        Text("\(value * 10)")
            .font(.system(size: 60, weight: .bold))
    }
}

还有另一种可能的方法

struct ContentView: View {

    @State private var sliderValue: Double = 0

    var body: some View {
        VStack(alignment: .leading) {
            VStack(alignment: .leading) {
                Text("value".uppercased())
                    .font(.largeTitle)
                    .fontWeight(.bold)
                Text("\(sliderValue)")
                    .font(.system(size: 60, weight: .bold))
                Text("new value".uppercased())
                    .font(.largeTitle)
                    .fontWeight(.bold)

                CalculatedView(value: sliderValue)
            }

            Slider(value: $sliderValue, in: 0...100, step: 1)
                .padding(8)
                .overlay(
                    Capsule()
                        .stroke(Color.purple, style: StrokeStyle(lineWidth: 5))
            )


        }//END: VSTACK
        .padding()
    }
}

struct CalculatedView: View {
    let value: Double

    var body: some View {
        Text("\(value * 10)")
            .font(.system(size: 60, weight: .bold))
    }
}

Answer 2

我推荐一个计算的属性，只是为了计算。

var calculatedValue: Double {
    sliderValue * 10
    // or some more complicated calculations...
}

这个 calculatedValue 将始终与最新的 sliderValue.

然后你可以用Asperi的答案来移动你的。TextView 到另一个函数中，或者让它留在原地。

Text("\(calculatedValue)")
    .font(.system(size: 60, weight: .bold))