SwiftUI 2个问题但很简单，关于searchBar和list的backgroundImage

Posted 2023-03-13

【中文标题】SwiftUI 2个问题但很简单，关于searchBar和list的backgroundImage

【英文标题】：SwiftUI 2 questions but very simple, about searchBar and the backgroundImage for List

【发布时间】：2019-11-30 17:19:23

【问题描述】：

SwiftUI 很简单的 2 个问题

1、如何让searchBar置顶，这样在使用向下滚动时仍然可以看到自己的searchBar

2，我正在使用 List 并使用 TabView，我希望 List 或 VStack 也许（或持有 List 的东西）有一个背景图像（我的 Assets.xcassets 中已经有一个 png ）。我试过ZStack 或.background(Image("..."))，但都没有奏效。

这是图片，我希望背景是蓝绿色的 png 图片。

这是 TabView 的其中一个视图的代码：

 struct Discover: View 
    @State private var keywords: String = ""
    var names = ["Yu Song", "ZhangYuan", "Kotoyama"]
    var body: some View 
        ZStack 
            List 
                HStack 
                    SearchBar(text: $keywords)
                    Image(systemName: "person")
                    Image(systemName: "bell")
                
                ForEach(self.names.filter 
                    self.keywords.isEmpty ? true : $0.localizedCaseInsensitiveContains(self.keywords)
                , id: \.self)  name in
                    Text(name)
                
            .background(Image("bg_global"))
        .edgesIgnoringSafeArea(.all)
    

这里是您说服的预览：

请注意，我已经在 List 和 VSrack 中添加了 .background(Image("bg_global"))，但图像从未显示。

非常感谢。

【参考方案1】：

要使背景可见，需要使List 及其内容透明。例如可以在init 中完成，

init() 
    UITableView.appearance().backgroundColor = .clear
    UITableViewCell.appearance().backgroundColor = .clear

【参考方案2】：

使用VStack 而不是ZStack 使SearchBar 保持在顶部。并确保SearchBar 不是List 视图的一部分。

struct ContentView: View 
    init() 
        UITableView.appearance().backgroundColor = .clear
        UITableViewCell.appearance().backgroundColor = .clear
    

    @State private var keywords: String = ""
    var names = ["Yu Song", "ZhangYuan", "Kotoyama"]
    var body: some View 
        VStack
            // Your Search Bar View
            HStack
                Spacer()
                Text("Search")
                Spacer()
            .padding().background(Color.red)

            List 
                ForEach(self.names.filter 
                    self.keywords.isEmpty ? true : $0.localizedCaseInsensitiveContains(self.keywords)
                , id: \.self)  name in
                    Text(name)
                
            
        .offset(x: 0, y: 45).background(Color.yellow).edgesIgnoringSafeArea(.all)
    

由于您还想在安全区域中显示背景，因此您需要使用offset 下推视图。