SwiftUI中如何为视图设置自适应尺寸的多层背景？

你的问题出在ZStack中的Color默认会填充整个父视图空间，无法自适应文本的尺寸。下面提供两种简单的解决方法：

方法一：利用多层背景+padding实现 #

通过给文本先设置白色背景，再添加一层padding作为外层浅蓝色背景的厚度，最后设置浅蓝色背景并统一裁剪圆角，这样背景会自动适配文本尺寸：

Text("BASKETBALL")
    .font(.custom("AmericanTypewriter", size: 18))
    .padding(.horizontal, 20)
    .padding(.vertical, 6)
    .background(.white)
    .clipShape(RoundedRectangle(cornerRadius: 13))
    .padding(2) // 控制外层浅蓝色背景的厚度，可按需调整
    .background(Color(.lightBlue10))
    .clipShape(RoundedRectangle(cornerRadius: 13))

方法二：调整ZStack结构，让背景跟随文本尺寸 #

将Color和文本都限制在自适应容器内，通过给Color添加对应padding来匹配文本的外层空间：

ZStack {
    Color(.lightBlue10)
        .padding(2) // 外层背景厚度
        .clipShape(RoundedRectangle(cornerRadius: 13))
    Text("BASKETBALL")
        .font(.custom("AmericanTypewriter", size: 18))
        .padding(.horizontal, 20)
        .padding(.vertical, 6)
        .background(.white)
        .clipShape(RoundedRectangle(cornerRadius: 13))
}
.fixedSize() // 让ZStack仅包裹内容，不占满父视图

两种方法都能实现浅蓝色外层、白色内层的双层背景，且背景会自动适配文本的尺寸。

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