SwiftUI：滑塊位於導航欄項目的前導/尾隨時的奇怪行為

Question

我無法將 Slider 作為視圖放置在導航欄的尾部。 由於它與一個狀態掛鈎，因此更改它的狀態非常不穩定，一點也不流暢。

這是我的示例代碼：

struct ContentView: View {
    @State var opacityValue: Double = 1
    
    var body: some View {
        NavigationView {
            GeometryReader { geometry in
                VStack {
                    Slider(value: self.$opacityValue, in: 0...100, step: 5) { changed in
                        
                    }
                    Image(systemName: "photo.fill")
                        .foregroundColor(.blue)
                        .padding()
                        .opacity(opacityValue / 100)

                }.navigationBarItems(trailing: HStack(spacing: 20) {
                    Slider(value: self.$opacityValue, in: 0...100, step: 5) { _ in
                        
                    }.frame(width: 100)
                }).frame(width: geometry.size.width / 2)
            }
        }
    }
}

我在常規 VStack 中的滑塊非常平滑地改變了不透明度（它甚至移動了導航欄中的滑塊。）但另一方面，移動導航欄中的滑塊非常有問題/跳躍。

有沒有辦法使這項工作？

Answer 1

您可以使用@Binding屬性為 Image 創建新的 View 模型並通過它傳遞不透明度，這將在@State屬性更改且 View 必須刷新時停止滑塊上的@State移動

struct ContentView: View {
    @State var opacityValue: Double = 1
    var body: some View {
        NavigationView {
            GeometryReader { geometry in
                VStack {
                    
                    Slider(value: self.$opacityValue, in: 0...100, step: 5) { _ in
            
                    }
                    
                    ImageOpacityView(opacity: $opacityValue)

                }.navigationBarItems(trailing: HStack(spacing: 20) {
                    
                    Slider(value: self.$opacityValue, in: 0...100, step: 5) { _ in
                        
                    }.frame(width: 100)
                    
                }).frame(width: geometry.size.width / 2)
            }
        }
    }
    
    struct ImageOpacityView: View {
        @Binding var opacity: Double
        
        var body: some View {
            Image(systemName: "photo.fill")
                .foregroundColor(.blue)
                .padding()
                .opacity(opacity / 100)
        }
    }
}