主页 / coding / 问题 / 78847872
Accepted
Swift
Asked: 2024-08-08 18:25:35 +0800 CST

如何在 SwiftUI 中实现视图之间的顺畅导航

  • 772

代码：使用此代码，我可以导航到（ProfileView（）、HomeNew、NotificationsTabView、MessageTabView）之间的视图，非常清晰，我的意思是像非常快速的变化，但我需要它可以更顺畅地从一个视图更改为另一个视图

因为我的代码如果我快速地逐个更改视图然后在视图虚拟数据设计之前稍微花一点时间在当前视图中显示..

所以我需要在视图之间非常流畅的导航。那么如何实现视图之间的流畅导航呢？请指导我。

struct TabContainerViewNew: View {
    @Binding var index: Int?
    @State private var showSideMenu = false
    @State private var gotoSearch = false

    init(index: Binding<Int?>) {
        self._index = index
        UITabBar.appearance().isHidden = true
    }

    let tabs = [("Menu", "Menu_New"), ("My profile", "user"), ("Home", "MenuNew_Home"), ("Notification", "MenuNew_Notification"), ("Message", "MenuNew_Message")]
    
    var body: some View {
        ZStack(alignment: .bottom) {
            if let index = index {
                TabView(selection: Binding(
                    get: { index },
                    set: { newValue in
                        self.index = newValue
                    }
                )) {
                    ProfileView()
                        .tabItem {
                            Label("My profile", image: "icn_settings_tab")
                        }
                        .tag(1)

                    HomeNew()
                        .tabItem {
                            Label("Home", image: "icn_home_tab")
                        }
                        .tag(2)

                    NotificationsTabView()
                        .tabItem {
                            Label("Notification", image: "icn_notifications_tab")
                        }
                        .tag(3)

                    MessageTabView()
                        .tabItem {
                            Label("Message", image: "icn_message_tab")
                        }
                        .tag(4)
                }
                .tint(.white)
                .transition(.slide)
          }

            VStack(spacing: 0) {
          
                HStack(spacing: 0) {
                    ForEach(0..<tabs.count) { i in
                        if tabs[i].0 == "Menu" {
                            VStack {
                                Button(action: {
                                    withAnimation {
                                        showSideMenu.toggle()
                                    }
                                }) {
                                    Image(tabs[i].1)
                                        .renderingMode(.template)
                                        .resizable()
                                        .scaledToFit()
                                        .tint(.white.opacity(0.6))
                                        .frame(width: 24, height: 24)
                                        .padding(8)
                                }
                                Text(tabs[i].0)
                                    .foregroundColor(.white.opacity(0.6))
                                    .font(.system(size: 11))
                            }
                            .frame(maxWidth: .infinity)
                        } else {
                            TabButton(image: tabs[i].1, title: tabs[i].0, item: i, index: $index)
                                .frame(maxWidth: .infinity)
                        }
                    }
                }
                .padding(.horizontal, 7)
                .padding(.bottom, 15)
                .padding(.top, 5)
                .background(Color.appGreen2)
            }
        }
        
        .sideMenu(isShowing: $showSideMenu) {
            SideMenuView(isShowingMenu: $showSideMenu)
        }
    }
}

struct TabButton: View {
    var image: String
    var title: String
    var item: Int
    @Binding var index: Int?

    var body: some View {
        VStack {
            Button(action: {
                    index = item
            }) {
                Image(image)
                    .renderingMode(.template)
                    .resizable()
                    .foregroundColor(index == item ? .white : .white.opacity(0.6))
                    .frame(width: 24, height: 24)
                    .padding(8)
            }
            Text(title)
                .foregroundColor(index == item ? .white : .white.opacity(0.6))
                .fontWeight(index == item ? .bold : .regular)
                .font(.system(size: (index == item ? 11 : 11)))
        }
        .frame(maxWidth: .infinity) 
    }
}
animation

1 个回答

  1. Best Answer

    我想要一份 MRE，但没有得到，但我想这里可能有一个简单的解决方案。

    由于您已在使用自定义标签栏，请尝试使用.page作为.tabViewStyle。这提供了视图之间的滑动过渡：

    TabView( //...
) {
    // ...
}
.tint(.white)
// .transition(.slide) // not needed
.tabViewStyle(.page(indexDisplayMode: .never))
.animation(.easeInOut, value: index)

    这大概就是你用 得到的唯一动画了TabView。如果你需要过渡.opacity，或者其他任何类型的过渡，那么你需要自己实现视图的改变。这其实并不难，特别是因为你已经使用了自定义标签栏。

    TabView一种方法是用ZStack和语句替换switch：

    ZStack(alignment: .bottom) {
    ZStack {
        switch(index) {
        case 1:
            ProfileView()
        case 3:
            NotificationsTabView()
        case 4:
            MessageTabView()
        default:
            HomeNew()
        }
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .tint(.white)
    .animation(.easeInOut, value: index)

    VStack(spacing: 0) {
        // ...
    }
}
    • 1

相关问题