我学会了如何在 swiftUI 中创建一个像 UIKit tabBar 这样的 tabBar。我想将中心 tabItem 移动到 top 。有什么办法可以实现这一目标吗?
标签 View 代码
TabView {
ViewTasks()
.tabItem {
Image(systemName: "list.bullet.below.rectangle")
Text("View Tasks")
}
AddTask()
.tabItem {
Image(systemName: "plus.circle").font(.system(size: 60))
}
CategoriesTasks()
.tabItem {
Image(systemName: "square.grid.2x2")
Text("Categories")
}
}
视觉示例
最佳答案
第一个想法是使用 ZStack
所以你可以覆盖tabItem
使用您自己的可点击图像。这是示例:
struct TabViewModel: View {
@State var showActionSheet: Bool = false
var body: some View {
ZStack {
GeometryReader { geometry in
TabView {
Text("list")
.tabItem {
Image(systemName: "list.bullet.below.rectangle")
}
Text("plus")
.tabItem {
Text(" ")
}
Text("categories")
.tabItem {
Image(systemName: "square.grid.2x2")
}
}
Image(systemName: "plus.circle")
.resizable()
.frame(width: 40, height: 40)
.shadow(color: .gray, radius: 2, x: 0, y: 5)
.offset(x: geometry.size.width / 2 - 20, y: geometry.size.height - 80)
.onTapGesture {
self.showActionSheet.toggle()
}
}
}
.actionSheet(isPresented: $showActionSheet) {
ActionSheet(title: Text("some actions"))
}
}
}
所以一些图像将覆盖中心 tabView 项目,这将是不可见的(
Text(" ")
):更新
如果您仍然需要在这 3 个 View 之间切换,您可以使用
@State var selection
(不要忘记 tag(...)
tabItems):struct TabViewModel: View {
@State var selection: Int = 0
var body: some View {
ZStack {
GeometryReader { geometry in
TabView(selection: self.$selection) {
//...
Text("plus")
.tabItem {
Text(" ")
}.tag(1)
//...
.onTapGesture {
self.selection = 1
}
// ...
}
关于swiftui - TabView tabItem 图像移至顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59005162/