SwiftUI表单中TextField不显示问题求助

问题场景 #

开发家具销售筛选列表时，页面其余元素正常渲染，但Form中的两个价格筛选TextField完全不显示。尝试设置亮黄色前景色、注释ForEach代码均无法解决问题。

原始代码 #

import SwiftUI

struct FilterView: View {
    @Environment(\.themeColor) var themeColor: Color

    @Binding var presentSideMenu: Bool
    @Binding var showResearch: Bool
    
    @State var searchText: String = ""
    @State var searchprixMin: Int = 0
    @State var searchprixMax: Int = 0
    @State private var selectedProduct: Produit?
    @State private var productViewShow = false
    
//  @State private var showingFilter = false

    let produits: [Produit] = [
        Produit(id: "1", name: "Billy Blanc Bibliothèque", image: ["BillyBlancBibliothèque", "BillyBlancBibliothèque2", "BillyBlancBibliothèque3"], description: "Bibliothèque Blanche", price: 80, stock: true),
        Produit(id: "2", name: "Billy Bibliothèque Corner", image: ["BillyCorner", "BillyCorner2", "BillyCorner3"], description: "Bibliothèque Blanche d'angle", price: 120, stock: true),
        Produit(id: "3", name: "Friheten Convertible Sofa Skiftebo DarkGrey", image: ["FrihetenConvertibleSofaSkifteboDarkGrey", "FrihetenConvertibleSofaSkifteboDarkGrey2", "FrihetenConvertibleSofaSkifteboDarkGrey3"], description: "Canapé d'angle Gris foncé", price: 2000, stock: true),
    ]
    
    var body: some View {
        NavigationStack {
            ScrollView {
                Form {
                    TextField("Prix min €", value: $searchprixMin, format: .number)
                        .keyboardType(.numberPad)
                        .frame(width: 100, height: 50)
                    TextField("Prix max €", value: $searchprixMax, format: .number)
                        .keyboardType(.numberPad)
                        .frame(width: 100, height: 50)
                }
                ForEach(filteredProduct) { produit in
                    Button(action: {
                        self.selectedProduct = produit
                        productViewShow = true
                    }) {
                        ProduitCard(produit: produit, pictureHeight: 300)
                            .padding([.leading, .top, .trailing])
                    } //: Button
                }
                .navigationTitle("Search")
                .searchable(text: $searchText)
            }
            .navigationDestination(isPresented: $productViewShow) {
                if selectedProduct != nil {
                    ProductView(presentSideMenu: $presentSideMenu, showResearch: $showResearch, produit: selectedProduct!)
                } else {
                    ParamsView(presentSideMenu: $presentSideMenu, showResearch: $showResearch)
                }
            }
            .background(themeColor)
        }
    }
    
    var filteredProduct: [Produit] {
        return produits.filter { produit in
            let isMatchingText = searchText.isEmpty || produit.name.lowercased().contains(searchText.lowercased())
            let isMatchingPriceRange = (searchprixMin == 0 || produit.price >= searchprixMin) && (searchprixMax == 0 || produit.price <= searchprixMax)
            
            return isMatchingText && isMatchingPriceRange
        }
    }
}

问题原因 #

1. 布局修饰位置错误：navigationTitle和searchable被修饰在ForEach上，而非容器视图（如ScrollView或NavigationStack），导致Form布局逻辑异常。
2. 固定Frame冲突：给TextField设置frame(width:100, height:50)与Form的自适应布局逻辑冲突，TextField被挤压或隐藏。
3. 颜色叠加问题：全局themeColor背景可能与Form默认背景/TextField前景色一致，导致视觉上不可见。

修复方案 #

import SwiftUI

struct FilterView: View {
    @Environment(\.themeColor) var themeColor: Color

    @Binding var presentSideMenu: Bool
    @Binding var showResearch: Bool
    
    @State var searchText: String = ""
    @State var searchprixMin: Int = 0
    @State var searchprixMax: Int = 0
    @State private var selectedProduct: Produit?
    @State private var productViewShow = false
    
    let produits: [Produit] = [
        Produit(id: "1", name: "Billy Blanc Bibliothèque", image: ["BillyBlancBibliothèque", "BillyBlancBibliothèque2", "BillyBlancBibliothèque3"], description: "Bibliothèque Blanche", price: 80, stock: true),
        Produit(id: "2", name: "Billy Bibliothèque Corner", image: ["BillyCorner", "BillyCorner2", "BillyCorner3"], description: "Bibliothèque Blanche d'angle", price: 120, stock: true),
        Produit(id: "3", name: "Friheten Convertible Sofa Skiftebo DarkGrey", image: ["FrihetenConvertibleSofaSkifteboDarkGrey", "FrihetenConvertibleSofaSkifteboDarkGrey2", "FrihetenConvertibleSofaSkifteboDarkGrey3"], description: "Canapé d'angle Gris foncé", price: 2000, stock: true),
    ]
    
    var body: some View {
        NavigationStack {
            ScrollView {
                // 用Section包裹TextField，适配Form布局
                Form {
                    Section("价格筛选") {
                        TextField("Prix min €", value: $searchprixMin, format: .number)
                            .keyboardType(.numberPad)
                            .foregroundColor(.black) // 显式设置前景色，避免与背景融合
                            .background(.white) // 显式设置背景色
                        
                        TextField("Prix max €", value: $searchprixMax, format: .number)
                            .keyboardType(.numberPad)
                            .foregroundColor(.black)
                            .background(.white)
                    }
                }
                .scrollContentBackground(.hidden) // 隐藏Form默认背景，避免与全局背景冲突
                
                ForEach(filteredProduct) { produit in
                    Button(action: {
                        selectedProduct = produit
                        productViewShow = true
                    }) {
                        ProduitCard(produit: produit, pictureHeight: 300)
                            .padding([.leading, .top, .trailing])
                    }
                }
            }
            // 将导航相关修饰移到ScrollView上
            .navigationTitle("Search")
            .searchable(text: $searchText)
            .navigationDestination(isPresented: $productViewShow) {
                selectedProduct != nil ?
                    ProductView(presentSideMenu: $presentSideMenu, showResearch: $showResearch, produit: selectedProduct!) :
                    ParamsView(presentSideMenu: $presentSideMenu, showResearch: $showResearch)
            }
            .background(themeColor)
        }
    }
    
    var filteredProduct: [Produit] {
        produits.filter { produit in
            let isMatchingText = searchText.isEmpty || produit.name.lowercased().contains(searchText.lowercased())
            let isMatchingPriceRange = (searchprixMin == 0 || produit.price >= searchprixMin) && (searchprixMax == 0 || produit.price <= searchprixMax)
            
            return isMatchingText && isMatchingPriceRange
        }
    }
}

关键修改点 #

• 把navigationTitle和searchable移到ScrollView上，确保导航组件正常生效且不干扰Form布局。
• 用Section包裹TextField，让Form正确管理内部视图的布局空间。
• 显式设置TextField的前景色和背景色，避免与全局themeColor视觉冲突。
• 隐藏Form默认背景，消除多层背景叠加导致的显示问题。

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