SwiftUI如何去除文本左右内边距 实现背景宽度撑满父视图

解决方案 #

你遇到的左右内边距问题核心原因是Text默认仅适配内容宽度，没有撑满父容器，加上PageTabViewStyle在模拟器和预览的安全区计算逻辑差异导致效果不一致。不需要使用GeometryReader，直接修改DescriptionView的代码即可实现需求：

struct DescriptionView: View {
    var description =
    """
    02.11.2021
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud urgueam, non intellegere eum quid sibi dicendum sit, cum dolorem summum malum esse dixerit. Omnis enim est natura diligens sui. Quamquam haec quidem praeposita recte et reiecta dicere licebit. Duo Reges: constructio interrete. Idem iste, inquam, de voluptate quid sentit? Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Tum ille: Tu autem cum ipse tantum librorum habeas, quos hic tandem requiris? Bona autem corporis huic sunt, quod posterius posui, similiora..
    Bild © Lorem Lipsum
    """
    var body: some View {
        ZStack(alignment: .bottom) {
            Color.red
                .edgesIgnoringSafeArea(.all)
            Text(description)
                .foregroundColor(.white)
                .font(.headline)
                // 强制撑满父容器宽度，对齐方式可按需调整为center/ trailing
                .frame(maxWidth: .infinity, alignment: .leading)
                // 若需要文本和屏幕边缘留间距就保留这行，不需要直接删掉即可
                .padding(.horizontal, 16)
                .background(Color.black)
                // 背景忽略左右安全区，实现撑满屏幕两侧
                .edgesIgnoringSafeArea(.horizontal)
        }
    }
}

其他问题说明 #

1. 之前用GeometryReader出现对齐错误，是因为GeometryReader本身会撑满父视图，内部内容默认顶部对齐，要保持底部对齐可以修改为：

var body: some View {
    ZStack(alignment: .bottom) {
        Color.red
            .edgesIgnoringSafeArea(.all)
        GeometryReader { geometry in
            VStack {
                Spacer() // 加空白占位把文本顶到底部
                Text(description)
                    .foregroundColor(.white)
                    .font(.headline)
                    .frame(maxWidth: .infinity)
                    .background(Color.black)
                    .edgesIgnoringSafeArea(.horizontal)
            }
        }
    }
}

该方案可以实现效果但冗余，优先推荐第一种不需要GeometryReader的方案。
2. 预览和模拟器效果不一致的问题，给Text加上maxWidth: .infinity后，强制填充父容器宽度，即可抹平两边的计算差异。

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