Блог

У меня есть простой список, который повторяет некоторые значения из моей базы данных:

 List {
    TextField("Search", text: $textFieldSearch)
        .padding(7)
        .background(Color(.systemGray6))
        .cornerRadius(8)
    
    ForEach((bookViewModel.books).filter({ "($0)".contains(textFieldSearch) || textFieldSearch.isEmpty })) { book in
        NavigationLink(destination: ChapterView(book: book), label: {
            
            HStack {
                Text("(book.name)")
                
                
            }
            .padding()
        })
    }
}
.onAppear {
    bookViewModel.fetchBooks()
}
 

Что меня беспокоит, так это то, что граница находится чуть выше TextField … я предполагаю, что это потому, что я поместил ее внутрь List . Однако, если я TextField переместлюсь выше List , он просто съест весь экран и вообще не покажет ForEach часть — также он не «соответствует» тому же стилю. Каков здесь наилучший подход?

iOS 15

Модификатор .listRowSeparator(_:) представления был введен для iOS 15 и выше. Таким образом, вы можете использовать его следующим образом,

 List {
    TextField("Search", text: $textFieldSearch)
        .
        .
        .
        .listRowSeparator(.hidden) // <-- Set it as hidden

    ForEach(list.indices) { int in
       .
       .
       .
    }
}
.listStyle(PlainListStyle())
 

Результат:

iOS 14

Для iOS 14 вы можете использовать LazyVStack встроенный в a ScrollView . Как следует из названия, a LazyVStack является ленивым, что означает, что он будет загружать элементы только при необходимости, как и a List . Так что вы можете использовать его в качестве альтернативы. Я сделал демо-версию со следующим кодом,

 struct ContentView: View {

    @State var textFieldSearch: String = ""

    var list = [
        "hello",
        "there",
        "general",
        "kenobi"
    ]

    var body: some View {
        ScrollView {
            LazyVStack {
                TextField("Search", text: $textFieldSearch)
                    .padding(7)
                    .background(Color(.systemGray6))
                    .cornerRadius(8)
                ForEach(list.indices) { index in
                    NavigationLink(destination: Text(list[index]), label: {
                        VStack {
                            index > 0 ? Divider() : nil // Showing the divider for all items after the 0th index
                            HStack {
                                Text("(list[index])").foregroundColor(.black)
                                Spacer() // Spacer to right align the Text
                            }
                        }
                    })
                }
            }
            .padding(.horizontal) // Setting horizontal padding
        }
    }
}
 

Результатом этого является :