如何让SwiftUI的List重新显示时自动获取键盘焦点（无需按Tab）

我有一个支持行选择的SwiftUI List，列表项点击后会跳转到另一视图（此时List会从界面中消失）。退出详情视图返回List时，之前选中的行仍处于选中状态，但List并未自动获得键盘焦点，导致必须按Tab键才能恢复对选中行的焦点，进而通过方向键上下切换选中项。

最小可复现代码 #

struct RootView: View {
    @State var items: [Int] = [0,1,2]
    @State var selected: Int?
    @State var detailView: Bool = false
    
    var body: some View {
        VStack {
            if detailView {
                Button(action: {
                    detailView = false
                }, label: {
                    Text("Exit")
                })
            }
            else {
                List(items, id:\.self, selection: $selected) { index in
                    Text("\(index)")
                        .tag(index)
                }
                Button(action: {
                    detailView = true
                }, label: {
                    Text("detail view")
                })
            }
        }.frame(width: 300, height: 420, alignment: .top)
        .onAppear {
            selected = 0
        }
    }
}

解决方案 #

通过FocusState绑定List的焦点状态，配合视图切换监听，在返回List时自动设置焦点：

struct RootView: View {
    @State var items: [Int] = [0,1,2]
    @State var selected: Int?
    @State var detailView: Bool = false
    @FocusState private var listIsFocused: Bool // 跟踪List的焦点状态
    
    var body: some View {
        VStack {
            if detailView {
                Button(action: {
                    detailView = false
                }, label: {
                    Text("Exit")
                })
            } else {
                List(items, id:\.self, selection: $selected) { index in
                    Text("\(index)")
                        .tag(index)
                }
                .focused($listIsFocused) // 将焦点状态与List绑定
                Button(action: {
                    detailView = true
                }, label: {
                    Text("detail view")
                })
            }
        }
        .frame(width: 300, height: 420, alignment: .top)
        .onAppear {
            selected = 0
        }
        .onChange(of: detailView) { newValue in
            // 从详情页返回时，延迟设置焦点确保List已渲染完成
            if !newValue {
                DispatchQueue.main.async {
                    listIsFocused = true
                }
            }
        }
    }
}

原理说明 #

1. 新增@FocusState变量listIsFocused，用于控制List的焦点状态
2. 给List添加.focused($listIsFocused)修饰符，建立焦点状态与List的绑定关系
3. 通过onChange(of: detailView)监听视图切换，当detailView变为false（即返回List界面）时，使用DispatchQueue.main.async延迟设置焦点，确保List已经完成渲染并显示在界面上，此时设置焦点才能生效，直接用方向键即可操作选中行

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