You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

iOS 18导致SwiftUI Toggle按钮布局异常(Apple已修复)

解决iOS 18中List内Toggle布局偏移问题

在iOS 16/17版本中,NavigationSplitView主列List内的Toggle组件始终固定在右侧,但iOS 18早期beta版本中,Toggle会根据文本长度出现布局混乱(时而左对齐时而右对齐)。该问题已在iOS 18 beta 5及更早版本中修复,若需兼容未更新的beta版本,可通过以下两种方式强制保持Toggle右侧布局:

方法一:自定义HStack布局

通过HStack结合Spacer完全控制布局,确保Toggle始终被推至右侧:

import SwiftUI
struct ContentView: View {
    @State private var on = true
    @State private var visibility: NavigationSplitViewVisibility = .all

    var body: some View {
        NavigationSplitView(columnVisibility: $visibility) {
            List {
                Text(getCurrentiOSVersion())
                HStack {
                    Text("Some long talkative text explaing way more than I should in a toggle")
                    Spacer()
                    Toggle("", isOn: $on)
                }
            }
        } detail: {
        }
        .navigationSplitViewStyle(.balanced)
    }
    
    func getCurrentiOSVersion() -> String {
        let systemVersion = UIDevice.current.systemVersion
        return "iOS Version: \(systemVersion)"
    }
}

#Preview {
    ContentView()
}

方法二:调整Label的布局约束

给Toggle的Label文本设置宽度优先的布局,迫使Toggle自动右对齐,同时保留系统Toggle样式:

import SwiftUI
struct ContentView: View {
    @State private var on = true
    @State private var visibility: NavigationSplitViewVisibility = .all

    var body: some View {
        NavigationSplitView(columnVisibility: $visibility) {
            List {
                Text(getCurrentiOSVersion())
                Toggle(isOn: $on) {
                    Text("Some long talkative text explaing way more than I should in a toggle")
                        .frame(maxWidth: .infinity, alignment: .leading)
                }
                .toggleStyle(SwitchToggleStyle(tint: .accentColor))
            }
        } detail: {
        }
        .navigationSplitViewStyle(.balanced)
    }
    
    func getCurrentiOSVersion() -> String {
        let systemVersion = UIDevice.current.systemVersion
        return "iOS Version: \(systemVersion)"
    }
}

#Preview {
    ContentView()
}

说明

  • 两种方法均能在iOS 18早期beta版本中保持Toggle右侧布局,与iOS 16/17的表现一致。
  • 若使用iOS 18正式版或beta 5及以后版本,系统已修复该布局bug,无需额外处理。

内容的提问来源于stack exchange,提问作者Gerd Castan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.22 11:07:38