Как добавить текст нижнего колонтитула раздела ниже параметров средства выбора SwiftUI?

Question

Я пишу приложение на SwiftUI и использую Picker для представления списка опций, которые может выбрать пользователь.

Я хотел бы добавить текст нижнего колонтитула, чтобы объяснить варианты в списке, когда кто-то нажимает на средство выбора и видит параметры.

Это пример снимка экрана, который я хотел бы выполнить sh, взятый из приложения iOS Settings:

Как мне добиться этого с SwiftUI?

Я определяю нижний колонтитул для раздела, который содержит средство выбора на главном экране («Вот краткое описание настройки. ") и это работает нормально, но подобный код не добавляет нижний колонтитул на экран, который показывает параметры выбора.

Вот мой пример кода:

import SwiftUI

class ViewModel: ObservableObject {

    enum Option: String, Identifiable, CaseIterable, CustomStringConvertible {
        case optionOne
        case optionTwo
        case optionThree

        var id: Option {
            self
        }

        var description: String {
            rawValue.prefix(1).uppercased() + rawValue.dropFirst()
        }
    }

    @Published var selectedOption: Option = .optionOne {
        didSet {
            print("new option selected: \(selectedOption.description)")
        }
    }
}

struct ContentView: View {

    @ObservedObject var viewModel = ViewModel()

    var body: some View {

        NavigationView {
            Form {
                Section(footer: Text("Here is a short description of the setting.")) {
                    Picker(selection: $viewModel.selectedOption,
                           label: Text("Choice")) {
                            Section(footer: Text("This is some additional text to help the user understand the options.")) {
                                ForEach(ViewModel.Option.allCases) { type in
                                    Text(type.description)
                                }
                            }
                    }
                }

            }.navigationBarTitle(Text("Main Screen"))
        }
    }
}

Кроме того, когда этот список загружается, я вижу странный прыжок. Как я могу избежать этого?

Answer 1

Вам может не понадобиться другой двойной нижний колонтитул, может быть, просто заголовок подсказки

  struct ContentView: View {

@ObservedObject var viewModel = ViewModel()

var body: some View {

    NavigationView {
        Form {
            Section(footer: Text("Here is a short description of the setting.")) {
                Picker(selection: $viewModel.selectedOption,
                       label: Text("Choice")) {

                          ForEach(ViewModel.Option.allCases) { type in
                                                                Text(type.description)
                                                           }.navigationBarTitle("hint title here", displayMode: .inline)

                }
            }.navigationBarTitle("Main Screen", displayMode: .inline)

        }.navigationBarTitle(Text("Main Screen"))
    }
}
}

Без выбора вы можете создавать свои собственные списки параметров:

 struct ContentView: View {

                                @ObservedObject var viewModel = ViewModel()

                                var body: some View {

                                    NavigationView {
                                        Form {
                                            Section(footer: Text("Here is a short description of the setting.")) {
                                                NavigationLink(destination: SelectionItemView(selection: $viewModel.selectedOption)) {
                                                    Text("Choice")
                                                }


                                            }.navigationBarTitle("Main Screen", displayMode: .inline)

                                        }.navigationBarTitle(Text("Main Screen"))
                                    }
                                }
                            }


                            struct SelectionItemView: View {

                                @Binding var selection: ViewModel.Option
                                var body: some View{
                                    Form{
                                     Section(footer: Text("Here is a detailed description of the setting.")) {
                                        ForEach(0 ..< ViewModel.Option.allCases.count, id: \.self) { index in

                                        HStack{
                                            Button(action: {
                                                self.selection  = ViewModel.Option.allCases[index]
                                            }){Text(ViewModel.Option.allCases[index].description)}
                                            Spacer()
                                            if ( self.selection  ==  ViewModel.Option.allCases[index] ){
                                                Image(systemName: "checkmark")
                                                }
                                            }

                                        }
                                        }}


                                }
                            }