Swift-Eureka框架：如何为ButtonRow按钮添加左右边距并居中？

我之前在使用Eureka构建表单时也碰到过这个需求，给你几个实用的解决方案，亲测有效：

方案一：通过cellSetup闭包直接配置按钮 #

这是最快捷的方式，不需要自定义cell，直接在创建ButtonRow时通过cellSetup修改按钮的样式和布局：

ButtonRow("Submit") { row in
    row.title = "提交" // 设置按钮文字
}
.cellSetup { cell, row in
    // 设置按钮内部边距，让按钮整体缩小
    cell.button.contentEdgeInsets = UIEdgeInsets(top: 8, left: 24, bottom: 8, right: 24)
    // 让按钮文字居中（默认就是居中，但保险起见可以设置）
    cell.button.contentHorizontalAlignment = .center
    
    // 可选：添加宽度约束，限制按钮最大宽度，避免文字过长时撑满屏幕
    cell.button.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        cell.button.centerXAnchor.constraint(equalTo: cell.contentView.centerXAnchor),
        cell.button.widthAnchor.constraint(lessThanOrEqualToConstant: 220)
    ])
}

这个方法的核心是通过contentEdgeInsets给按钮内部添加边距，让按钮本身缩小，再通过约束让按钮在cell中水平居中。

方案二：自定义ButtonCell子类（适合复用场景） #

如果你需要在多个地方使用这种样式的按钮，自定义cell子类会更高效，避免重复代码：

// 自定义居中缩小的按钮cell
class CenteredCompactButtonCell: ButtonCell {
    override func setup() {
        super.setup()
        // 配置按钮内边距
        button.contentEdgeInsets = UIEdgeInsets(top: 8, left: 24, bottom: 8, right: 24)
        // 按钮居中
        button.contentHorizontalAlignment = .center
        // 添加约束确保按钮居中且宽度受限
        button.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            button.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
            button.widthAnchor.constraint(lessThanOrEqualToConstant: 220)
        ])
    }
}

// 使用自定义cell创建ButtonRow
ButtonRow<CenteredCompactButtonCell>("Submit") { row in
    row.title = "提交"
}

以后只要需要这种样式的按钮，直接使用CenteredCompactButtonCell即可，维护起来更方便。

方案三：调整Cell的contentView内边距（整体控制间距） #

如果你希望按钮和Cell的左右边缘保持固定间距，也可以修改Cell的contentView布局边距：

ButtonRow("Submit") { row in
    row.title = "提交"
}
.cellSetup { cell, row in
    // 设置contentView的左右内边距，让按钮在这个范围内居中
    cell.contentView.layoutMargins = UIEdgeInsets(top: 0, left: 32, bottom: 0, right: 32)
    cell.button.contentHorizontalAlignment = .center
    // 让按钮适配layoutMargins的布局范围
    cell.button.autoresizingMask = []
    cell.button.frame = cell.contentView.layoutMarginsGuide.layoutFrame
}

这个方法适合需要控制按钮与Cell边缘间距的场景，不过要注意不同屏幕尺寸下的适配问题。

小提示 #

• 如果按钮文字较长，建议配合宽度约束使用，避免按钮过宽影响美观
• contentEdgeInsets控制的是按钮内部文字与按钮边缘的间距，而Cell的layoutMargins控制的是按钮与Cell边缘的间距，可以根据需求选择使用

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