Изучение горизонтального выбора в SwiftUI: подробное руководство

В этой статье мы погрузимся в мир SwiftUI и рассмотрим различные методы реализации горизонтального выбора. Мы предоставим примеры кода для каждого метода, чтобы помочь вам понять и реализовать их в ваших проектах SwiftUI. Итак, начнем!

Метод 1: использование средства выбора
Первый метод предполагает использование встроенного представления Pickerв SwiftUI. Однако по умолчанию Pickerотображает параметры в раскрывающемся списке. Чтобы сделать его горизонтальным, нам нужно обернуть его HStackи изменить его стиль.

struct ContentView: View {
    @State private var selectedOption: String = "Option 1"
    let options = ["Option 1", "Option 2", "Option 3"]

    var body: some View {
        HStack {
            Picker(selection: $selectedOption, label: Text("")) {
                ForEach(options, id: \.self) { option in
                    Text(option).tag(option)
                }
            }
            .pickerStyle(SegmentedPickerStyle())
        }
    }
}

Метод 2: использование ScrollView и LazyHStack
Второй метод предполагает использование комбинации ScrollViewи LazyHStackдля создания горизонтального средства выбора. Такой подход дает вам больше гибкости в настройке внешнего вида и поведения средства выбора.

struct ContentView: View {
    @State private var selectedOption: String = "Option 1"
    let options = ["Option 1", "Option 2", "Option 3"]

    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 20) {
                ForEach(options, id: \.self) { option in
                    Text(option)
                        .padding()
                        .background(selectedOption == option ? Color.blue : Color.gray)
                        .foregroundColor(.white)
                        .onTapGesture {
                            selectedOption = option
                        }
                }
            }
        }
    }
}

Метод 3: использование TabView
Третий метод предполагает использование TabViewдля создания горизонтального средства выбора с поведением, похожим на вкладку. Каждая вкладка представляет собой опцию, и вы можете настроить внешний вид вкладок в соответствии со своими потребностями.

struct ContentView: View {
    @State private var selectedTabIndex = 0
    let options = ["Option 1", "Option 2", "Option 3"]

    var body: some View {
        TabView(selection: $selectedTabIndex) {
            ForEach(0..<options.count) { index in
                Text(options[index])
                    .tabItem {
                        Text(options[index])
                    }
                    .tag(index)
            }
        }
    }
}

В этой статье мы рассмотрели три различных метода реализации горизонтального средства выбора в SwiftUI. Мы узнали, как использовать представление Pickerс сегментированным стилем выбора, создавать собственные средства выбора с использованием ScrollViewи LazyHStackи реализовывать панель выбора на основе вкладок. сборщик с помощью TabView. Благодаря этим методам у вас есть возможность выбрать тот, который лучше всего соответствует требованиям вашего проекта. Приятного кодирования!