SwiftUI以编程方式选择列表项

时间:2020-04-05 22:27:45

标签: ios xcode swiftui

我有一个带有基本列表/详细信息结构的SwiftUI应用程序。从创建新项目 模态表。当我创建一个新项目并将其保存时,我希望该列表项成为 已选择。照原样,如果添加前未选择任何项目,则添加后未选择任何项目 一个添加。如果在添加之前选择了一个项目,则在添加之后选择相同的项目 添加。

我将包含ContentView的代码,但这实际上是最简单的示例 列表/详细信息。

struct ContentView: View {

    @ObservedObject var resortStore = ResortStore()
    @State private var addNewResort = false
    @State private var coverDeletedDetail = false

    @Environment(\.presentationMode) var presentationMode

    var body: some View {

        List {
            ForEach(resortStore.resorts) { resort in
                NavigationLink(destination: ResortView(resort: resort)) {

                    HStack(spacing: 20) {
                        Image("FlatheadLake1")
                        //bunch of modifiers

                        VStack(alignment: .leading, spacing: 10) {
                        //the cell contents
                        }
                    }
                }
            }
            .onDelete { indexSet in
                self.removeItems(at: [indexSet.first!])
                self.coverDeletedDetail.toggle()
            }

            if UIDevice.current.userInterfaceIdiom == .pad {
                NavigationLink(destination: WelcomeView(), isActive: self.$coverDeletedDetail) {
                    Text("")
                }
            }
        }//list
        .onAppear(perform: self.selectARow)
        .navigationBarTitle("Resorts")
        .navigationBarItems(leading:
        //buttons

    }//body

    func removeItems(at offsets: IndexSet) {
        resortStore.resorts.remove(atOffsets: offsets)
    }

    func selectARow() {
    //nothing that I have tried works here
        print("selectARow")
    }
}//struct

再次-添加项目模式非常基础:

struct AddNewResort: View {
//bunch of properties

    var body: some View {
        VStack {
            Text("Add a Resort")
            VStack {
                TextField("Enter a name", text: $resortName)
                //the rest of the fields
            }
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding(EdgeInsets(top: 20, leading: 30, bottom: 20, trailing: 30))

            Button(action: {
                let newResort = Resort(id: UUID(), name: self.resortName, country: self.resortCountry, description: self.resortDescription, imageCredit: "Credit", price: Int(self.resortPriceString) ?? 0, size: Int(self.resortSizeString) ?? 0, snowDepth: 20, elevation: 3000, runs: 40, facilities: ["bar", "garage"])
                self.resortStore.resorts.append(newResort)
                self.presentationMode.wrappedValue.dismiss()
            }) {
                Text("Save Trip")
            }
            .padding(.trailing, 20)

        }
    }
}

显示问题-带有选择的列表:

enter image description here

在创建新项目后显示先前选择的列表:

enter image description here

任何指导将不胜感激。 Xcode 11.4

1 个答案:

答案 0 :(得分:2)

我试图尽可能地重新构造您的代码,以便其构建。这就是我最后的想法。我们有一个度假胜地列表,当一个新的度假胜地保存在AddNewResort工作表中时,如果我们当前处于拆分视图(horizo​​ntalSizeClass是常规视图)中,我们将选择新的度假胜地,否则就关闭该工作表。

import SwiftUI

class ResortStore: ObservableObject {
    @Published var resorts = [Resort(id: UUID(), name: "Resort 1")]
}

struct ContentView: View {
    @ObservedObject var resortStore = ResortStore()
    @State private var addingNewResort = false

    @State var selectedResortId: UUID? = nil

    var navigationLink: NavigationLink<EmptyView, ResortView>? {
        guard let selectedResortId = selectedResortId,
            let selectedResort = resortStore.resorts.first(where: {$0.id == selectedResortId}) else {
                return nil
        }

        return NavigationLink(
            destination: ResortView(resort: selectedResort),
            tag:  selectedResortId,
            selection: $selectedResortId
        ) {
            EmptyView()
        }
    }

    var body: some View {

        NavigationView {
            ZStack {
                navigationLink
                List {
                    ForEach(resortStore.resorts, id: \.self.id) { resort in
                        Button(action: {
                            self.selectedResortId = resort.id
                        }) {
                            Text(resort.name)
                        }
                        .listRowBackground(self.selectedResortId == resort.id ? Color.gray : Color(UIColor.systemBackground))
                    }

                }
            }
            .navigationBarTitle("Resorts")
            .navigationBarItems(trailing: Button("Add Resort") {
                self.addingNewResort = true
            })
                .sheet(isPresented: $addingNewResort) {
                    AddNewResort(selectedResortId: self.$selectedResortId)
                        .environmentObject(self.resortStore)
            }

            WelcomeView()
        }

    }

}

struct ResortView: View {
    let resort: Resort

    var body: some View {
        Text("Resort View for resort name: \(resort.name).")
    }
}


struct AddNewResort: View {
//bunch of properties

    @Binding var selectedResortId: UUID?

    @State var resortName = ""

    @Environment(\.presentationMode) var presentationMode
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    @EnvironmentObject var resortStore: ResortStore

    var body: some View {
        VStack {
            Text("Add a Resort")
            VStack {
                TextField("Enter a name", text: $resortName)
                //the rest of the fields
            }
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding(EdgeInsets(top: 20, leading: 30, bottom: 20, trailing: 30))

            Button(action: {
                let newResort = Resort(id: UUID(), name: self.resortName)
                self.resortStore.resorts.append(newResort)
                self.presentationMode.wrappedValue.dismiss()

                if self.horizontalSizeClass == .regular {
                    self.selectedResortId = newResort.id
                }

            }) {
                Text("Save Trip")
            }
            .padding(.trailing, 20)

        }
    }
}

struct WelcomeView: View {
    var body: some View {
        Text("Welcome View")
    }
}

struct Resort {
    var id: UUID
    var name: String
}
  1. 我们需要跟踪selectedResortId
  2. 我们创建了一个不可见的NavigationLink,它将以编程方式导航到所选的度假胜地
  3. 我们将列表行设为按钮,以便用户可以通过点击该行来选择度假胜地

我开始在SwiftUI列表视图中撰写有关导航的一系列文章,在实现程序化导航时有很多要考虑的方面。 这是我建议的描述此解决方案的解决方案:SwiftUI Navigation in List View: Programmatic Navigation。此解决方案目前在iOS 13.4.1上有效。 SwiftUI瞬息万变,因此我们必须继续检查。

这是我的上一篇文章,解释了为什么在SwiftUI Navigation in List View: Exploring Available Options

上,将导航链接添加到每个List行的更简单的解决方案会出现一些问题

如果您有任何疑问,请告诉我,我们将竭诚为您服务。