SwiftUI中如何为Text添加内部边距？背景满宽文本留边

要实现背景填满整个水平空间并给文本添加内部边距，只需调整overlay内的文本布局和背景设置，具体修改如下：

修改后的完整代码 #

struct MostViewedViewItem: View {
    let moviePic: String = "image_placeholder"
    let movieName: String = "Movie Name Loading..."
    
    var body: some View {
        Button {
            // TODO: add a navigation link to the movie
        } label: {
            ZStack(alignment: .bottom) {
                Image(moviePic)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 170, height: 100)
                    .clipShape(RoundedRectangle(cornerRadius: 3))
                    .overlay(
                        Text(movieName)
                            .scaledToFill()
                            .foregroundColor(.white)
                            .padding(.horizontal, 8) // 给文本添加水平内边距
                            .frame(maxWidth: .infinity, height: 30) // 让容器占满水平空间，固定高度
                            .background(
                                Rectangle()
                                    .fill(Color("lighter_bg"))
                                    .opacity(0.4)
                            ),
                        alignment: .bottom
                    )
            }
        }
    }
}

关键修改说明 #

• 让背景铺满水平空间：给Text添加.frame(maxWidth: .infinity)，文本所在容器会自动扩展到图片的整个宽度，背景矩形也会随之填满底部水平区域。
• 添加文本内边距：使用.padding(.horizontal, 8)（数值可按需调整）给文本左右添加内部间距，避免文本紧贴背景边缘。
• 调整修饰符顺序：先设置文本内边距，再设置frame，最后添加背景，确保背景能正确覆盖带内边距的容器区域。

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