SwiftUI TabView - 在连续点击后在子视图中运行代码

Question

I am trying to implement the behavior in a TabView when the user taps the same tab multiple times, such as in the iOS AppStore app. First tap: switch to that view, second tap: pop to root, third tap: scroll to the top if needed.

The code below works fine for switching and didTap() is called for every tap.

import SwiftUI

enum Tab: String {
    case one
    case two
}

struct AppView: View {
    @State private var activeTab = Tab.one

    var body: some View {
        TabView(selection: $activeTab.onChange(didTap)) {
            One()
                .tabItem {
                    Label("one", systemImage: "1.lane")
                }
                .tag(Tab.one)

            Two()
                .tabItem {
                    Label("two", systemImage: "2.lane")
                }
                .tag(Tab.two)
        }
    }
    
    func didTap(to value: Tab) {
        print(value) // this captures every tap
    }
}

extension Binding {
    func onChange(_ handler: @escaping (Value) -> Void) -> Binding<Value> {
        Binding(
            get: { self.wrappedValue },
            set: { newValue in
                self.wrappedValue = newValue
                handler(newValue)
            }
        )
    }
}

What I am struggling with, is how to tell either One or Two that it was tapped for a second or third time? (How to pop and scroll is not the issue).

I have seen this: TabView, tabItem: running code on selection or adding an onTapGesture but it doesn't explain how to run code in one of the views.

Any suggestions?

Answer 1

You can record additional taps (of same value) in an array. The array count gives you the number of taps on the same Tab.

EDIT: now with explicit subview struct.

struct ContentView: View {
    
    @State private var activeTab = Tab.one

    @State private var tapState: [Tab] = [Tab.one] // because .one is default
    
    var body: some View {
        TabView(selection: $activeTab.onChange(didTap)) {
            
            SubView(title: "One", tapCount: tapState.count)
                .tabItem {
                    Label("one", systemImage: "1.lane")
                }
                .tag(Tab.one)

            SubView(title: "Two", tapCount: tapState.count)
                .tabItem {
                    Label("two", systemImage: "2.lane")
                }
                .tag(Tab.two)
        }
    }
    
    func didTap(to value: Tab) {
        print(value) // this captures every tap
        if tapState.last == value {
            tapState.append(value) // apped next tap if same value
            print("tapped \(tapState.count) times")
        } else {
            tapState = [value] // reset tap state to new tab selection
        }
    }
}


struct SubView: View {
    
    let title: String
    let tapCount: Int
    
    var body: some View {
        VStack {
            Text("Subview \(title)").font(.title)
            Text("tapped \(tapCount) times")
        }
    }
}

Answer 2

Although the answer by @ChrisR below did answer my question, I couldn't figure out the next step, ie the logic when to pop or scroll based on the number of taps in a SubView . After lots of reading and trial and error, I recently came across this article: https://notificare.com/blog/2022/11/25/a-better-tabview-in-swiftui/

Inspired by this article, but with some modifications, I came up with the following which does exactly what I was looking for.

The two main changes are:

1. An EmptyView with an id is added as the first row in the List to be used by proxy.scrollTo() .
2. Instead of the global @StateObject var appState that stores the navigation paths for the subviews, I added the paths as separate @State properties. This avoids the Update NavigationAuthority bound path tried to update multiple times per frame. warning.

Hopefully this is helpful for someone.

enum Tab: String {
    case one
    case two
}

struct ContentView: View {
    @State var selectedTab = Tab.one
    @State var oneNavigationPath = NavigationPath()
    @State var twoNavigationPath = NavigationPath()

    var body: some View {
        ScrollViewReader { proxy in
            TabView(selection: tabViewSelectionBinding(proxy: proxy)) {
                SubView(title: "One", path: $oneNavigationPath)
                    .tabItem {
                        Label("one", systemImage: "1.lane")
                    }
                    .tag(Tab.one)

                SubView(title: "Two", path: $twoNavigationPath)
                    .tabItem {
                        Label("two", systemImage: "2.lane")
                    }
                    .tag(Tab.two)
            }
        }
    }

    private func tabViewSelectionBinding(proxy: ScrollViewProxy) -> Binding<Tab> {
        Binding<Tab>(
            get: { selectedTab },
            set: { newValue in
                if selectedTab == newValue {
                    switch selectedTab {
                    case .one:
                        if oneNavigationPath.isEmpty {
                            withAnimation {
                                proxy.scrollTo(Tab.one, anchor: .bottom)
                            }
                        } else {
                            withAnimation {
                                oneNavigationPath = NavigationPath()
                            }
                        }
                    case .two:
                        if twoNavigationPath.isEmpty {
                            withAnimation {
                                proxy.scrollTo(Tab.two, anchor: .bottom)
                            }
                        } else {
                            withAnimation {
                                twoNavigationPath = NavigationPath()
                            }
                        }
                    }
                }

                selectedTab = newValue
            }
        )
    }
}

struct SubView: View {
    let title: String
    let items = Array(1 ... 100)

    @Binding var path: NavigationPath

    var body: some View {
        NavigationStack(path: $path) {
            List {
                EmptyView()
                    .id(Tab(rawValue: title.lowercased()))

                ForEach(items, id: \.self) { item in
                    NavigationLink(value: item) {
                        Text("Item \(item)")
                    }
                }
            }
            .navigationTitle(title)
            .navigationDestination(for: Int.self) { item in
                Text("Item \(item)")
            }
        }
    }
}