Swift中如何创建双可展开行下拉菜单？能否用嵌套UITableView实现？

Hey there! Let's tackle your two questions step by step—first creating a dropdown menu with two expandable rows, then addressing whether nested UITableViews work for inline expandable rows.

一、创建包含两个可展开行的下拉菜单（推荐用单UITableView实现） #

最简洁高效的方式是利用UITableView的section和row结构，把每个可展开的主项作为一个section，点击主行时切换展开状态并刷新对应section。

1. 定义数据模型 #

首先我们需要一个模型来存储每个可展开项的状态和子内容：

struct ExpandableItem {
    var title: String
    var isExpanded: Bool
    var subItems: [String]
}

2. 完整实现代码 #

import UIKit

class ExpandableMenuVC: UIViewController, UITableViewDataSource, UITableViewDelegate {
    // 初始化tableView和数据源
    private let tableView = UITableView()
    private var expandableItems: [ExpandableItem] = [
        ExpandableItem(title: "第一个可展开行", isExpanded: false, subItems: ["子项1-1", "子项1-2"]),
        ExpandableItem(title: "第二个可展开行", isExpanded: false, subItems: ["子项2-1", "子项2-2", "子项2-3"])
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTableView()
        title = "可展开下拉菜单"
    }
    
    private func setupTableView() {
        // 设置tableView布局
        tableView.frame = view.bounds
        tableView.dataSource = self
        tableView.delegate = self
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "menuCell")
        view.addSubview(tableView)
    }
    
    // MARK: - UITableView DataSource
    func numberOfSections(in tableView: UITableView) -> Int {
        // 每个可展开项对应一个section
        return expandableItems.count
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // 展开时显示主行+所有子项，收起时只显示主行
        return expandableItems[section].isExpanded ? expandableItems[section].subItems.count + 1 : 1
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "menuCell", for: indexPath)
        
        if indexPath.row == 0 {
            // 主行：显示标题+展开/收起箭头
            cell.textLabel?.text = expandableItems[indexPath.section].title
            cell.imageView?.image = UIImage(systemName: expandableItems[indexPath.section].isExpanded ? "chevron.down" : "chevron.right")
            cell.accessoryType = .none
        } else {
            // 子项行：显示子内容并缩进区分
            cell.textLabel?.text = expandableItems[indexPath.section].subItems[indexPath.row - 1]
            cell.indentationLevel = 1
            cell.imageView?.image = nil
            cell.accessoryType = .none
        }
        
        return cell
    }
    
    // MARK: - UITableView Delegate
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
        
        if indexPath.row == 0 {
            // 点击主行，切换展开状态并刷新section
            expandableItems[indexPath.section].isExpanded.toggle()
            tableView.reloadSections(IndexSet(integer: indexPath.section), with: .automatic)
        } else {
            // 处理子项点击事件
            print("选中子项：\(expandableItems[indexPath.section].subItems[indexPath.row - 1])")
        }
    }
}

代码说明 #

• 用section对应每个可展开的主项，逻辑清晰易维护
• 通过isExpanded状态控制子项的显示/隐藏
• 用系统图标和缩进区分主行和子项，提升用户体验

二、行内嵌套可展开行：是否可以用嵌套UITableView实现？ #

结论：可以实现，但非常不推荐。原因如下：

• 滚动冲突：两个UITableView的滚动手势会互相干扰，需要额外处理手势优先级，逻辑复杂
• 性能问题：嵌套的视图层级会增加内存占用和渲染压力，尤其是子项较多时
• 布局复杂度高：需要精确计算嵌套TableView的高度，稍有不慎就会出现布局错乱、内容截断等问题

替代方案（更优选择） #

1. 沿用上面的单UITableView+section/row方案，把嵌套的子项作为当前section的子行
2. 使用UIStackView动态添加/移除子视图，实现展开收起效果
3. 借助成熟的第三方库（比如CollapsibleTableViewController）快速实现

如果一定要尝试嵌套UITableView（简单示例） #

如果你坚持要做嵌套，这里给一个极简的实现思路：

class ParentTableViewCell: UITableViewCell {
    let titleLabel = UILabel()
    let childTableView = UITableView()
    var isExpanded: Bool = false {
        didSet {
            childTableView.isHidden = !isExpanded
            // 动态调整子TableView高度
            childTableHeightConstraint.constant = isExpanded ? childTableView.contentSize.height : 0
            layoutIfNeeded()
        }
    }
    private var childTableHeightConstraint: NSLayoutConstraint!
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupSubviews()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupSubviews() {
        // 配置标题标签
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        titleLabel.font = .systemFont(ofSize: 16, weight: .medium)
        contentView.addSubview(titleLabel)
        
        // 配置子TableView（禁用滚动避免冲突）
        childTableView.translatesAutoresizingMaskIntoConstraints = false
        childTableView.register(UITableViewCell.self, forCellReuseIdentifier: "childCell")
        childTableView.isScrollEnabled = false
        contentView.addSubview(childTableView)
        
        // 添加约束
        NSLayoutConstraint.activate([
            titleLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 16),
            titleLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            
            childTableView.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 8),
            childTableView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 32),
            childTableView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            childTableView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -16)
        ])
        
        // 初始化子TableView高度为0（收起状态）
        childTableHeightConstraint = childTableView.heightAnchor.constraint(equalToConstant: 0)
        childTableHeightConstraint.isActive = true
    }
}

之后在主ViewController中，给主TableView的cell设置数据源，并处理点击切换isExpanded状态即可。但再次提醒：这种方式的维护成本远高于单TableView方案。

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