如何为CareKit中nausea卡片的跳转页面添加图片与描述？

要实现点击nausea4卡片右侧箭头后弹出自定义带图片和描述的页面，你可以通过两种方式实现：替换默认详情控制器，或者自定义视图同步器拦截点击事件。

方法一：替换默认的详情控制器 #

直接给OCKButtonLogTaskViewController设置自定义的详情控制器，覆盖默认的详情页：

1. 创建自定义详情视图控制器 #

class BowelIncontinenceDetailVC: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground
        title = "便失禁详情"
        
        // 添加图标
        let iconView = UIImageView(image: UIImage(named: "bowel_incontinence_icon"))
        iconView.contentMode = .scaleAspectFit
        iconView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(iconView)
        
        // 添加描述文本
        let descLabel = UILabel()
        descLabel.text = "便失禁记录说明：\n- 请如实记录发生时间与频次\n- 若症状持续加重，请及时联系医护人员\n- 日常注意饮食调整，避免刺激性食物"
        descLabel.numberOfLines = 0
        descLabel.font = UIFont.systemFont(ofSize: 16)
        descLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(descLabel)
        
        // 布局约束
        NSLayoutConstraint.activate([
            iconView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            iconView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 30),
            iconView.widthAnchor.constraint(equalToConstant: 180),
            iconView.heightAnchor.constraint(equalToConstant: 180),
            
            descLabel.topAnchor.constraint(equalTo: iconView.bottomAnchor, constant: 25),
            descLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            descLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])
    }
}

2. 修改原任务卡片代码 #

在创建nauseaCard后，设置其detailViewController属性：

var query4 = OCKEventQuery(for: date)
query4.taskIDs = ["nausea4"]

if let nauseaTask = tasks.first(where: { $0.id == "nausea4" }) {
    print("Nausea task found")
    let viewSynchronizer = OCKButtonLogTaskViewSynchronizer()

    let nauseaCard = OCKButtonLogTaskViewController(
        query: query4,
        store:self.store, 
        viewSynchronizer: viewSynchronizer
    )
    
    // 设置自定义详情页
    let detailNavVC = UINavigationController(rootViewController: BowelIncontinenceDetailVC())
    nauseaCard.detailViewController = detailNavVC
    
    listViewController.appendViewController(nauseaCard, animated: false)
}

方法二：自定义视图同步器拦截点击事件 #

通过自定义OCKButtonLogTaskViewSynchronizer，重写点击事件处理逻辑，直接跳转到自定义页面：

1. 自定义视图同步器 #

class CustomButtonLogSynchronizer: OCKButtonLogTaskViewSynchronizer {
    override func didSelectTask(_ task: OCKAnyTask, event: OCKAnyEvent?, view: OCKButtonLogTaskView, viewController: OCKTaskViewController) {
        // 跳转到自定义详情页
        let detailVC = BowelIncontinenceDetailVC()
        viewController.navigationController?.pushViewController(detailVC, animated: true)
    }
}

2. 使用自定义同步器 #

替换原代码中的viewSynchronizer实例：

var query4 = OCKEventQuery(for: date)
query4.taskIDs = ["nausea4"]

if let nauseaTask = tasks.first(where: { $0.id == "nausea4" }) {
    print("Nausea task found")
    // 使用自定义同步器
    let viewSynchronizer = CustomButtonLogSynchronizer()

    let nauseaCard = OCKButtonLogTaskViewController(
        query: query4,
        store:self.store, 
        viewSynchronizer: viewSynchronizer
    )
    
    listViewController.appendViewController(nauseaCard, animated: false)
}

两种方法都能实现需求，方法一更直接覆盖默认详情页，方法二更灵活，可自定义点击后的逻辑。

内容的提问来源于stack exchange，提问作者user2677680