为什么通过代码添加视图后UIStackView未正常填充显示？

嘿，我一眼就发现问题所在啦！你创建的chartParentView这个UIStackView虽然配置了子视图和布局属性，但没有给它设置任何布局约束或者frame，导致它的尺寸是CGRect.zero——也就是完全没有大小，自然就看不到啦。另外还有个小细节容易忽略：UIStackView默认的排列方向是纵向（vertical），你要横向排列的话得手动设置。

修正后的完整代码 #

@IBOutlet weak var dataPointsGatheredView: UIView!

func configureChart(){
    let chartParentView = UIStackView()
    chartParentView.backgroundColor = .red
    // 关键：关闭自动约束转换，否则手动添加的约束不生效
    chartParentView.translatesAutoresizingMaskIntoConstraints = false
    // 设置横向排列，这是你要的横向效果的核心
    chartParentView.axis = .horizontal
    chartParentView.distribution = .fillEqually
    
    (0..<4).forEach { (index) in
        let rowView = UIView()
        rowView.backgroundColor = .blue
        chartParentView.addArrangedSubview(rowView)
    }
    
    dataPointsGatheredView.addSubview(chartParentView)
    
    // 添加约束，让StackView完全填满父视图
    NSLayoutConstraint.activate([
        chartParentView.topAnchor.constraint(equalTo: dataPointsGatheredView.topAnchor),
        chartParentView.leadingAnchor.constraint(equalTo: dataPointsGatheredView.leadingAnchor),
        chartParentView.trailingAnchor.constraint(equalTo: dataPointsGatheredView.trailingAnchor),
        chartParentView.bottomAnchor.constraint(equalTo: dataPointsGatheredView.bottomAnchor)
    ])
}

几个必须注意的关键点 #

• translatesAutoresizingMaskIntoConstraints：代码创建的视图默认这个属性是true，系统会自动生成约束。我们手动添加约束时必须把它设为false，否则会出现约束冲突或者自定义约束不生效的情况。
• StackView的排列方向：默认是纵向（vertical），如果你要横向排列四个蓝色视图，一定要显式设置axis = .horizontal，不然子视图会纵向堆叠，即使显示了也不是你要的效果。
• 父视图的有效性：确保dataPointsGatheredView在Storyboard中已经配置了正确的约束，比如它的父StackView给了它足够的宽度和高度——如果它本身尺寸为零，那里面的子视图也不会显示。

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