在 SwiftUI 中制作的高度可定制的标签栏视图

标签栏

TabBar是在 SwiftUI 中制作的高度可定制的标签栏视图,其功能类似于 TabView。

安装

要求:iOS 15.0+

这个包可以使用Swift 包管理器安装

用法

类似于TabViewTabBar接受符合Hashable.

import SwiftUI
import TabBar

struct ContentView: View {
    @State private var item: Int = 0

    var body: some View {
        TabBar(selection: $item) {
            HomeView()
                .tabItem(0) {
                    Image(systemName: item == 0 ? "house.fill" : "house")
                        .font(.title3)
                    Text("Home")
                        .font(.system(.footnote, design: .rounded).weight(item == 0 ? .bold : .medium))
                }
            MarksView()
                .tabItem(1) {
                    Image(systemName: item == 1 ? "star.fill" : "star")
                        .font(.title3)
                    Text("Marks")
                        .font(.system(.footnote, design: .rounded).weight(item == 1 ? .bold : .medium))
                }
            UserView()
                .tabItem(2) {
                    Image(systemName: item == 2 ? "person.fill" : "person")
                        .font(.title3)
                    Text("User")
                        .font(.system(.footnote, design: .rounded).weight(item == 2 ? .bold : .medium))
                }
        }
    }
}

TabBar当没有设置其他修饰符时提供默认样式。

默认一半

使用修饰符,很容易设置 的TabBar样式。

TabBar(selection: $item) {
    // ...
}
.tabBarFill(.regularMaterial)
.tabBarMargins(top: 8, bottom: 8)
.tabBarPadding(top: 8, leading: 16, bottom: 8, trailing: 16)
.tabBarShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
.tabBarShadow(radius: 1, y: 1)

RoundedRectShadow-half

TabBar接受任何符合协议的填充ShapeStyle

TabBar(selection: $item) {
    // ...
}
.tabBarFill(.linearGradient(colors: [.orange, .yellow], 
                            startPoint: .top, endPoint: .bottom))
.tabBarMargins(top: 8, bottom: 8)

defaultShapeGradient-一半

TabBar也接受任何符合Shape协议的背景形状(例如,Capsule)。

TabBar(selection: $item) {
    // ...
}
.tabBarMargins(top: 8, bottom: 8)
.tabBarPadding(top: 8, leading: 16, bottom: 8, trailing: 16)
.tabBarShape(Capsule(style: .continuous))
.tabBarFill(.linearGradient(colors: [.yellow, .yellow.opacity(0.4)], 
                            startPoint: .top, endPoint: .bottom))

CapsuleGradient-一半

GitHub

查看 Github