SwiftUI中如何让搜索结果的.overlay占满窗口宽度？

问题原因 #

当前overlay附加在List组件上，而List默认带有水平内边距，导致覆盖层继承了该边距，无法占满整个窗口宽度。

解决方案 #

将overlay从List的修饰符中移除，放到外层的ZStack中作为同级视图，脱离List的内边距约束；同时确保SearchMediaHintsResultsScreen自身没有额外的水平内边距。

修改后的完整代码 #

var navbody: some View {
    NavigationView {
        ZStack {
            somedarkcolorhere
            List(searchModel.suggestions ?? [], rowContent: { text in
                NavigationLink(destination: MediaSearchResultsView(searchText: text)) {
                    Text(text)
                }
            })
            .searchable(text: $searchModel.searchText
                        // 取消注释可让搜索框始终显示
                        // , placement: .navigationBarDrawer(displayMode: .always)
            )
            .navigationTitle("v1_what_are_we_searching_for".localized)
            
            // 将Overlay移到ZStack中，作为同级视图
            SearchMediaHintsResultsScreen(searchModel: searchModel)
        }
        .onChange(of: searchModel.searchText) { _ in
            searchModel.processChangeOfSearchText()
        }
        .preference(key: ErrorPreferenceKey.self, value: observableError)
        .sheet(isPresented: $observableError.showingError) {
            ErrorView(error: observableError)
        }
    }
}

额外调整（若需要） #

如果SearchMediaHintsResultsScreen内部存在水平内边距，需在该视图的实现中添加以下修饰符，确保其占满宽度：

struct SearchMediaHintsResultsScreen: View {
    // 原有属性和实现
    var body: some View {
        // 原有视图内容
        .frame(maxWidth: .infinity) // 强制占满父容器宽度
        .padding(.horizontal, 0) // 移除默认水平内边距（若有）
    }
}

原理说明 #

ZStack中的子视图默认会填充父容器的可用空间，将覆盖层放到ZStack中后，不再受List的内边距限制，从而实现占满整个窗口宽度的效果。

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