You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI用sheet弹出UIColorPickerViewController无法下拉关闭如何解决

解决SwiftUI中UIColorPickerViewController无法下拉关闭的问题

你的问题由两个错误导致:

  • sheet调用语法错误,你把弹窗视图内容放在了onDismiss回调参数中,该参数是弹窗关闭后才执行的逻辑,不是弹窗内容
  • UIColorPickerViewController默认将isModalInPresentation属性设置为true,主动禁用了下拉关闭手势

完整修改方案

  1. 修正ColorPickerView实现,手动开启下拉关闭权限,添加代理处理交互逻辑
import SwiftUI
import UIKit

struct ColorPickerView: UIViewControllerRepresentable {
    @Binding var selectedColor: UIColor
    @Binding var isPresented: Bool
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    func makeUIViewController(context: Context) -> UIColorPickerViewController {
        let colorPicker = UIColorPickerViewController()
        colorPicker.selectedColor = selectedColor
        // 核心配置:允许下拉关闭
        colorPicker.isModalInPresentation = false
        colorPicker.delegate = context.coordinator
        return colorPicker
    }
    
    func updateUIViewController(_ uiViewController: UIColorPickerViewController, context: Context) {
        uiViewController.selectedColor = selectedColor
    }
    
    class Coordinator: NSObject, UIColorPickerViewControllerDelegate {
        let parent: ColorPickerView
        
        init(parent: ColorPickerView) {
            self.parent = parent
        }
        
        func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
            parent.selectedColor = viewController.selectedColor
        }
        
        func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
            parent.isPresented = false
        }
    }
}
  1. 修正sheet调用写法,把弹窗内容放到正确的参数位置
// 所在视图需要提前定义两个状态变量
@State private var selectedColor = UIColor.white
@State private var showSheet = false

// sheet调用代码
.sheet(isPresented: $showSheet) {
    // 弹窗内容放这里
    ColorPickerView(selectedColor: $selectedColor, isPresented: $showSheet)
    // 可选配置:适配半高弹窗交互,iOS15+支持
    .presentationDetents([.medium, .large])
} onDismiss: {
    // 弹窗关闭后的逻辑放这里,比如保存颜色
    print("最终选中颜色:\(selectedColor)")
}

修改后即可正常使用下拉手势关闭颜色选择弹窗,同时颜色选择、点击完成按钮的交互也会正常生效。

内容的提问来源于stack exchange,提问作者user2802154

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.24 01:36:07