在 Swift iOS 中以编程方式在故事板设计的 Stackview 中插入视图

Question

我在故事板中创建了一个堆栈视图，它具有三个按钮，我想在所有这三个按钮之间插入一个分隔符，因此我使用框架 CGRect(x: 0, y: 0, width: 1、高度：12) 颜色为灰色。我试图将此视图插入所有三个按钮之间。但它不能正常工作。我可以选择在故事板上添加此分隔符并隐藏显示它，它将起作用。但我的按钮数量是动态的，所以我想在 stackview 中以编程方式插入分隔符。

那么任何人都可以建议我们如何以编程方式在故事板设计的堆栈视图中插入任何视图/任何 UI 元素吗？

故事板：-

代码：-

@IBOutlet weak var mainStack: UIStackView!

 override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    
    let sep1 = getSeparatorView()
    let sep2 = getSeparatorView()
    let sep3 = getSeparatorView()
    mainStack.insertSubview(sep1, at: 1)
    mainStack.insertSubview(sep2, at: 3)
}

 func getSeparatorView() -> UIView {
        let separator = UIView(frame: CGRect(x: 0, y: 0, width: 1, height: 12))
        separator.backgroundColor = UIColor.lightGray
        return separator
    }

注意：-我尝试插入 insertArrangedSubview 函数，但它看起来像这样（仅添加了一个分隔符，宽度错误）：-

mainStack.insertArrangedSubview(sep1, at: 1)
        mainStack.insertArrangedSubview(sep2, at: 3)

Answer 1

这里有一个误会。 Storyboard中的

stackView

是用

auto layout

设计的，而

separator

则使用

frame

。是无法兼容的。所以：

1. 正如 Paulw 所说，

   arrangedSubviews

   是正确的函数。

mainStack.insertArrangedSubview(sep1, at: 1)
mainStack.insertArrangedSubview(sep2, at: 3)

2. 将

   separator

   的框架转换为约束。

func getSeparatorView() -> UIView {
    ...
    separator.translatesAutoresizingMaskIntoConstraints = false
    separator.addConstraints([
        .init(item: separator, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 5),
        .init(item: separator, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 12)
    ])
    return separator
}

3. 更改堆栈对齐和分布。

mainStack.spacing = 8
mainStack.distribution = .fill
mainStack.alignment = .center

输出：