根据 RoundedRectangle 上的文本大小填充文本叠加

Question

Is there a native way to fill in a shape and make the width based on the size of the Text overlay?

Here is the code that I have:

RoundedRectangle(cornerRadius: 25, style: .continuous)
    .stroke(Color.black, lineWidth: 1)
    .frame(width: 100, height: 20, alignment: Alignment.top)
    .overlay(
        Text(item.category)
            .font(.caption.weight(.semibold))
            .foregroundColor(.accentColor)
    )

This created the following rounded rectangle:

Does anyone know how to make the rounded rectangle the size of the Text inside? So basically, instead of passing a width, I want the RoundedRectangle to expand based on the width of the Text automatically, but also leave some padding.

Answer 1

You can try this

Text(item.category)
    .font(.caption.weight(.semibold))
    .foregroundColor(.accentColor)
    .padding(10) // your preference
    .overlay(
        RoundedRectangle(cornerRadius: 25, style: .continuous)
            .stroke(.black, lineWidth: 1)
    )