时间戳

首页 > 解决方案 > SwiftUI：有人可以帮助提供包含导航视图、顶部搜索栏、项目列表和导航链接的代码吗

swiftui - SwiftUI：有人可以帮助提供包含导航视图、顶部搜索栏、项目列表和导航链接的代码吗

问题描述

我是编程新手。我一直无法在网上找到这样的代码，其中导航视图顶部有一个搜索栏，下面有一个带有导航标题的可滚动项目列表，以及每个项目的导航链接。预先感谢您的帮助。

Country.swift 文件

import Foundation
 
struct Country: Identifiable {
    let id = UUID()
    let flag: String
    let name: String
    let capital: String
}

let countryList: [Country] = [
    Country(
        flag: "",
        name: "Philippines",
        capital: "Manila"),
    Country(
        flag: "",
        name: "France",
        capital: "Paris"),
    Country(
        flag: "",
        name: "Ireland",
        capital: "Dublin"),
    Country(
        flag: "",
        name: "Mexico",
        capital: "Mexico City"),
    Country(
        flag: "",
        name: "Canada",
        capital: "Ottawa"),
    Country(
        flag: "",
        name: "United States",
        capital: "Whashington D.C"),
    Country(
        flag: "",
        name: "Australia",
        capital: "Canberra"),
    Country(
        flag: "",
        name: "China",
        capital: "Beijing"),
    Country(
        flag: "",
        name: "United Kingdom",
        capital: "London")
]

详情 查看文件

import SwiftUI
 
struct DetailsView: View {
    let countryItem: Country
     
    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                ZStack {
                    Text(countryItem.flag)
                      .font(.largeTitle)
                      .frame(width: 50, height: 50)
                      .padding(.trailing, 5)
                }
                Text(" \(countryItem.capital)")
                    .font(.largeTitle)
                    .bold()
                Spacer()
            }
            Spacer()
        }
        .padding()
        .navigationBarTitle(Text(countryItem.name), displayMode: .automatic)
    }
}

内容视图文件

import SwiftUI

struct ContentView: View {

@State private var searchText = ""

var body: some View {
    VStack {
        SearchBar(text: $searchText)
        NavigationView { List(countryList.filter({ searchText.isEmpty ? true : $0.name.contains(searchText) })) { item in
            Text(item.name)
            List(countryList) { countryItem in
                NavigationLink(destination: DetailsView(countryItem: countryItem))
            .navigationBarTitle("Countries")
    }
}
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

标签： swiftui

解决方案

这应该让你开始。最重要的事情可能是在你的观点的根部有一个和 一个：NavigationView List

struct ContentView : View {
    @State private var searchText = ""

    private var countryList = [Country(name:"Argentina"),Country(name:"Bolivia"),Country(name:"Brazil"),Country(name:"Columbia")]
    
    var body: some View {
        NavigationView {
            VStack {
                SearchBar(text: $searchText)
                List(countryList.filter({ searchText.isEmpty ? true : $0.name.contains(searchText) })) { countryItem in
                    NavigationLink(destination: DetailsView(countryItem: countryItem)) {
                        HStack {
                            ZStack {
                                Text(countryItem.flag)
                                    .font(.largeTitle)
                                    .frame(width: 50, height: 50)
                            }
                            Text(countryItem.name)
                                .font(.headline)
                        }.padding(7)
                    }
                    .navigationBarTitle("Countries")
                }
            }
        }
    }
}

我无权访问您的SearchBar代码，因此我认为它已经在执行您想要的操作。如果您正在为 iOS 15 编写，我建议您查看searchable：https ://www.appcoda.com/swiftui-searchable/

另外，我没有你的countryList代码，所以我用我自己的代码替换了它——显然，你可以删除它。

推荐阅读