Bin some changes to the Xcode and im a bit stuck on how to make a searchable Search bar when its not a basic list. I have one page with the list with identifiers and another page with the code to embed the list.
Hope it is anyone out there with a bit more nolage then me.
Page 1
import SwiftUI
struct Country: Identifiable {
let id = UUID()
let imageName: String
let title: String
let description: String
let viewCount: Int
let uploadDate: String
let url: URL
}
struct CountryList {
static let AllCountries = [
Country(imageName: "flag-of-Sweden",
title: "Sweden",
description: "lorumibsum lorum ibsum sim sum sam",
viewCount: 370222,
uploadDate: "date of post",
url: URL(string: "https://test.com")!),
Country(imageName: "flag-of-Poland",
title: "Poland",
description: "lorumibsum lorum ibsum sim sum sam",
viewCount: 239150,
uploadDate: "date of post",
url: URL(string: "https://test.com")!),
Country(imageName: "flag-of-Russia",
title: "Russia",
description: "lorumibsum lorum ibsum sim sum sam",
viewCount: 162897,
uploadDate: "date of post",
url: URL(string: "https://test.com")!),
Country(imageName: "flag-of-Spain",
title: "Spain",
description: "lorumibsum lorum ibsum sim sum sam",
viewCount: 119115,
uploadDate: "date of post",
url: URL(string: "https://test.com")!),
Country(imageName: "flag-of-Libya",
title: "Libya",
description: "lorumibsum lorum ibsum sim sum sam",
viewCount: 112213,
uploadDate: "date of post",
url: URL(string: "https://test.com")!),
Page 2 This is page 2 where im implementing the list to the app
import SwiftUI
struct CountryListView: View {
var country: [Country] = CountryList.AllCountries
@State private var searchText = ""
var body: some View {
NavigationView {
List(country, id: \.id) { country in
NavigationLink(destination: CountryDetailView(Country: country), label: {
CountryCell(Country: country)
})
}
.navigationTitle("Find your country")
.searchable(text: $searchText)
}
}
struct CountryCell: View {
var Country: Country
var body: some View {
HStack {
Image(Country.imageName)
.resizable()
.scaledToFit()
.frame(height: 70)
.cornerRadius(16)
.padding(.vertical, 4)
VStack(alignment: .leading, spacing: 5) {
Text(Country.title)
.fontWeight(.semibold)
.lineLimit(2)
.minimumScaleFactor(0.5)
Text(Country.uploadDate)
.font(.subheadline)
.foregroundColor(.secondary)
}
}
}
}
var searchResults: [String] {
if searchText.isEmpty {
return Country
} else {
return Country.filter({ $0.contains(searchText)})
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
CountryListView()
}
}
The search bar and its pattern do not change whenever you are using a list. Where you got confused is not understanding that you are returning an array of the type of your data, not just a string. [String] are often used as examples because they are simple, but the confusion comes from the fact that your search text is also a String. Really, you are returning an [Type] where Type is the type of your data. In this case, that is a Country. Therefore your code becomes this:
struct CountryListView: View {
// You should just declare this as @State var, NEVER just var in a struct.
// If you are not planning to mutate this list, declare it with let
// Also, you reused "Country" which caused the compiler to be confused.
// Types should begin with a capital letter and be singular
// Names of singular instances should be lowercased.
// Names of arrays of a type should be lowercased and plural
// You will see I changed the instance you called Country to countries.
@State private var countries = CountryList.allCountries
@State private var searchText = ""
var body: some View {
NavigationView {
// The list uses searchResults which is an [Country]
// Since Country is Identifiable, you do not need the id:\.id in the list.
List(searchResults) { country in
// You didn't provide CountryDetail, so I used CountryCell for both
NavigationLink(destination: CountryCell(country: country), label: {
CountryCell(country: country)
})
}
.navigationTitle("Find your country")
.searchable(text: $searchText)
}
}
var searchResults: [Country] {
if searchText.isEmpty {
return countries
} else {
return countries.filter({ $0.title.lowercased().contains(searchText.lowercased())})
}
}
struct CountryCell: View {
let country: Country
var body: some View {
HStack {
// Since we don't have the flag assets, I just used an SF Symbol
// Please do this sort of substitution before you post.
Image(systemName: country.imageName)
.resizable()
.scaledToFit()
.frame(height: 70)
.cornerRadius(16)
.padding(.vertical, 4)
VStack(alignment: .leading, spacing: 5) {
Text(country.title)
.fontWeight(.semibold)
.lineLimit(2)
.minimumScaleFactor(0.5)
Text(country.uploadDate)
.font(.subheadline)
.foregroundColor(.secondary)
}
}
}
}
}
struct CountryList {
static let allCountries = [
// Substitued SF Font for imageName
Country(imageName: "flag",
title: "Sweden",
description: "lorumibsum lorum ibsum sim sum sam",
viewCount: 370222,
uploadDate: "date of post",
url: URL(string: "https://test.com")!),
...]
}