SwiftUI中如何为全屏幕尺寸适配文本位置？

问题描述 #

我正在开发一款测量类App，希望将测量值放置在如图所示的对应位置。该截图来自iPhone 14 Pro Max，但在iPhone 14 Pro上运行时显示效果极差，附上当前代码寻求解决方法。

当前代码 #

ZStack {
    GeometryReader { geo in
        Image("test3")
            .resizable()
            .scaledToFit()
            .frame(maxWidth: geo.size.width * 1)
            .padding()
        
        HStack(spacing: 40) {
            
            Text(Joint.formatted())
                .position(x: geo.size.width - 383, y: geo.size.height - 350)
            
            Text(W1.formatted())
                .position(x: geo.size.width - 405, y: geo.size.height - 350)
            
            Text(L1.formatted())
                .position(x: geo.size.width - 382, y: geo.size.height - 350)
            
            Text(W2.formatted())
                .position(x: geo.size.width - 365, y: geo.size.height - 350)
            
            Text(L2.formatted())
                .position(x: geo.size.width - 350, y: geo.size.height - 350)
            
        }
    }
}

问题根源 #

你用了固定像素值的position来定位文本，iPhone 14 Pro Max（6.7英寸）和iPhone 14 Pro（6.1英寸）的屏幕尺寸差异很大，固定坐标会导致文本在小屏机型上完全偏离目标位置。

解决方案 #

核心思路是让文本跟随背景图的布局变化，用相对位置代替绝对像素值。以下是两种可行的实现方式：

方式1：基于图片尺寸的相对比例定位

把文本放在图片的overlay里，通过图片的尺寸比例计算位置，确保在任何屏幕上都和图片保持对应关系：

ZStack {
    Image("test3")
        .resizable()
        .scaledToFit()
        .padding()
        .overlay(
            GeometryReader { imgGeo in
                // 用图片宽度的比例设置间距，适配不同尺寸
                HStack(spacing: imgGeo.size.width * 0.04) {
                    Text(Joint.formatted())
                        .position(x: imgGeo.size.width * 0.18, y: imgGeo.size.height * 0.82)
                    Text(W1.formatted())
                        .position(x: imgGeo.size.width * 0.27, y: imgGeo.size.height * 0.82)
                    Text(L1.formatted())
                        .position(x: imgGeo.size.width * 0.36, y: imgGeo.size.height * 0.82)
                    Text(W2.formatted())
                        .position(x: imgGeo.size.width * 0.45, y: imgGeo.size.height * 0.82)
                    Text(L2.formatted())
                        .position(x: imgGeo.size.width * 0.54, y: imgGeo.size.height * 0.82)
                }
            }
        )
}

方式2：用对齐和间距实现相对布局

如果文本是集中在图片右下角区域，直接用HStack结合Spacer和固定比例的边距来定位：

ZStack {
    Image("test3")
        .resizable()
        .scaledToFit()
        .padding()
        .overlay(
            GeometryReader { imgGeo in
                HStack(spacing: 20) {
                    Spacer()
                    Text(Joint.formatted())
                    Text(W1.formatted())
                    Text(L1.formatted())
                    Text(W2.formatted())
                    Text(L2.formatted())
                    // 右边留出和图片宽度比例对应的空白
                    Spacer(minLength: imgGeo.size.width * 0.1)
                }
                .padding(.bottom, imgGeo.size.height * 0.1) // 距离图片底部的比例间距
                .frame(maxWidth: .infinity, alignment: .trailing)
            }
        )
}

注意事项 #

• 永远优先用相对比例代替固定像素值，适配所有机型
• 避免直接使用屏幕尺寸（geo.size.width）来定位元素，要绑定到背景图的尺寸上
• 如果需要更精准的位置，可以调整代码中的比例值，直到文本和图片的目标位置完全匹配

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