SwiftUI reusable view - button

Question

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

Answer 1

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