SwiftUI：当列表太长时，SearchBar 移出边界

Question

我在我的应用中的自定义标题内实现了一个搜索栏。在搜索栏下方，我添加了一个虚假的List，其中包含 100 行，旨在显示搜索结果。

我面临的问题是：

• 出现列表时，搜索栏会超出范围。当我添加 400 像素的顶部填充时，搜索栏会回到边界。 Link to video 1

接下来的两个有点跑题了。

• 当键盘在屏幕上时，列表的最后几行不可见。如何解决？ Link to video 2
• 如何为List 设置背景颜色？我一直无法弄清楚。 （listRowBackground 修饰符没有按照我阅读的一篇文章的建议工作。）

我正在使用 Xcode 12.0 beta 6。

let screen = UIScreen.main.bounds

struct SearchBarView: View {
    @Binding var search: String
    @Binding var searchSelected: Bool
    
    var body: some View {
        VStack {
            CustomTextField(text: $search, isFirstResponder: true)
                .modifier(SearchBarTextFieldStyle(search: $search))

            if !search.isEmpty {
                  List(1..<100) { i in
                      Text("Hello \(i)")
                  }.frame(width: screen.width)
            }
        }
        .frame(width: screen.width, height: !search.isEmpty ? screen.height : 40)
        .background(Color("ThemeColor"))
    }
}

Answer 1

当列表出现时，搜索栏会移出边界。当我添加 400px 的顶部填充，搜索栏回到边界。

问题是所有东西都放在一个VStack 中。因此，当搜索不再为空时，TextField 与List 共享提供给它的空间。

将TextField 放在一个单独的堆栈中，如下所示：

struct ContentView: View {
    
    @State var search: String = ""
    
    var body: some View {
        // Everything wrapped in one Stack
        VStack() {
            
            // Separate Stack for the TextField 
            HStack() {
                TextField("Title", text: self.$search)
            }.padding()
            
            // One Stack for the content
            VStack {
                if !search.isEmpty {
                      List(1..<100) { i in
                          Text("Hello \(i)")
                      }.frame(width: UIScreen.main.bounds.width)
                }
            }.frame(width: UIScreen.main.bounds.width)
                .background(Color.red)
            
            Spacer() // So that the TextField is also on top when no content is displayed 
        }
    }
}

当键盘在屏幕上时，列表的最后几行不是 可见的。如何解决？

在列表底部添加一个填充，但我建议实施此解决方案：Move TextField up when the keyboard has appeared in SwiftUI

例如带填充：

import SwiftUI

struct ContentView: View {
    
    @State var search: String = ""
    
    var body: some View {
        VStack() {
            
            HStack() {
                TextField("Title", text: self.$search)
            }.padding()
            
            VStack {
                if !search.isEmpty {
                    List(1..<100) { i in
                        Text("Hello \(i)")
                    }.frame(width: UIScreen.main.bounds.width)
                        .padding(.bottom, 300) // here padding
                }
            }.frame(width: UIScreen.main.bounds.width)
                
            
            Spacer()
        }
    }
}

如何为列表设置背景颜色？我没能 弄清楚。 （listRowBackground 修饰符不能作为 我读过的一篇文章建议的。）

这里也已经回答了这个问题： SwiftUI List color background