SwiftUI：如何让带NavigationLink的图片在多设备上定位一致

问题根源 #

你用position修饰符给按钮定位，本质是绝对坐标定位，它依赖固定的x/y值，而不同设备的屏幕尺寸、分辨率差异很大，导致按钮在不同设备上的相对位置完全不一致——这是绝对定位的天然缺陷，SwiftUI的弹性布局系统本来就是为了规避这种问题设计的。

解决方案 #

根据常见的布局需求（比如固定在页面相对位置或导航栏），用以下两种弹性布局方案替代绝对定位：

方案1：用容器+Spacer实现页面内相对定位

如果按钮属于页面内容的一部分，而非导航栏元素，用VStack+HStack配合Spacer分配空间，让按钮自动适配所有设备：

NavigationStack {
    VStack {
        // 顶部区域：将按钮推至右上角
        HStack {
            Spacer() // 占据左侧剩余空间，把按钮挤到右侧
            NavigationLink("跳转设置") {
                SettingsView() // 你的目标页面
            }
            .padding(.trailing, 16) // 给右侧留固定边距，避免贴边
        }
        .padding(.top, 20) // 顶部留固定边距
        
        // 页面主体内容
        Spacer() // 把主体内容向下推，确保按钮在顶部区域
        Text("单位转换首页")
            .font(.title)
        Spacer()
    }
}

方案2：用Toolbar集成到导航栏（符合iOS设计规范）

如果按钮是导航操作类（比如跳转设置），直接把它放到导航栏的固定位置，系统会自动适配所有设备：

NavigationStack {
    // 首页主体内容
    Text("单位转换首页")
        .font(.title)
    
    // 导航栏右侧按钮
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            NavigationLink("跳转设置") {
                SettingsView()
            }
        }
    }
}

关键逻辑 #

SwiftUI的布局核心是基于空间分配的弹性系统：

• Spacer会自动占据容器内的剩余空间，把其他元素挤到指定方向
• 容器（VStack/HStack/ZStack）会根据父视图的尺寸自动调整子视图位置
• 用固定的padding替代绝对坐标，保证元素和边缘的相对距离一致

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