我有一个可滚动的选项卡视图,单击主视图(ContentView)中的任一按钮即可显示。我希望在单击“视图 1”时显示第一个选项卡,在单击“视图 2”时显示第二个选项卡。打开选项卡视图后,它应该仍然可以正常工作,这意味着选项卡按钮和滚动仍然可以正常工作。现在我想了一下,这类似于点击 Instagram 上的“关注者”或“关注”按钮。如果有人知道如何解决这个问题,请告诉我。谢谢!
ContentView.swift:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationStack {
HStack {
NavigationLink {
ScrollTab(currentTab: 0)
} label: {
Text("View 1")
.font(.subheadline)
.fontWeight(.semibold)
}
NavigationLink {
ScrollTab(currentTab: 1)
} label: {
VStack {
Text("View 2")
.font(.subheadline)
.fontWeight(.semibold)
}
.frame(width: 76)
}
}
}
}
}
ScrollTab.swift:
struct ScrollTab: View {
@State var currentTab: Int = 0
init(currentTab: Int) {
self.currentTab = currentTab
}
var body: some View {
Spacer()
VStack(alignment: .center, spacing: 0) {
TabBarView(currentTab: self.$currentTab)
TabView(selection: self.$currentTab) {
Text("This is view 1").tag(0)
.onAppear() {
self.currentTab = 0
}
Text("This is view 2").tag(1)
.onAppear() {
self.currentTab = 1
}
}
.tabViewStyle(.page(indexDisplayMode: .never))
.background(Color.secondary)
}
.edgesIgnoringSafeArea(.all)
}
}
struct TabBarView: View {
@Binding var currentTab: Int
@Namespace var namespace
var tabBarOptions: [String] = ["View 1", "View 2"]
var body: some View {
HStack(spacing: 20) {
ForEach(Array(zip(self.tabBarOptions.indices,
self.tabBarOptions)),
id: \.0,
content: {
index, name in
TabBarItem(currentTab: self.$currentTab,
namespace: namespace.self,
tabBarItemName: name,
tab: index)
})
}
.padding(.horizontal)
.background(Color.orange) // <<<< Remove
.frame(height: 80)
}
}
struct TabBarItem: View {
@Binding var currentTab: Int
let namespace: Namespace.ID
var tabBarItemName: String
var tab: Int
var body: some View {
Button {
self.currentTab = tab
} label: {
VStack {
Spacer()
Text(tabBarItemName)
if currentTab == tab {
Color.black
.frame(height: 2)
.matchedGeometryEffect(id: "underline",
in: namespace,
properties: .frame)
} else {
Color.clear.frame(height: 2)
}
}
.animation(.spring(), value: self.currentTab)
}
.buttonStyle(.plain)
}
}
我尝试将“currentTab”变量从 @State 变量更改为 @Binding 变量,但遇到了进一步的问题,例如选项卡按钮不起作用。也许制作我自己的标签栏可能是一个不错的选择。如果有人有建议,请lmk。
这是一个常见的错误。您不能仅通过分配值来初始化
@State
属性包装器。
将
ScrollTab
的第一行替换为
struct ScrollTab: View {
@State var currentTab: Int
init(currentTab: Int) {
_currentTab = State(initialValue: currentTab)
}