You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何实现Popup ViewController的背景透明效果?

解决弹窗背景覆盖&透明度无效的问题

嘿,我帮你捋捋这个问题!你遇到的弹窗背景被覆盖、设置透明度没生效的情况,核心原因几乎都是弹窗ViewController的模态展示样式没配置对——默认的present方式是全屏覆盖,所以你设置的透明背景根本没机会透出来。下面给你具体的解决方案:

1. 先把弹窗的模态样式改对

在你触发弹窗的handleSelectDateExpiration方法里,给你的日期选择VC设置正确的模态展示样式:

@objc func handleSelectDateExpiration() {
    // 实例化你的日期选择弹窗VC
    let datePickerVC = DatePickerViewController()
    
    // 关键:设置为覆盖当前页面的样式,这样背景才会透出来
    datePickerVC.modalPresentationStyle = .overCurrentContext
    // 可选:设置过渡动画为淡入淡出,体验更自然
    datePickerVC.modalTransitionStyle = .crossDissolve
    
    // 给弹窗的view设置半透明背景(这里用黑色半透明举例,你可以换成自己需要的颜色)
    datePickerVC.view.backgroundColor = UIColor.black.withAlphaComponent(0.5)
    
    // 弹出弹窗
    present(datePickerVC, animated: true)
}

2. 弹窗VC内部的布局要注意

在你的日期选择弹窗VC里,记得把UIDatePicker(还有关闭按钮之类的控件)放在半透明背景的上层,别被挡住:

class DatePickerViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 创建日期选择器
        let datePicker = UIDatePicker()
        datePicker.datePickerMode = .date
        datePicker.preferredDatePickerStyle = .wheels // 适配不同iOS版本的样式
        // 用AutoLayout把选择器放在屏幕中央
        datePicker.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(datePicker)
        NSLayoutConstraint.activate([
            datePicker.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            datePicker.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
        
        // 加个关闭/完成按钮
        let closeBtn = UIButton(type: .system)
        closeBtn.setTitle("完成", for: .normal)
        closeBtn.addTarget(self, action: #selector(dismissSelf), for: .touchUpInside)
        closeBtn.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(closeBtn)
        NSLayoutConstraint.activate([
            closeBtn.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            closeBtn.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])
    }
    
    @objc func dismissSelf() {
        dismiss(animated: true)
    }
}

3. 额外提醒

  • 如果你用的是iOS 13及以上,modalPresentationStyle.overCurrentContext或者.pageSheet(后者是系统自带的半弹窗样式),绝对不能用.fullScreen——用全屏样式的话,弹窗会完全覆盖原页面,你的透明背景设置肯定无效。
  • 别在弹窗VC初始化的时候就设置view的背景色,最好是在实例化VC之后、present之前设置,或者在弹窗VC的viewWillAppear里设置,确保样式能正确生效。

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

火山引擎 最新活动