SwiftUI：Slider 在导航栏项目的前导/尾随时的奇怪行为

Posted 2023-02-24

【中文标题】SwiftUI：Slider 在导航栏项目的前导/尾随时的奇怪行为

【英文标题】：SwiftUI: Weird behaviour of Slider when it is in the leading/trailing of navigation bar items

【发布时间】：2020-10-05 19:02:03

【问题描述】：

我无法将滑块作为视图放置在导航栏的尾部。由于它是钩住一个状态的，所以改变它的状态是很跳跃的，一点也不流畅。

这是我的示例代码：

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 中的滑块非常平滑地改变了不透明度（它甚至移动了导航栏中的滑块。）但另一方面，移动导航栏中的滑块非常有问题/跳跃。

有没有办法让它工作？

【参考方案1】：

您可以使用@Binding 属性为图像创建新的视图模型，并通过它传递您的不透明度，当@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)