如何在SwiftUI中为TabBar图标添加空间

Question

我正在使用SwiftUI，创建了一个标签栏，外观如下：

图标上方的间距非常小，我想要在其顶部添加一些填充或者增加标签栏的高度并垂直居中图标。

我的代码目前看起来像这样：

TabView{...

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

我该如何着手处理这个问题？

- Nicolas Gimelli

---

你无法在SwiftUI中更改TabBar的大小，但是你可以创建一个.overlay，通过传递选择来控制TabView，并且你可以将其变得比标准的更大。 - Yrb

你是如何创建.tabItem的？当我使用一个带有空字符串的Label时，图标仍然居中，而不像你的在顶部。 - Magnas

Answer 1

试试这个...

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

- bdeviOS

Answer 2

我建议使用自定义视图来制作您的Tabbar，因为默认视图难以修改。将您的TabView放在VStack中，并在底部放置自定义的Tabbar。您可以自由地修改布局。在尝试自定义SwiftUI控件时，还要检查这个很棒的代码库 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
                }
            }
        )
    }
}

- Quang Hà