在 SwiftUI 中制作的高度可定制的标签栏视图
标签栏
TabBar是在 SwiftUI 中制作的高度可定制的标签栏视图,其功能类似于 TabView。
安装
要求:iOS 15.0+
用法
类似于TabView
,TabBar
接受符合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)
TabBar
接受任何符合协议的填充ShapeStyle
。
TabBar(selection: $item) {
// ...
}
.tabBarFill(.linearGradient(colors: [.orange, .yellow],
startPoint: .top, endPoint: .bottom))
.tabBarMargins(top: 8, bottom: 8)
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))