SwiftUI：如何让RoundedRectangle随文本尺寸自动适配并带内边距？

解决方案 #

直接调整视图结构，让Text作为基础视图，用background替代overlay添加圆角矩形边框，同时给Text设置内边距控制留白，这样圆角矩形会自动适配文字宽度，无需手动指定尺寸：

Text(item.category)
    .font(.caption.weight(.semibold))
    .foregroundColor(.accentColor)
    .padding(.horizontal, 12) // 控制左右内边距
    .padding(.vertical, 4)    // 控制上下内边距
    .background(
        RoundedRectangle(cornerRadius: 25, style: .continuous)
            .stroke(Color.black, lineWidth: 1)
    )

关键说明 #

• 原写法是先固定圆角矩形尺寸再覆盖文字，现在让文字主导布局，背景自动匹配文字尺寸，天然实现宽度自适应。
• 通过padding可以灵活调整文字与边框的间距，比手动计算宽度更精准灵活。
• 完全保留了你原本需要的样式：连续圆角、黑色边框、文字的字体和颜色设置。

如果坚持想用overlay写法（不推荐，逻辑不如background直观），也可以去掉固定宽度的frame，给Text加内边距后再叠加边框：

Text(item.category)
    .font(.caption.weight(.semibold))
    .foregroundColor(.accentColor)
    .padding(.horizontal, 12)
    .padding(.vertical, 4)
    .overlay(
        RoundedRectangle(cornerRadius: 25, style: .continuous)
            .stroke(Color.black, lineWidth: 1)
    )

两种写法效果一致，优先推荐background的实现方式，更贴合SwiftUI的布局逻辑。

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