如何在 SwiftUI 中的 TabBar 图标上方添加 Space

Question

我正在使用 SwiftUI 并制作了一个如下所示的标签栏：

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

我的代码目前是这样的：

TabView{...

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

我该怎么做？

Answer 1

我会推荐你的Tabbar使用自定义视图，默认关闭修改。将您的 TabView 放入 VStack 中，并在底部放置一个自定义的 Tabbar。您可以自由修改布局。并在尝试自定义 SwiftUI 控件时检查这个很棒的 repo 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
                }
            }
        )
    }
}

Answer 2

试试这个..

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

如何在 SwiftUI 中的 TabBar 图标上方添加 Space

How to Add Space Above TabBar Icons in SwiftUI

tabbar

swift

swiftui

swiftui-tabview