将视图动态添加到 UIStackview

Posted 2023-02-27

【中文标题】将视图动态添加到 UIStackview

【英文标题】：Adding views dynamically to UIStackview

【发布时间】：2018-07-24 04:45:09

【问题描述】：

我正在尝试将视图（或按钮）动态添加到 UIStackView。

起初，UIStackView 没有排列视图（垂直），并且 从一些 http 响应获得后，几个视图（按钮）被添加到 UIStackView。 UIStackView 也是自动布局以容纳特定区域。 我试图找到动态添加示例，但失败了。

任何人都可以向我展示动态添加视图到UIStackView 的示例吗？

【问题讨论】：

不确定这是否可行，我想我尝试过一次但失败了

到目前为止你做了什么？

您的问题解决了吗？如果是，请从下面选择一个答案

感谢所有答案，但没有我需要的确切答案。但是，我必须拿起一个吗？

【参考方案1】：

它可以帮助你。请遵循以下几点：

在情节提要或 XIB 中将 UIScrollView 添加到您的 UIViewController。 启动一个NSMutableArray 命名它arrViews 获取服务器响应并在数组中添加视图。 在 init 方法中初始化 UIStackViewpass arrView 数组。 之后UIStackView 将添加UIScrollView 的子视图。

以编程方式将约束添加到UIStackView。就是这样。

if let response = self.serverResponse 
    if let body = response.responseBody 

        if let view = body.views 
            arrViews =  createSubViews(view)
        

    


let stackView = UIStackView(arrangedSubviews: arrViews)
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical
stackView.spacing = 16
stackView.distribution = .fill
self.scrollView.addSubview(stackView)

//constraints

let leading = NSLayoutConstraint(item: stackView, attribute: .leading, relatedBy: .equal, toItem: self.scrollView, attribute: .leading, multiplier: 1.0, constant: 0)
self.scrollView.addConstraint(leading)
let trailing = NSLayoutConstraint(item: stackView, attribute: .trailing, relatedBy: .equal, toItem: self.scrollView, attribute: .trailing, multiplier: 1.0, constant: 0)
self.scrollView.addConstraint(trailing)
let top = NSLayoutConstraint(item: stackView, attribute: .top, relatedBy: .equal, toItem: self.scrollView, attribute: .top, multiplier: 1.0, constant: 0)
self.scrollView.addConstraint(top)

let bottom = NSLayoutConstraint(item: stackView, attribute: .bottom, relatedBy: .equal, toItem: self.scrollView, attribute: .bottom, multiplier: 1.0, constant: 0)
self.scrollView.addConstraint(bottom)

let equalWidth = NSLayoutConstraint(item: stackView, attribute: .width, relatedBy: .equal, toItem: self.scrollView, attribute: .width, multiplier: 1.0, constant: 0)

self.scrollView.addConstraint(equalWidth)


leading.isActive = true
trailing.isActive = true
top.isActive = true
bottom.isActive = true
equalWidth.isActive = true

希望对您有所帮助。快乐编码:)

【讨论】：

谢谢。好建议。我根本没有想到那个滚动视图。我会试试的。

欢迎。如果它对你有用，请告诉我，请接受答案并投票给我。 ;) 提供更多帮助。

【参考方案2】：

我在我的一个项目中使用此代码：

    let baseFrame = CGRect(origin: .zero, size: CGSize(width: requiredWidth, height: partitionHeight))
    for instrument in instruments 
        let partitionView = PartitionOnDemand(instrument: instrument, mode: playbackMode, frame: baseFrame, referenceView: partitionsAnimator)
        partitionsStackView.addArrangedSubview(partitionView)
        let tab = InstrumentInfoTabContainer.instantiate(with: instrument) 
            self.focus(on: instrument)
        
        tabsStackView.addArrangedSubview(tab)
    

【讨论】：

谢谢！但由于我的技能不好，我无法理解你的意思。

它是一个循环，用音乐分区和乐器信息填充两个堆栈视图。重要的部分是 addArrangedSubview

我能够通过使用 addArrangedSubview 将视图动态添加到 StackView - 谢谢。

【参考方案3】：

在尝试回答时，我碰巧找到了解决方法。

class ViewController: UIViewController 

@IBOutlet weak var stack: UIStackView!
override func viewDidLoad() 
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.


override func didReceiveMemoryWarning() 
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.

@IBAction func onBtn_Create(_ sender: Any) 
    createButton("new button ...")

@IBAction func onBtn_Delete(_ sender: Any) 
    if let v = stack.arrangedSubviews.last 
        stack.removeArrangedSubview(v)
        v.removeFromSuperview()
    




func createButton(_ title: String) 
    let button = UIButton()
    button.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
    button.backgroundColor = UIColor.blue
    button.setTitle(title, for: .normal)
    button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)

    stack.addArrangedSubview(button)



@objc func buttonAction(sender: UIButton!) 
    print("Button tapped")

而且，我锚定到 UIStackView，Trailing=0，Leading=0，Top=0，Bottom=8 到 TextView.Top

里面的子视图完好无损，没有任何约束。

谢谢。