解决 UILabel 约束问题

问题描述

我是 UIKit 的初学者，我想在 UITableViewCell 中实现这种布局。

UIStackView1 由如下排列的子视图组成：

Header Label 和 Value Label 都是 UILabel，通过自下而上锚定连接。

UIStackView2 类似，但 Value Label 是一个 UITextField

出于某种原因，此代码生成空单元格。

func singleFieldsRow() -> UIView {
    
    let viewContainer = UIView(frame: CGRect(x: 0,y: 0,width: self.view.frame.size.width,height: 0))
    viewContainer.translatesAutoresizingMaskIntoConstraints = false
    
    let stackView1: UIStackView = UIStackView()
    stackView1.alignment = .leading
    stackView1.axis = .vertical
    stackView1.distribution = .fillProportionally
    
    viewContainer.addSubview(stackView1)
    
    // stackview1 constraints
    stackView1.translatesAutoresizingMaskIntoConstraints = false
    
    stackView1.leftAnchor.constraint(equalTo: viewContainer.leftAnchor).isActive = true
    stackView1.bottomAnchor.constraint(equalTo: viewContainer.bottomAnchor).isActive = true
    stackView1.rightAnchor.constraint(equalTo: viewContainer.rightAnchor).isActive = true
    
    let stackView1Container: UIView = UIView()
    viewContainer.addSubview(stackView1Container)
    
    stackView1Container.translatesAutoresizingMaskIntoConstraints = false
    stackView1Container.topAnchor.constraint(equalTo: viewContainer.topAnchor).isActive = true
    stackView1Container.leftAnchor.constraint(equalTo: viewContainer.leftAnchor).isActive = true
    stackView1Container.rightAnchor.constraint(equalTo: viewContainer.rightAnchor).isActive = true
    stackView1Container.bottomAnchor.constraint(equalTo: stackView1.topAnchor).isActive = true
    stackView1Container.widthAnchor.constraint(equalTo: viewContainer.widthAnchor).isActive = true
    
    // stackview2
    let stackView2: UIStackView = UIStackView()
    stackView2.alignment = .leading
    stackView2.axis = .vertical
    stackView2.distribution = .equalCentering
    
    stackView1Container.addSubview(stackView2)
    
    stackView2.translatesAutoresizingMaskIntoConstraints = false
    
    
    stackView2.topAnchor.constraint(equalTo: stackView1Container.topAnchor).isActive = true
    stackView2.bottomAnchor.constraint(equalTo: stackView1Container.topAnchor).isActive = true
    stackView2.leftAnchor.constraint(equalTo: stackView1Container.leftAnchor).isActive = true
    
    stackView2.rightAnchor.constraint(equalTo: stackView1Container.rightAnchor).isActive = true
    stackView2.widthAnchor.constraint(equalTo: stackView1Container.widthAnchor).isActive = true
    
        
    for field in stack1Fields {
        let fieldContainer = UIView()
        let headerLabel: UILabel = UILabel()
        let valueLabel: UILabel = UILabel()
        
        headerLabel.text = field.title
        headerLabel.numberOfLines = 0
        headerLabel.adjustsFontSizetoFitWidth = true
        
        valueLabel.text = field.value
        valueLabel.numberOfLines = 0
        valueLabel.adjustsFontSizetoFitWidth = true
        
        fieldContainer.addSubview(headerLabel)
        fieldContainer.addSubview(valueLabel)
        
        headerLabel.widthAnchor.constraint(equalTo: fieldContainer.widthAnchor).isActive = true
        headerLabel.topAnchor.constraint(equalTo: fieldContainer.topAnchor).isActive = true
        headerLabel.leftAnchor.constraint(equalTo: fieldContainer.leftAnchor).isActive = true
        headerLabel.rightAnchor.constraint(equalTo: fieldContainer.rightAnchor).isActive = true
        
        valueLabel.widthAnchor.constraint(equalTo: fieldContainer.widthAnchor).isActive = true
        valueLabel.bottomAnchor.constraint(equalTo: fieldContainer.bottomAnchor).isActive = true
        valueLabel.leftAnchor.constraint(equalTo: fieldContainer.leftAnchor).isActive = true
        valueLabel.rightAnchor.constraint(equalTo: fieldContainer.rightAnchor).isActive = true
        
        stackView2.addArrangedSubview(fieldContainer)
    }
    
    
    
    for field in stack2Fields {
        
        let fieldContainer = UIView()
        
        let headerLabel: UILabel = UILabel()
        
        headerLabel.text = productField.title
        headerLabel.numberOfLines = 0
        headerLabel.adjustsFontSizetoFitWidth = true
        
        fieldContainer.addSubview(headerLabel)
        
        let valueTextField: UITextField = UITextField()
        valueTextField.text = productField.value
        valueTextField.keyboardType = .default
        valueTextField.placeholder = "Insert value"
        valueTextField.translatesAutoresizingMaskIntoConstraints = false
        
        fieldContainer.addSubview(valueTextField)
        
        headerLabel.widthAnchor.constraint(equalTo: fieldContainer.widthAnchor).isActive = true
        headerLabel.topAnchor.constraint(equalTo: fieldContainer.topAnchor).isActive = true
        headerLabel.leftAnchor.constraint(equalTo: fieldContainer.leftAnchor).isActive = true
        headerLabel.rightAnchor.constraint(equalTo: fieldContainer.rightAnchor).isActive = true
        headerLabel.bottomAnchor.constraint(equalTo: valueTextField.topAnchor).isActive = true
        
        valueTextField.widthAnchor.constraint(equalTo: fieldContainer.widthAnchor).isActive = true
        valueTextField.leftAnchor.constraint(equalTo: fieldContainer.leftAnchor).isActive = true
        valueTextField.rightAnchor.constraint(equalTo: fieldContainer.rightAnchor).isActive = true
        valueTextField.bottomAnchor.constraint(equalTo: fieldContainer.bottomAnchor).isActive = true
        
        editableStackView.addArrangedSubview(fieldContainer)
    }
    
    
    return viewContainer
}

您可以看到 UIStackView1 周围有一个额外的 Container，因为有一段代码在 UIStackView 的右侧绘制图像，但对于本示例，这并不重要。

如果我将 sizetoFit() 放在 UILabels 上，我可以看到一些内容，但 UIStackView1 已折叠，这意味着每个 UILabel 彼此重叠。

我也在控制台收到这些消息：

[LayoutConstraints] 无法同时满足约束。 可能以下列表中的至少一项约束是您不想要的。 试试这个： (1) 查看每个约束并尝试找出您不期望的； (2) 找到添加不需要的约束或约束的代码并修复它。 （注意：如果您看到 NSAutoresizingMaskLayoutConstraints 不明白，请参阅 UIView 属性 translatesAutoresizingMaskIntoConstraints 的文档） ( "<0x28157b4d0 h="--&" v="--&" uilabel:0x10501b790.width="="><0x28157b700 h="--&" v="--&" uilabel:0x10501ca00.width="="><0x28154cc80 uilabel:0x10501b790.width="=" uiview:0x10501b620.width><0x28154cdc0 uilabel:0x10501ca00.width="=" uiview:0x10501b620.width>

显示正确，和一个接一个垂直放置。但是，某些显示不正确，并且运行时窗口会向我发出此警告。

：运行时：布局问题：的水平位置不明确。

我是否设置了太多限制？

非常感谢任何帮助。

解决方法

无需为要添加到堆栈视图的所有视图添加约束。堆栈视图将处理约束。

,

我在我的代码中发现了几个入侵者。

这一行：

必须改为：

还有这个

必须删除。