iOS开发：如何将iPad屏幕划分为4个均等区域并各设列表？

嘿，这个需求我之前帮不少开发者搞定过，其实不用死磕UISplitViewController——它本来就是为双分区设计的，硬改反而麻烦。咱们直接用UIStackView搭配容器视图，就能轻松实现四个均等分区的布局，而且完全满足你“无指定根视图控制器”的要求，四个列表地位完全平等。

核心思路 #

用嵌套的UIStackView先把屏幕拆分成2x2的均等网格，再给每个网格区域嵌入独立的列表视图控制器，每个列表各自管理自己的数据和交互，没有主次之分。

具体实现步骤 #

方式一：纯代码实现（灵活度高） #

import UIKit

class MainViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        setupFourPanelLayout()
    }
    
    private func setupFourPanelLayout() {
        // 1. 创建垂直StackView，把屏幕分成上下均等两半
        let verticalStack = UIStackView()
        verticalStack.axis = .vertical
        verticalStack.distribution = .fillEqually
        verticalStack.spacing = 8 // 可选：给分区之间加间距
        verticalStack.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(verticalStack)
        
        // 约束垂直StackView铺满整个安全区
        NSLayoutConstraint.activate([
            verticalStack.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            verticalStack.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
            verticalStack.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            verticalStack.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ])
        
        // 2. 创建两个水平StackView，分别放在上下区域，每个再分成左右均等两半
        let topHorizontalStack = UIStackView()
        topHorizontalStack.axis = .horizontal
        topHorizontalStack.distribution = .fillEqually
        topHorizontalStack.spacing = 8
        
        let bottomHorizontalStack = UIStackView()
        bottomHorizontalStack.axis = .horizontal
        bottomHorizontalStack.distribution = .fillEqually
        bottomHorizontalStack.spacing = 8
        
        verticalStack.addArrangedSubview(topHorizontalStack)
        verticalStack.addArrangedSubview(bottomHorizontalStack)
        
        // 3. 创建四个列表控制器，嵌入到对应的分区里
        let listVCs = [
            ListTableViewController(title: "左上列表"),
            ListTableViewController(title: "右上列表"),
            ListTableViewController(title: "左下列表"),
            ListTableViewController(title: "右下列表")
        ]
        
        // 把列表添加到顶部水平StackView
        addChildVC(listVCs[0], to: topHorizontalStack)
        addChildVC(listVCs[1], to: topHorizontalStack)
        
        // 把列表添加到底部水平StackView
        addChildVC(listVCs[2], to: bottomHorizontalStack)
        addChildVC(listVCs[3], to: bottomHorizontalStack)
    }
    
    // 封装添加子控制器的便捷方法
    private func addChildVC(_ childVC: UIViewController, to stackView: UIStackView) {
        addChild(childVC)
        childVC.view.translatesAutoresizingMaskIntoConstraints = false
        stackView.addArrangedSubview(childVC.view)
        childVC.didMove(toParent: self)
        
        // 可选：给列表视图加边框，方便调试时看清分区范围
        childVC.view.layer.borderWidth = 1
        childVC.view.layer.borderColor = UIColor.lightGray.cgColor
    }
}

// 示例列表控制器（可根据业务需求自定义）
class ListTableViewController: UITableViewController {
    private let listTitle: String
    
    init(title: String) {
        self.listTitle = title
        super.init(style: .plain)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        title = listTitle
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "ListCell")
    }
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 15
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ListCell", for: indexPath)
        cell.textLabel?.text = "\(listTitle) - 第\(indexPath.row + 1)行"
        return cell
    }
}

方式二：Storyboard可视化实现（直观易上手） #

• 打开Storyboard，在主视图控制器的View中拖入一个垂直UIStackView，设置约束让它铺满安全区，然后在属性面板里把Distribution设为Fill Equally。
• 往垂直StackView里拖入两个水平UIStackView，同样把它们的Distribution设为Fill Equally，形成2x2的网格布局。
• 给每个水平StackView拖入两个Container View，调整大小让它们完全填充StackView的子项。
• 选中每个Container View，右键拖拽到提前创建好的列表视图控制器（UITableViewController），选择Embed segue完成控制器关联。
• 最后给列表控制器的TableView设置Cell的Identifier，填充测试数据即可。

方案优势 #

• 四个列表都是独立的视图控制器，各自管理业务逻辑，没有主次之分，完全符合“无指定根视图”的要求。
• 布局自动适配iPad的各种尺寸，屏幕旋转时会自动保持均等分布。
• 可以灵活调整分区间距、边框等样式，适配不同UI需求。

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