iOS开发如何通过Storyboard实现加载数据库动态数据的可变元素ScrollView

你当前已经在Storyboard中添加了ScrollView，按以下步骤操作即可实现和纯代码循环写控件同等的效果： #

第一步：Storyboard 静态容器搭建 #

Storyboard仅用来搭建固定的滚动、堆叠容器，动态数量的按钮不需要提前在Storyboard中画好：

• 给已经添加的UIScrollView做好边缘约束：上下左右四边对齐ViewController的安全区，完成后将ScrollView右键拖线关联到对应的ViewController类，自定义命名比如linkScrollView。
• 从Xcode组件库拖一个UIStackView放到ScrollView内部，选中StackView在右侧属性检查器设置参数：
  • Axis 选择 Vertical（垂直排布）
  • Alignment 选择 Fill（宽度撑满父视图）
  • Spacing 设置为你需要的按钮间距，比如8
  • Distribution 按需选择，如果要所有按钮高度一致选Fill Equally，如果要自定义按钮高度选Fill
• 给StackView添加约束：上下左右四边贴住ScrollView的Content Layout Guide，额外添加一个「等宽」约束，对齐ScrollView的Frame Layout Guide——这组约束设置完后，StackView会自动适配宽度，垂直方向高度随内部子控件变化，ScrollView会自动计算滚动范围，不需要手动写代码设置contentSize。
• 把StackView也拖线关联到ViewController类，命名比如buttonStackView。

Storyboard初始界面参考 #

第二步：配合代码动态生成按钮 #

Storyboard是静态设计工具，本身不支持循环生成动态数量的控件，只需要少量代码就能完成动态按钮的渲染，代码量远低于纯写UI的方案：

1. 等网络/数据库请求返回链接数据后，先清空StackView内的旧控件，避免重复渲染：

buttonStackView.arrangedSubviews.forEach { $0.removeFromSuperview() }

2. 遍历返回的数据数组，循环生成按钮并加入StackView：

// 假设你从数据库拿到的模型数组叫 linkList，每个模型有name(按钮标题)、url(跳转链接)两个属性
for (index, item) in linkList.enumerated() {
    let actionBtn = UIButton(type: .system)
    actionBtn.setTitle(item.name, for: .normal)
    actionBtn.tag = index // 用tag标记当前按钮对应的数据下标
    actionBtn.addTarget(self, action: #selector(openLink(_:)), for: .touchUpInside)
    // 如果需要固定按钮高度，加这行约束即可
    actionBtn.heightAnchor.constraint(equalToConstant: 44).isActive = true
    buttonStackView.addArrangedSubview(actionBtn)
}

3. 实现按钮点击的跳转逻辑：

@objc private func openLink(_ sender: UIButton) {
    let selectedItem = linkList[sender.tag]
    guard let targetUrl = URL(string: selectedItem.url) else { return }
    UIApplication.shared.open(targetUrl)
}

注意事项 #

• 不需要提前在Storyboard中添加固定数量的按钮做隐藏显示，动态生成的按钮加入StackView后会自动按垂直顺序排列，自动适配ScrollView的滚动范围。
• 如果你的按钮样式比较复杂，也可以提前在Storyboard中做一个Button的xib模板，循环的时候用xib注册生成按钮即可，不需要修改上述布局逻辑。

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