如何实现UITableView单元格点击后展示大图及详情？

一、修复点击无响应的核心问题 #

你的代码中明确设置了FoodView.allowsSelection = false，这行代码直接禁用了单元格的选择功能，导致点击完全没有反应。只需要移除这行代码，或者将其修改为true即可恢复点击能力：

// 移除该行，或改为：
// FoodView.allowsSelection = true

二、实现点击展示图片详情的功能 #

1. 添加单元格点击回调 #

在ViewController1的UITableViewDelegate扩展中，实现tableView(_:didSelectRowAt:)方法，处理点击事件并传递数据：

extension ViewController1: UITableViewDelegate, UITableViewDataSource {
    // 保留原有方法...
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // 取消选中状态的高亮效果
        tableView.deselectRow(at: indexPath, animated: true)
        
        // 获取当前选中的食物名称
        let selectedFood = dogfoods[indexPath.row]
        
        // 方式1：通过Storyboard Segue跳转（推荐）
        // 需提前在Storyboard中给ViewController1和详情页添加segue，设置identifier为"ShowFoodDetail"
        performSegue(withIdentifier: "ShowFoodDetail", sender: selectedFood)
        
        // 方式2：纯代码初始化详情页（无需Storyboard）
        // let detailVC = FoodDetailViewController()
        // detailVC.selectedFoodName = selectedFood
        // navigationController?.pushViewController(detailVC, animated: true)
    }
    
    // 如果用Segue跳转，重写prepare方法传递数据
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "ShowFoodDetail", 
           let detailVC = segue.destination as? FoodDetailViewController,
           let foodName = sender as? String {
            detailVC.selectedFoodName = foodName
        }
    }
}

2. 创建详情页ViewController #

新建一个FoodDetailViewController，在界面上添加UIImageView（设置缩放模式为AspectFit）和UILabel，并绑定IBOutlet：

import UIKit

class FoodDetailViewController: UIViewController {
    @IBOutlet weak var largeFoodImageView: UIImageView!
    @IBOutlet weak var foodDescriptionLabel: UILabel!
    
    // 接收传递过来的食物名称
    var selectedFoodName: String?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        navigationItem.title = "食物详情"
        
        // 加载图片和设置描述文本
        guard let foodName = selectedFoodName else { return }
        largeFoodImageView.image = UIImage(named: foodName)
        foodDescriptionLabel.text = "狗狗的食物：\(foodName)"
    }
}

3. Storyboard配置（Segue方式） #

• 在Storyboard中拖入新ViewController，设置其类为FoodDetailViewController
• 从ViewController1的单元格拖拽到新ViewController，创建segue并设置identifier为ShowFoodDetail
• 给新ViewController的largeFoodImageView和foodDescriptionLabel绑定IBOutlet

三、可选：弹窗式详情展示（无需跳转页面） #

如果不想跳转页面，可直接在当前页面弹出详情视图：

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    tableView.deselectRow(at: indexPath, animated: true)
    let selectedFood = dogfoods[indexPath.row]
    
    // 创建半透明背景遮罩
    let backgroundMask = UIView(frame: view.bounds)
    backgroundMask.backgroundColor = UIColor.black.withAlphaComponent(0.5)
    view.addSubview(backgroundMask)
    
    // 创建弹窗容器
    let popupView = UIView(frame: CGRect(x: 20, y: view.center.y - 220, width: view.bounds.width - 40, height: 440))
    popupView.backgroundColor = .white
    popupView.layer.cornerRadius = 12
    view.addSubview(popupView)
    
    // 添加放大图片
    let imageView = UIImageView(frame: CGRect(x: 20, y: 20, width: popupView.bounds.width - 40, height: 320))
    imageView.image = UIImage(named: selectedFood)
    imageView.contentMode = .scaleAspectFit
    popupView.addSubview(imageView)
    
    // 添加描述标签
    let label = UILabel(frame: CGRect(x: 20, y: 350, width: popupView.bounds.width - 40, height: 70))
    label.text = "食物名称：\(selectedFood)\n点击空白处关闭"
    label.textAlignment = .center
    label.numberOfLines = 0
    popupView.addSubview(label)
    
    // 点击背景关闭弹窗
    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(closePopup))
    backgroundMask.addGestureRecognizer(tapGesture)
}

@objc func closePopup() {
    view.subviews.filter { 
        $0.backgroundColor?.hasAlphaComponent == true || $0.layer.cornerRadius == 12 
    }.forEach { $0.removeFromSuperview() }
}

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