如何在UITableViewController底部添加评论输入组件及排障

我来帮你搞定这两个困扰你的问题，你可以根据自己的需求选择对应的方案：

方案一：在UITableViewController中添加固定底部的输入组件 #

你之前的代码问题主要是没有考虑安全区域，而且UITableViewController的tableView会默认占满整个视图，导致输入框可能被遮挡，同时最后一行cell会被输入栏盖住。下面是修改后的完整代码：

override func viewDidLoad() {
    super.viewDidLoad()
    // 先初始化输入组件
    setupInputComponents()
    // 加载Firebase评论数据
    loadFirebaseComments()
}

func setupInputComponents() {
    // 1. 创建容器视图，统一管理输入框和按钮
    let containerView = UIView()
    containerView.translatesAutoresizingMaskIntoConstraints = false
    containerView.backgroundColor = .white
    view.addSubview(containerView)
    
    // 2. 设置容器视图约束（关键：用safeArea适配不同设备的底部安全区域）
    NSLayoutConstraint.activate([
        containerView.leftAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leftAnchor),
        containerView.rightAnchor.constraint(equalTo: view.safeAreaLayoutGuide.rightAnchor),
        containerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
        containerView.heightAnchor.constraint(equalToConstant: 50)
    ])
    
    // 3. 创建发布按钮
    let sendButton = UIButton(type: .system)
    sendButton.setTitle("Post", for: .normal)
    sendButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 16)
    sendButton.translatesAutoresizingMaskIntoConstraints = false
    sendButton.addTarget(self, action: #selector(handlePost), for: .touchUpInside)
    containerView.addSubview(sendButton)
    
    // 4. 配置按钮约束
    NSLayoutConstraint.activate([
        sendButton.rightAnchor.constraint(equalTo: containerView.rightAnchor, constant: -8),
        sendButton.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
        sendButton.widthAnchor.constraint(equalToConstant: 80),
        sendButton.heightAnchor.constraint(equalTo: containerView.heightAnchor)
    ])
    
    // 5. 创建输入框（如果之前没声明，这里补充声明）
    let commentInputTextField = UITextField()
    commentInputTextField.placeholder = "写评论..."
    commentInputTextField.borderStyle = .roundedRect
    commentInputTextField.translatesAutoresizingMaskIntoConstraints = false
    containerView.addSubview(commentInputTextField)
    
    // 6. 配置输入框约束
    NSLayoutConstraint.activate([
        commentInputTextField.leftAnchor.constraint(equalTo: containerView.leftAnchor, constant: 8),
        commentInputTextField.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
        commentInputTextField.rightAnchor.constraint(equalTo: sendButton.leftAnchor, constant: -8),
        commentInputTextField.heightAnchor.constraint(equalToConstant: 36)
    ])
    
    // 7. 关键：调整tableView内边距，避免最后一行cell被输入栏遮挡
    let bottomInset = containerView.frame.height
    tableView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: bottomInset, right: 0)
    tableView.scrollIndicatorInsets = tableView.contentInset
}

@objc func handlePost() {
    // 发布评论逻辑
    guard let commentText = commentInputTextField.text, !commentText.isEmpty else { return }
    // 这里添加Firebase上传代码
    commentInputTextField.text = ""
}

核心优化点： #

• 用view.safeAreaLayoutGuide适配底部安全区域，避免输入框被刘海或底部导航栏遮挡
• 调整tableView的contentInset，确保最后一条评论能完整显示
• 优化输入框高度，让视觉效果更协调

方案二：修复UIViewController+UITableView的Firebase数据显示问题 #

你之前的代码大概率是没注册自定义cell、IBOutlet连接异常或者tableView约束未铺满视图导致的。下面是修复后的完整代码：

import UIKit
import Firebase

class CommentDoOrDieViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    // 定义cell重用标识符
    private let cellIdentifier = "commentTableCell"
    
    struct Message {
        var msg: String?
        var id: String?
    }
    
    var messages = [Message]()
    var productId = ""
    var productName = ""
    
    // 确保IBOutlet已正确连接（storyboard创建的tableView）
    @IBOutlet weak var tabela: UITableView!
    
    // 如果是纯代码创建tableView，用下面的懒加载代码：
    /*
    private lazy var tabela: UITableView = {
        let tv = UITableView()
        tv.translatesAutoresizingMaskIntoConstraints = false
        tv.delegate = self
        tv.dataSource = self
        tv.register(CommentsTableViewCell.self, forCellReuseIdentifier: cellIdentifier)
        return tv
    }()
    */
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTableView()
        showComments()
    }
    
    private func setupTableView() {
        // 注册自定义cell（storyboard创建的cell可跳过，但要确保identifier一致）
        tabela.register(CommentsTableViewCell.self, forCellReuseIdentifier: cellIdentifier)
        
        // 纯代码创建时添加约束：
        /*
        view.addSubview(tabela)
        NSLayoutConstraint.activate([
            tabela.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            tabela.leftAnchor.constraint(equalTo: view.leftAnchor),
            tabela.rightAnchor.constraint(equalTo: view.rightAnchor),
            tabela.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
        */
        
        tabela.delegate = self
        tabela.dataSource = self
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        print("当前评论数：\(messages.count)") // 打印确认数据是否加载
        return messages.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as? CommentsTableViewCell else {
            fatalError("无法转换为CommentsTableViewCell，请检查cell类名和identifier")
        }
        let message = messages[indexPath.row]
        cell.komentLabela?.text = message.msg
        return cell
    }
    
    func showComments(){
        let ref = Database.database().reference().child("productComments").child(productId)
        ref.observe(.childAdded, with: { [weak self] snapshot in // 用weak self避免循环引用
            guard let self = self else { return }
            print("Firebase返回数据：\(snapshot)") // 打印确认数据是否正确获取
            if let slovar = snapshot.value as? [String:AnyObject] {
                let comment = Message(
                    msg: slovar["comment"] as? String,
                    id: snapshot.key // 用snapshot的key作为评论ID更可靠
                )
                self.messages.append(comment)
                DispatchQueue.main.async {
                    self.tabela.reloadData()
                    // 可选：自动滚动到最新评论
                    let indexPath = IndexPath(row: self.messages.count - 1, section: 0)
                    self.tabela.scrollToRow(at: indexPath, at: .bottom, animated: true)
                }
            }
        }, withCancel: { error in
            print("加载评论失败：\(error.localizedDescription)")
        })
    }
}

核心修复点： #

• 注册自定义cell（纯代码创建必须做，storyboard要确保identifier匹配）
• 添加日志打印，方便排查数据是否正确加载
• 用[weak self]避免循环引用
• 增加错误处理，快速定位加载失败原因

方案选择建议 #

• 如果你习惯UITableViewController的便捷性，方案一修改后就能直接实现需求
• 如果你需要更灵活的页面布局（比如添加其他顶部/侧边组件），方案二修复后完全可以正常显示Firebase数据

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