Swift中使用UIStackView布局UITableViewCell时如何在文本旁添加黄色圆点

你可以通过把状态行的「Inprocess」文本和新增的黄色圆点封装到水平栈中，再替换原有垂直状态栈的首个子视图即可完成需求，修改后的代码如下：

核心修改点 #

• 新增黄色圆点视图属性
• 构建水平栈承载圆点和Inprocesslabel，保证二者垂直居中对齐
• 替换原有StatusStack的首个子视图为新构建的水平栈

完整修改后代码 #

let backView = UIView(color: AppColor.appWhite, cornerRadius: 18)

// 新增：黄色状态圆点视图
let statusYellowDot: UIView = {
    let view = UIView(color: .systemYellow, cornerRadius: 3)
    view.constraintWidth(constant: 6)
    view.constraintHeight(constant: 6)
    return view
}()

lazy var advanceStack = VerticalStackView(arrangedSubViews: [SalaryadvanceLabel, $99advanceValue], spacing: 3, distribution: .fillEqually)
// 修改：先构建状态行水平栈，再放入垂直状态栈
lazy var statusRowStack = HorizontalStackView(arrangedSubViews: [statusYellowDot, Inprocesslabel], spacing: 4, alignment: .center)
lazy var StatusStack = VerticalStackView(arrangedSubViews: [statusRowStack, timelabel], spacing: 3, distribution: .fillEqually)
    
lazy var infoStack = HorizontalStackView(arrangedSubViews: [advanceStack, StatusStack], spacing: 10, distribution: .fillEqually)

let indicator: UIView = {
    let view = UIView(color: AppColor.appGreen, cornerRadius: 3)
    view.constraintWidth(constant: 6)
    view.constraintHeight(constant: 6)
    return view
}()
    
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    backgroundColor = AppColor.appBackground
    selectionStyle = .none
    setupView()
    indicator.isHidden = true
    // 可根据业务状态控制圆点显隐、修改颜色
    // statusYellowDot.isHidden = 状态是否完成
    // statusYellowDot.backgroundColor = 对应状态色
}

private func setupView() {
    addSubview(backView)
    backView.anchor(top: topAnchor, leading: leadingAnchor, bottom: bottomAnchor, trailing: trailingAnchor, padding: .init(top: 8, left: 12, bottom: 0, right: 12))

    backView.addSubview(infoStack)
    infoStack.anchor(top: nil, leading: backView.leadingAnchor, bottom: nil, trailing: backView.trailingAnchor, padding: .init(top: 0, left: 20, bottom: 0, right: 20))
    infoStack.centerYInSuperview()

    backView.addSubview(indicator)
    indicator.anchor(top: infoStack.bottomAnchor, leading: nil, bottom: nil, trailing: chargeValue.trailingAnchor, padding: .init(top: 6, left: 0, bottom: 0, right: 0))
}

补充说明 #

• 水平栈的alignment设为.center可以保证圆点和文本天然垂直对齐，不需要额外加约束
• 可根据设计需求调整水平栈的spacing参数，修改圆点和文本的间距
• 后续如果要适配不同状态的圆点颜色、显隐，直接操作statusYellowDot对应的属性即可

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