SwiftUI 滑块与多选项菜单流：实现交互界面

2024-03-07 04:10:29

SwiftUI 滑块带多选项菜单流

问题

在图像编辑应用程序中，当用户在不同的颜色滤镜（例如亮度、对比度、高光、阴影等）之间切换时，滑动条应自动设置为选定滤镜的默认值（如果先前已在照片上应用了该滤镜，则应使用现有值）。

解决方法

在 SwiftUI 中，可以使用 @State 变量来管理滑动条的值，并使用 .onChange(of:) 修饰符在值更改时执行操作。以下是如何实现此行为的代码：

import SwiftUI

struct ContentView: View {
    @State private var sliderVal: Float = 0.5
    @State private var selectedFilter: String = "Brightness"
    
    var body: some View {
        VStack {
            Slider(value: $sliderVal, in: 0...1)
                .padding()
                .onChange(of: selectedFilter) { newValue in
                    // 重置滑块值，对应于所选滤镜的默认值
                    sliderVal = fetchDefaultValue(for: newValue)
                }
                .onChange(of: sliderVal) { newValue in
                    // 根据滑块值应用所选滤镜
                    applyColorCorrection(with: newValue, filter: selectedFilter)
                }
            
            ScrollView(.horizontal) {
                HStack {
                    ForEach(supportedFilters, id: \.self) { filter in
                        Button(action: {
                            // 切换到所选滤镜
                            selectedFilter = filter
                        }) {
                            Text(filter.displayName)
                        }
                    }
                }
            }
        }
    }
    
    func fetchDefaultValue(for filter: String) -> Float {
        // 根据滤镜返回默认值
        switch filter {
        case "Brightness":
            return 0.5
        case "Contrast":
            return 1.0
        case "Highlights":
            return 0.0
        case "Shadows":
            return 0.0
        default:
            return 0.0
        }
    }
    
    func applyColorCorrection(with value: Float, filter: String) {
        // 根据滑块值和所选滤镜应用颜色校正
        switch filter {
        case "Brightness":
            // 调整亮度
        case "Contrast":
            // 调整对比度
        case "Highlights":
            // 调整高光
        case "Shadows":
            // 调整阴影
        default:
            break
        }
    }
}