iOS 16下SwiftUI List进入EditMode时出现异常蓝色边框问题
问题确认与解决方案
这个问题确实有不少SwiftUI开发者遇到过,属于iPadOS 16.x(尤其是16.2版本)在特定场景下的系统UI Bug,触发条件正好是你描述的:双栏布局的NavigationView + .insetGrouped列表样式 + 自定义行背景 + 外接键盘触发编辑选择。
以下是几个经过验证的可行解决方案:
方案1:改用NavigationStack替代NavigationView
iOS 16及以上推荐使用NavigationStack替代旧的NavigationView,新API的布局逻辑更适配iPadOS的双栏场景,能规避不少兼容性问题。修改后的代码如下:
struct ContentView: View { let myStrings = ["string1", "string2", "string3"] @State var selection = Set<String>() var body: some View { NavigationStack { List(selection: $selection) { ForEach(myStrings, id: \.self) { myString in Text(myString) .listRowBackground(Color(UIColor.secondarySystemGroupedBackground)) } } .listStyle(.insetGrouped) .toolbar { EditButton() } } } }
方案2:禁用系统选中样式并自定义选中背景
通过UIKit外观设置隐藏系统默认的选中边框,同时自己实现选中状态的背景样式,完全掌控行的视觉表现:
struct ContentView: View { let myStrings = ["string1", "string2", "string3"] @State var selection = Set<String>() init() { UITableViewCell.appearance().selectionStyle = .none } var body: some View { NavigationView { List(selection: $selection) { ForEach(myStrings, id: \.self) { myString in Text(myString) .listRowBackground( selection.contains(myString) ? Color.blue.opacity(0.3) : Color(UIColor.secondarySystemGroupedBackground) ) } } .listStyle(.insetGrouped) .toolbar { EditButton() } EmptyView() } } }
方案3:替换双栏布局的副视图或改用NavigationSplitView
原代码中使用EmptyView作为NavigationView的副视图,iPad上的双栏布局计算可能因此出现异常。你可以把EmptyView替换为实际内容视图,或者直接使用iOS 16+的NavigationSplitView(专门的双栏布局API):
struct ContentView: View { let myStrings = ["string1", "string2", "string3"] @State var selection: String? var body: some View { NavigationSplitView { List(myStrings, id: \.self, selection: $selection) { myString in Text(myString) .listRowBackground(Color(UIColor.secondarySystemGroupedBackground)) } .listStyle(.insetGrouped) .toolbar { EditButton() } } detail: { Text(selection ?? "请选择一项") } } }
补充说明
以上方案均为临时绕开Bug的办法,你判断这是系统Bug的结论是正确的。建议你通过Apple的Feedback Assistant提交反馈,附上复现代码、设备型号、系统版本等信息,帮助官方修复这个问题。
内容的提问来源于stack exchange,提问作者Albin
相关产品推荐
相关产品推荐

