Swift UIStackView 利用 UIStackView 的全宽

Posted 2023-02-25

【中文标题】Swift UIStackView 利用 UIStackView 的全宽

【英文标题】：Swift UIStackView utilize full width of UIStackView

【发布时间】：2018-03-16 12:46:04

【问题描述】：

在上面的屏幕中，您可以看到我正在使用UIStackView 来垂直填充单选按钮。问题是当我使用stackV.alignment = .leading 时，我的单选按钮没有使用UIStackView 的全部宽度，它显示标签为“dis..lified”而不是取消资格。

UISTackView 代码

let ratingStackView : UIStackView = 

    let stackV = UIStackView()
    stackV.translatesAutoresizingMaskIntoConstraints = false
    stackV.backgroundColor = UIColor.yellow
    stackV.axis = .vertical
    stackV.distribution = .fillEqually
    stackV.alignment = .leading
    return stackV
()

UIStackView的布局

func setupView()
    view.addSubview(ratingStackView)

    ratingStackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

    ratingStackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor,constant: 8).isActive = true

    ratingStackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true

    ratingStackView.heightAnchor.constraint(equalToConstant: 200).isActive = true

    //Add radio buttons to stackview
    for ratingButton in ratingRadioButtons
        ratingStackView.addArrangedSubview(ratingButton)
            

我需要设置什么属性来使用全宽，请告诉我我是 Swift 单选按钮的新手。我正在使用DLRadioButton。

【问题讨论】：

尝试为您的单选按钮添加宽度限制。

注意UIStackView不能设置backgroundColor

【参考方案1】：

要使其正常工作，您需要在布局中进行以下更改：

1.将UIStackView'salignment属性设置为fill，即

stackV.alignment = .fill

2. 将UIButton's Horizontal Alignment 设置为left，无论您是在.xib 文件中还是通过代码创建RadioButton。

在.xib，你可以在这里找到接口中的属性：

如果您使用代码创建按钮，请使用以下代码行：

ratingButton.contentHorizontalAlignment = .left

如果您仍然遇到此问题，请告诉我。快乐编码..?

【讨论】：

ratingButton.contentHorizontalAlignment = .left 和 .fill 工作正常，感谢您的帮助，快乐编码..

当然。如果它对您有用，请接受并投票赞成..:)

我投了赞成票，但没有足够的积分，所以只是记录下来。

【参考方案2】：

保留alignment 的默认值，即.fill——这会在垂直于堆栈轴的方向上拉伸排列的视图。

实际上，我怀疑如果您使用.leading 对齐并且未指定嵌套控件的宽度，您会在运行时收到自动布局警告（可以在 Xcode 中的 Visual Debugger 中检查）。

【讨论】：

.fill 完美地拉伸单选按钮，但它会将单选按钮放在看起来不太好的中心。

screenshot @dan 你可以看到这张图片，使用.fill后所有按钮都放在了中心

【参考方案3】：

尝试按比例分配。

还有一件事要尝试...降低标签的内容拥抱优先级。