iOS开发：创建类Etsy可折叠披露视图的最优方案咨询

嘿，你完全可以用UITableView搭配自定义Cell来实现这种需求，这也是iOS开发里处理这类可折叠视图的主流方案之一，完全能还原你示例图里那种标题关联输入字段的折叠效果！我给你梳理下具体的实现思路和参考方向：

一、为什么UITableView适合这个场景？ #

UITableView本身的单元格复用机制和动态行高特性完美适配折叠展开的需求：

• 复用机制能高效处理多个折叠单元，避免内存浪费；
• 动态行高可以轻松切换折叠（仅显示标题）和展开（显示标题+输入区域）两种状态的高度；
• 自定义Cell能灵活定制标题栏和输入字段的布局，完全匹配你的需求。

二、核心实现步骤 #

1. 设计自定义折叠Cell #

每个可折叠单元对应一个自定义UITableViewCell，结构分为两部分：

• 标题交互区：用UIButton或者带手势的UILabel，点击时触发展开/折叠操作；
• 输入内容区：包含你需要的输入字段（比如UITextField、UITextView等），初始状态设为隐藏。

2. 管理展开状态 #

用一个字典或者数组记录每个Cell的展开状态，比如：

var expandedStates: [IndexPath: Bool] = [:]

点击标题时，更新对应IndexPath的状态，然后调用tableView.reloadRows(at: [indexPath], with: .automatic)刷新Cell，触发行高变化。

3. 动态计算行高 #

实现tableView(_:heightForRowAt:)方法，根据当前Cell的展开状态返回不同高度：

override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    let isExpanded = expandedStates[indexPath] ?? true
    return isExpanded ? 180 : 60 // 展开时高度180，折叠时60，可根据实际布局调整
}

如果用AutoLayout，也可以设置自动计算行高：

tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 60 // 设置一个预估高度

让系统根据Cell内的约束自动计算高度。

4. 处理输入字段的复用问题 #

因为UITableView会复用Cell，所以要在Cell的prepareForReuse方法里重置输入内容和状态，或者用数据模型绑定每个Cell的输入值，避免滚动时数据错乱。比如：

override func prepareForReuse() {
    super.prepareForReuse()
    inputContainer.isHidden = true
    // 重置输入框内容
    if let textField = inputContainer.arrangedSubviews.first as? UITextField {
        textField.text = nil
    }
}

三、快速实现示例（伪代码） #

自定义Cell代码 #

class DisclosureCell: UITableViewCell {
    // 标题按钮
    private let titleButton: UIButton = {
        let btn = UIButton(type: .system)
        btn.setTitle("标题", for: .normal)
        btn.titleLabel?.font = UIFont.systemFont(ofSize: 16, weight: .medium)
        btn.addTarget(self, action: #selector(titleTapped), for: .touchUpInside)
        return btn
    }()
    
    // 输入区域容器（示例包含一个输入框）
    private let inputContainer: UIStackView = {
        let stack = UIStackView()
        stack.axis = .vertical
        stack.spacing = 8
        
        let textField = UITextField()
        textField.placeholder = "请输入内容"
        textField.borderStyle = .roundedRect
        stack.addArrangedSubview(textField)
        
        stack.isHidden = true // 默认隐藏
        return stack
    }()
    
    // 点击标题后的回调，通知外部刷新
    var expansionHandler: (() -> Void)?
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupLayout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupLayout() {
        // 添加子视图到contentView
        contentView.addSubview(titleButton)
        contentView.addSubview(inputContainer)
        
        // 设置AutoLayout约束（用SnapKit或者原生约束都可以）
        titleButton.translatesAutoresizingMaskIntoConstraints = false
        inputContainer.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            titleButton.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 16),
            titleButton.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            titleButton.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            
            inputContainer.topAnchor.constraint(equalTo: titleButton.bottomAnchor, constant: 12),
            inputContainer.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            inputContainer.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            inputContainer.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -16)
        ])
    }
    
    @objc private func titleTapped() {
        inputContainer.isHidden = !inputContainer.isHidden
        expansionHandler?()
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
        inputContainer.isHidden = true
        // 重置输入框内容
        if let textField = inputContainer.arrangedSubviews.first as? UITextField {
            textField.text = nil
        }
    }
    
    // 配置Cell数据
    func configure(with title: String, isExpanded: Bool) {
        titleButton.setTitle(title, for: .normal)
        inputContainer.isHidden = !isExpanded
    }
}

ViewController代码 #

class ViewController: UITableViewController {
    // 模拟数据，建议用实际数据模型替代
    private let items = ["商品标题", "价格设置", "库存信息", "运费模板", "商品描述"]
    private var expandedStates: [IndexPath: Bool] = [:]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.register(DisclosureCell.self, forCellReuseIdentifier: "DisclosureCell")
        // 如果用自动计算行高，打开下面两行
        // tableView.rowHeight = UITableView.automaticDimension
        // tableView.estimatedRowHeight = 60
    }
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "DisclosureCell", for: indexPath) as! DisclosureCell
        let isExpanded = expandedStates[indexPath] ?? false
        cell.configure(with: items[indexPath.row], isExpanded: isExpanded)
        
        cell.expansionHandler = { [weak self] in
            guard let self = self else { return }
            self.expandedStates[indexPath] = !isExpanded
            tableView.reloadRows(at: [indexPath], with: .automatic)
        }
        
        return cell
    }
    
    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        let isExpanded = expandedStates[indexPath] ?? false
        return isExpanded ? 180 : 60
    }
}

四、额外优化建议 #

• 动画优化：可以自定义展开折叠的动画，比如调整tableView.reloadRows的动画类型，或者用UIView.animate来控制输入区域的显示/隐藏，让效果更贴近Etsy的流畅度；
• 数据模型绑定：建议创建一个DisclosureItem模型类，包含title、inputValue、isExpanded等属性，这样管理数据和状态会更清晰，避免字典的混乱；
• 多类型输入支持：如果需要不同类型的输入字段（比如下拉选择、多行文本、开关等），可以设计多个自定义Cell子类，在cellForRowAt里根据模型类型返回对应Cell。

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