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

如何仅修改SwiftUI中UIImagePickerController的导航栏颜色?

SwiftUI中修改UIImagePickerController导航栏颜色的解决方法

你尝试修改UIImagePickerController的导航栏颜色但始终失败,导航栏显示为浅灰色,问题出在没有完整配置导航栏的所有外观属性,系统会覆盖部分样式设置。以下是正确的修改方式:

核心修改代码

在makeUIViewController方法中,完整配置导航栏的UINavigationBarAppearance属性,覆盖所有可能被系统重置的样式:

func makeUIViewController(context: UIViewControllerRepresentableContext<ImagePickerRepresentable>) -> UIImagePickerController {
    let imagePicker = UIImagePickerController()
    imagePicker.allowsEditing = false
    imagePicker.sourceType = sourceType
    imagePicker.delegate = context.coordinator
    
    // 配置导航栏外观
    let appearance = UINavigationBarAppearance()
    appearance.configureWithOpaqueBackground()
    appearance.backgroundColor = .red // 设置导航栏背景色
    // 配置标题文字颜色
    appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
    // 适配大标题样式(如果使用)
    appearance.largeTitleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
    
    // 给导航栏设置所有外观属性,避免系统覆盖
    imagePicker.navigationBar.standardAppearance = appearance
    imagePicker.navigationBar.scrollEdgeAppearance = appearance
    imagePicker.navigationBar.compactAppearance = appearance
    // 设置导航栏按钮(返回、取消)的颜色
    imagePicker.navigationBar.tintColor = .white
    
    return imagePicker
}

完整修改后的ImagePickerRepresentable代码

typealias ImageBlock =  ((_ image: UIImage?, _ name: String?) -> Void)

struct ImagePickerRepresentable: UIViewControllerRepresentable {
    @Environment(\.presentationMode) private var presentationMode
    private var sourceType: UIImagePickerController.SourceType = .photoLibrary
    private var imageBlock: ImageBlock?
    
    init(sourceType: UIImagePickerController.SourceType = .photoLibrary,
         _ imageBlock: @escaping ImageBlock) {
        self.sourceType = sourceType
        self.imageBlock = imageBlock
    }
    
    func makeUIViewController(context: UIViewControllerRepresentableContext<ImagePickerRepresentable>) -> UIImagePickerController {
        let imagePicker = UIImagePickerController()
        imagePicker.allowsEditing = false
        imagePicker.sourceType = sourceType
        imagePicker.delegate = context.coordinator
        
        // 配置导航栏外观
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = .red
        appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
        appearance.largeTitleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
        
        imagePicker.navigationBar.standardAppearance = appearance
        imagePicker.navigationBar.scrollEdgeAppearance = appearance
        imagePicker.navigationBar.compactAppearance = appearance
        imagePicker.navigationBar.tintColor = .white
        
        return imagePicker
    }
    
    func updateUIViewController(_ uiViewController: UIImagePickerController, context: UIViewControllerRepresentableContext<ImagePickerRepresentable>) {
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self, imageBlock: imageBlock)
    }
    
    final class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
        private var imageBlock: ImageBlock?
        var parent: ImagePickerRepresentable
        
        init(_ parent: ImagePickerRepresentable, imageBlock: ImageBlock?) {
            self.parent = parent
            self.imageBlock = imageBlock
        }
        
        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey: Any]) {
            if let image = info[UIImagePickerController.InfoKey.originalImage] as? UIImage {
                var fileName = ""
                if let asset = info[UIImagePickerController.InfoKey.phAsset] as? PHAsset {
                    if let name = asset.value(forKey: "filename") as? String{
                        fileName = name
                        self.imageBlock?(image, fileName)
                    }
                } else {
                    imageBlock?(image, "IMG_")
                }
            }
            parent.presentationMode.wrappedValue.dismiss()
        }
    }
}

效果说明

修改后,UIImagePickerController的导航栏会显示为你设置的红色背景,同时标题和按钮为白色,不会被系统重置为浅灰色。

导航栏效果截图:
导航栏显示效果

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.22 11:15:33