Swiftui可重复使用的视图

Question

我有一个“ TopTabbar”视图，并且在两个不同的屏幕中使用它。但是在一个屏幕中，应该有2个按钮，而在另一个屏幕中应该有4个按钮。 在通常的Swift中，我将在此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)
            }
        }

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