SwiftUI多机型UI适配异常及视图间距问题求助

问题根源 #

你现在的核心问题是用了硬编码的offset(x:xxx, y:xxx)——不同iPhone机型屏幕尺寸、分辨率不一样，固定坐标必然导致错位。SwiftUI的自动适配靠的是布局容器（HStack/VStack/ZStack）、相对位置（padding/Spacer/alignment）实现，绝非硬写坐标。

另外，多余的嵌套容器、List默认样式会导致不必要的间距。

1. 修复机型适配错位问题 #

重构CustomerCardPoints，去掉所有硬编码offset，用相对布局实现：

struct CustomerCardPoints: View {
    var body: some View {
        ZStack(alignment: .trailing) {
            // 背景图：靠右侧，用padding控制相对位置
            Image("Slice")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(maxWidth: 180, maxHeight: 60)
                .padding(.trailing, 16)
                .padding(.top, -20)
            
            // 数字+星星：放在背景图对应位置，用spacing控制元素间距
            HStack(spacing: 4) {
                Image("favoriten")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(height: 25) // 只设高度，宽度按比例自适应
                Text("22")
                    .font(.system(size: 19))
                    .fontWeight(.bold)
                    .foregroundColor(.white)
            }
            .padding(.trailing, 32)
            .padding(.top, -20)
        }
        .frame(maxWidth: .infinity) // 占满宽度，保证全机型对齐
    }
}

2. 消除CustomerCardPoints与List的间距 #

调整主视图布局，去掉多余容器、修正List默认样式：

var body: some View {
    VStack(spacing: 0) {
        shopModel.logo
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(maxWidth: 200, maxHeight: 100)
            .padding([.top, .leading, .trailing])
        
        Text(shopModel.name)
            .fontWeight(.bold)
            .padding()
        
        CustomerCardPoints()
            .padding(.bottom, 0) // 移除视图底部多余间距
        
        List {
            // 你的List内容
        }
        .listStyle(.plain) // 消除List默认顶部间距
        .padding(.top, -8) // 若仍有间距，可微调此值
    }
}

关键注意事项 #

• 永远避免硬编码offset，用padding、Spacer、容器alignment实现相对布局
• 减少不必要的嵌套容器（比如原代码里CustomerCardPoints内部多余的VStack），额外容器会带来默认间距
• SwiftUI的List默认带样式间距，通过listStyle可快速调整

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