SwiftUI reusable view-CodePudding

i have a view "TopTabBar" and i use it in two different screens. but in one screen there should be 2 buttons, and in the other 4. in the usual swift, I would create a function in this TopTabBar, with which I would add buttons to the Stack, and create them from where I use it. but in SwiftUI I can't do that. How can I get the screen reused and filled with the right amount of buttons from the outside?

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)
            }
        }

CodePudding user response：

Actually there are many options, but with your current design it is possible just to make them conditional, like

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) }
    }
}