SwiftUI 中这种带滑块的可展开工具栏对应的视图叫什么？

你询问的这类带滑块的可展开工具栏类视图，在SwiftUI中没有独立的专属官方控件名称，苹果官方人机交互指南中将其归类为工具栏下的可折叠控件组，开发行业内通常称其为可折叠调整工具栏（Collapsible Adjustment Toolbar），这类组件普遍用于需要参数调节的场景，比如照片编辑、音视频参数调整等。

实现与学习方法 #

你可以通过SwiftUI的基础控件组合实现该效果，核心用到的控件和逻辑如下：

• 外层工具栏容器使用Toolbar修饰符挂载到你的页面视图上，iOS端如果需要固定在底部，可以将ToolbarItem的placement属性设置为.bottomBar
• 展开、折叠的交互可以直接用DisclosureGroup控件实现，也可以自行声明@State类型的布尔状态变量，控制展开区域的显隐，同时加withAnimation包裹状态变更代码实现流畅的展开收起动画
• 内部的参数调节滑块使用SwiftUI原生的Slider控件即可，支持自定义取值范围、步长、最小值最大值图标以及数值变更回调

简易实现代码示例 #

import SwiftUI

struct AdjustmentToolbarDemo: View {
    // 控制工具栏展开折叠的状态变量
    @State private var isToolbarExpanded = false
    // 滑块绑定的参数值
    @State private var brightnessValue = 0.5
    
    var body: some View {
        NavigationStack {
            // 此处替换为你的主内容视图
            Color.black.opacity(0.05)
                .ignoresSafeArea()
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        VStack(spacing: 12) {
                            // 折叠态的触发按钮
                            Button {
                                withAnimation(.easeInOut) {
                                    isToolbarExpanded.toggle()
                                }
                            } label: {
                                HStack(spacing: 6) {
                                    Text("亮度调节")
                                    Image(systemName: isToolbarExpanded ? "chevron.up" : "chevron.down")
                                }
                            }
                            
                            // 展开后显示的滑块区域
                            if isToolbarExpanded {
                                Slider(value: $brightnessValue, in: 0...1) {
                                    Text("亮度")
                                } minimumValueLabel: {
                                    Image(systemName: "sun.min")
                                } maximumValueLabel: {
                                    Image(systemName: "sun.max")
                                }
                                .padding(.horizontal)
                            }
                        }
                        .padding(.vertical, 8)
                    }
                }
        }
    }
}

内容的提问来源于stack exchange，提问作者Dince-afk