TabView tabItem image move to top

问题

I learned how to create a tabBar like UIKit tabBar in swiftUI. And I want to move the center tabItem to top . Is there any way I can achieve this?

TabView code

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

Visual Example

回答1:

First idea is to use ZStack so you can cover tabItem with your own tappable image. Here is example:

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

    }
}

so some image will cover center tabView item, which will be invisible (Text(" ")):

update

if you still need to switch between these 3 views you can use @State var selection (don't forget to 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
                }
    // ...
}

来源：https://stackoverflow.com/questions/59005162/tabview-tabitem-image-move-to-top

标签

swiftui

tabview

tabitem