首页 > 解决方案 > Swift:通过循环以编程方式在另一个下方添加多个堆栈视图

问题描述

我在情节提要中创建了一个视图控制器,它包含(查看图片以供参考)

  1. 滚动视图

    一个。StackViewA(图片:绿色)

    一世。标签A

    ii. 标签B

    湾。StackViewB(图片:绿色)

    一世。标签C

    ii. 标签D

我正在从 API 获取数据,并且能够在这些标签中显示该数据。

现在,我正在获取的第三组数据是动态的,这意味着它可以是第二个 StackView 下的 2 个 StackView(图像:红色)或 3 个以上等。我猜我在控制器中以编程方式添加了 StackView循环,以便根据循环创建。

目前,我的第三个 StackView 也在情节提要中创建,因此它只显示第三组循环后的最后一个数据。

我该如何解决?

进一步来说:

  1. 如何在情节提要中创建的 ScrollerView 中添加 StackView。

  2. 我如何将其包含在故事板中创建的第二个 StackView 下方。

检查图像以供参考

更新

class InfoDetailsViewController: UIViewController {

// MARK: - Outlets

@IBOutlet weak var infoStack: UIStackView!
@IBOutlet weak var mainScroll: UIScrollView!

static var apiResp: APIDetailsResponse.APIReturn?
let infos: [APIDetailsResponse.Info] = (APIDetailsViewController.apiResp?.content?.infos)!

override func viewDidLoad() {
    super.viewDidLoad()

    infoStack.spacing = 25.0

    for info in infos {

        let addInfoTitle = UILabel()
        addInfoTitle.font = .preferredFont(forTextStyle: .body)
        addInfoTitle.backgroundColor = .orange
        addInfoTitle.translatesAutoresizingMaskIntoConstraints = false

        let addInfoContent = UITextView()
        addInfoContent.font = .preferredFont(forTextStyle: .body)
        addInfoContent.backgroundColor = .green
        addInfoContent.translatesAutoresizingMaskIntoConstraints = false

        addInfoTitle.text = "\(String(describing: (info.info_title)!))"

        let htmlString = "\(String(describing: (info.information)!))"
        // works even without <html><body> </body></html> tags, BTW
        let data = htmlString.data(using: String.Encoding.unicode)!
        let attrStr = try? NSAttributedString(
            data: data,
            options: [NSAttributedString.DocumentReadingOptionKey.documentType: NSAttributedString.DocumentType.html],
            documentAttributes: nil)
        addInfoContent.attributedText = attrStr


        let childStackView = UIStackView(arrangedSubviews: [addInfoTitle, addInfoContent])
        childStackView.alignment = .fill
        childStackView.axis = .vertical
        childStackView.distribution = .fill
        childStackView.spacing = 5.0

        childStackView.translatesAutoresizingMaskIntoConstraints = false
        infoStack.addArrangedSubview(childStackView)

}
}

目前我有这个。现在发生的事情是无论数组返回多少数据,我总是得到第一个的标题和内容,并且每个连续数据的唯一标题。

标签: iosswiftuistackview

解决方案


所以最好的解决方案是在创建滚动视图时在其中添加一个堆栈视图。并且每当您创建堆栈视图时,都会在滚动视图内的堆栈视图下动态添加。因此,在这种情况下,您的新堆栈视图将以适当的方式堆叠在您的外部堆栈视图下。

ScrollView -> 1 Stackview -> 循环中的多个动态堆栈视图

假设您已经从情节提要中获得了名为 ParentStackview 的堆栈视图。然后按照这些步骤

lazy var childStackView: UIStackView = {
    let stackView = UIStackView()
    stackView.alignment = .center
    stackView.axis = .vertical
    stackView.distribution = .equalCentering
    stackView.spacing = 30.0
    return stackView
}()

  public func viewDidLoad() {

   ParentStackview.alignment = .center
    ParentStackview.axis = .vertical
    ParentStackview.distribution = .equalCentering
    ParentStackview.spacing = 10.0


  for eachChild in data {
     ParentStackView.addArrangedSubview(childStackView)
      childStackView.translatesAutoresizingMaskIntoConstraints = false
    childStackView.widthAnchor.constraint(equalTo: securityScrollView.widthAnchor)
    //set height too

     // this below function you can use to add eachChild data to you child stackview
     configureStackview(childstackView, eachChild)
   }
 }

享受!


推荐阅读