TabView tabItem 图片移动到顶部

Question

我学习了如何在 swiftUI 中创建类似 UIKit tabBar 的 tabBar。我想将中心 tabItem 移到 top 。有什么办法可以做到这一点？

TabView代码

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")
        }
    }

视觉示例

Answer 1

第一个想法是使用 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 个视图之间切换，您可以使用 @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
                }
    // ...
}

Answer 2

SWIFTUI 2

.onTapGesture 使用有时会导致意外行为，例如不显示覆盖视图（警报、工作表或全屏）或在您单击另一个选项卡时显示覆盖视图。比较安全的方法是用.onChange(of:)方法设置选择值：

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)
//...
            .onChange(of: selection) { _ in
                self.selection = 1
            }
// ...

}

TabView tabItem 图片移动到顶部

TabView tabItem image move to top

swiftui

tabview

tabitem