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
相关产品推荐
相关产品推荐

