Многоразовое представление SwiftUI

у меня есть представление "TopTabBar", и я использую его на двух разных экранах. но в одном экране должно быть 2 кнопки, а в другом 4. в обычном свифте я бы создал в этом TopTabBar функцию, с помощью которой бы добавлял кнопки в стек, и создавал их оттуда, где использую. но в SwiftUI я не могу этого сделать. Как я могу повторно использовать экран и заполнить его нужным количеством кнопок снаружи?

import SwiftUI

    struct TopBar: View {
        var firstViewTitle: String
        var secondViewTitle: String
        var thirdViewTitle:  String?
        var fourthViewTitle: String?
        @Binding var tabIndex: Int
        
        var body: some View {
            HStack(spacing: 0) {
                TabBarButton(text: firstViewTitle, isSelected: .constant(tabIndex == 0))
                    .onTapGesture { onButtonTapped(index: 0) }
                TabBarButton(text: secondViewTitle, isSelected: .constant(tabIndex == 1))
                    .onTapGesture { onButtonTapped(index: 1) }
                TabBarButton(text: thirdViewTitle ?? "", isSelected: .constant(tabIndex == 2))
                    .onTapGesture { onButtonTapped(index: 2) }
                TabBarButton(text: fourthViewTitle ?? "", isSelected: .constant(tabIndex == 3))
                    .onTapGesture { onButtonTapped(index: 3) }
            }
            .border(width: 1, edges: [.bottom], color: .lightGrey)
            .frame(width: UIScreen.screenWidth, height: 50, alignment: .center)
        }
            
        private func onButtonTapped(index: Int) {
            withAnimation { tabIndex = index }
        }
    }
    
    struct TabBarButton: View {
        let text: String
        @Binding var isSelected: Bool
        var body: some View {
            Text(text)
                .foregroundColor(isSelected ? .black : .gray)
                .fontWeight(isSelected ? .heavy : .regular)
                .padding(.bottom, 10)
                .border(width: isSelected ? 2 : 0, edges: [.bottom], color: .black)
                .frame(width: UIScreen.screenWidth/4, height: 50, alignment: .center)
                .background(Color.random)
        }
    }

     struct Usable: View {
       
            @State var tabIndex = 0
            
            var body: some View {
                NavigationView {
                    ZStack {
                        if tabIndex == 1 {
                            debugPring("xxx")
                        }
                        VStack {
                            TopBar(firstViewTitle: "first", secondViewTitle: "second", thirdViewTitle: "third", fourthViewTitle: "fourth" ,tabIndex: $tabIndex).padding(.top, 20)
                            if tabIndex == 0 {
                                debugPrint("xxx")
                            }
                            Spacer()
                        }
                        
                    }
                    .navigationBarHidden(true)
                }.accentColor(Color.black)
            }
        }

Пожалуйста, добавьте минимальный воспроизводимый пример и покажите нам, что у вас получилось.

burnsi 17.05.2022 13:04

Создайте массив строк, которые вы можете создать столько, сколько хотите

lorem ipsum 17.05.2022 13:33

Мне нужно добавить в одном представлении с этим топаром 2 кнопки, в другом 4. "Сделайте массив строк, вы можете создать столько, сколько хотите", в структуре "TopBar" есть 4 кнопки, мне нужно, чтобы гибкие кнопки считались там

helloPubick 17.05.2022 13:35
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
3
23
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

На самом деле вариантов много, но с вашим текущим дизайном можно просто сделать их условными, например

HStack(spacing: 0) {
    TabBarButton(text: firstViewTitle, isSelected: .constant(tabIndex == 0))
        .onTapGesture { onButtonTapped(index: 0) }
    TabBarButton(text: secondViewTitle, isSelected: .constant(tabIndex == 1))
        .onTapGesture { onButtonTapped(index: 1) }

    if let title = thirdViewTitle {
       TabBarButton(text: title, isSelected: .constant(tabIndex == 2))
           .onTapGesture { onButtonTapped(index: 2) }
    }

    if let title = fourthViewTitle {
       TabBarButton(text: title, isSelected: .constant(tabIndex == 3))
          .onTapGesture { onButtonTapped(index: 3) }
    }
}

Другие вопросы по теме