在Swiftui中，TabView API和自定义受到限制。我们经常可以看到有关如何创建自定义选项卡视图组件复制类似布局和行为的教程和文章。这次，我想向您展示我昨晚与本机TabView组件进行的非常简单的探索，这些组件将为您的应用添加一些火花。
代码非常简单，让我们从我们主视图的主体中的SwiftUi中的基本TabView布局开始。
var body: some View {
TabView(selection: $selectedTab) {
FirstScreen()
.tabItem {
Image(systemName: "1.circle.fill")
Text("First tab")
}
.tag(RootTab.first)
SecondScreen()
.tabItem {
Image(systemName: "2.circle.fill")
Text("Second tab")
}
.tag(RootTab.second)
ThirdScreen()
.tabItem {
Image(systemName: "3.circle.fill")
Text("Third tab")
}
.tag(RootTab.third)
}
.background(Color.secondary)
.tint(.red)
}
这里有几件事：
- 我们使用的是
TabView的初始化器，该器接收到所选值的绑定。我们稍后还将使用它，但是目前，我们将在主机视图中声明@state var：
@State private var selectedTab: RootTab = .second
- 这就是Roottab枚举的样子，但是您基本上可以使用自己的键入标签。
internal enum RootTab: Int {
case first, second, third
/// We use this to color the light of each tab when selected.
var selectionColor: Color {
switch self {
case .first, .third:
return .purple
case .second:
return .main
}
}
}
现在，这是TabView的标准外观和感觉，它不会带来那么多的喜悦：（
这个想法是添加专注于所选选项卡的灯，并在用户切换到其他选项卡时进行更改。为此，让我们在OUT TabView中使用叠加层修饰符如下：
TabView() {...}
.overlay(alignment: .bottom) {
let color = selectedTab.selectionColor
GeometryReader { geometry in
let aThird = geometry.size.width / 3
VStack {
Spacer()
Circle()
.background(color.blur(radius: 20))
.frame(width: aThird, height: 30)
.shadow(color: color, radius: 40)
.offset(
x: CGFloat(selectedTab.rawValue) * aThird,
y: 30
)
}
}
}
.edgesIgnoringSafeArea(.bottom)
它如何工作？
- 覆盖层在我们的
TabView上添加了一个Circle形状。 - 我们设置了圆的样式，具有带有大模糊值的阴影，该阴影将在选定的选项卡中模拟光线。
- 背景修饰符实际上并不需要是一种模糊的颜色，但它增强了
light效果。您可以玩耍，看看它如何为您工作。 - 我们通过使用
GeometryReader获取TabView的大小，将Circle的宽度设置为屏幕宽度的第三。高度取决于您，但它再次改变了阴影的强度，因此再次玩耍以获得最佳效果。 - 然后，我们使用偏置修饰符将
Circle形状定位，这使我们可以将形状本身定位在TabView下方，并仅让阴影部分可见。 - 当
selectedTab更改时，水平偏移（X轴）将更新，因此当用户切换选项卡时，Lightmoves。 - 最后但最重要的是，
edgesIgnoringSafeArea允许覆盖层忽略安全区域并超越屏幕。
然后，当selectedTab值更改以提供更好的整体体验时，我们可以添加一个简单的春季动画：
.animation(.spring(), value: selectedTab)
ð这是最终结果：
在黑暗模式下会变得更好：
要记住的一件事是，覆盖层在我们的TabView上，如名称，因此，如果我们添加更多的东西，我们必须小心不要覆盖我们的标签项目。
就是这样，简单有效。希望您像我一样喜欢Swiftui的简单性。 ð