I'm working with SwiftUI and made a tab bar that looks like this:

The spacing above the icons is pretty minimal, and I'd like to either add some padding to the top of it or increase the height of the bar itself and vertically center the icons.

My code currently looks like this:

TabView{...

}
    .accentColor(Color(UIColor.label))
    .onAppear{...}

How could I go about this?

CodePudding user response：

I would recommend to use custom view for your Tabbar, default one is closed to modify. Put your TabView in a VStack and put a customized Tabbar at bottom. You can freely to modify the layout. And also check this awesome repo when try to customize SwiftUI Control https://github.com/siteline/SwiftUI-Introspect

struct TabbBar: View {
    let tabs: [TabbItem]
    @Binding private var selectedItem: TabbItem
    
    init?(tabs items: [TabbItem], selected: Binding<TabbItem>) {
        guard items.count > 0 else {
            return nil
        }
        tabs = items
        _selectedItem = selected
    }
    
    var body: some View {
        HStack {
            ForEach(tabs) { item in
                TabbItemView(
                    item: item,
                    isSelected: createBindingFor(item)
                )
            }
        }
        .frame(maxWidth: .infinity)
        .padding(.top, 4)
    }
    
    private func createBindingFor(_ item: TabbItem) -> Binding<Bool> {
        Binding(
            get: { selectedItem == item },
            set: { isSelected in
                if isSelected {
                    selectedItem = item
                }
            }
        )
    }
}

CodePudding user response：

try this..

HStack {
     VStack {
         Image(systemName: "homekit")
             .resizable()
             .aspectRatio(contentMode: .fit)
             .frame(width: geometry.size.width/5, height: geometry.size.height/28)
             .padding(.top, 10)
         Spacer()
     }
 }