【发布时间】：2021-08-03 14:02:01
【问题描述】：
我在弄清楚这一点时遇到了一些挑战。在下面的代码中，我创建了一个 TabView 并能够使用 .tag() 切换哪个选项卡处于活动状态，但我有一个选项卡项的水平 ScrollView。每个选项卡屏幕都显示类似的信息，因此我使用单个视图来创建它，然后使用 ForEach 循环来浏览这些项目。但它破坏了 .tag() 函数，我似乎无法弄清楚如何使用 ForEach 循环让它工作。关于如何解决这个问题或我缺少什么的任何想法？
import SwiftUI
\\ Working code with normal Swipable tabs using .tag()
struct ContentView: View {
var body: some View {
CustomTabView()
}
}
struct CustomTabView: View {
@State var selectedTab = "house"
var body: some View {
ZStack(alignment: Alignment(horizontal: .center, vertical: .bottom)) {
TabView(selection: $selectedTab) {
HouseView()
.tag("house")
EnvelopeView()
.tag("envelope")
FolderView()
.tag("folder")
SettingsView()
.tag("gear")
SliderView()
.tag("slider.horizontal.3")
VideoView()
.tag("video")
UpView()
.tag("arrow.up.doc")
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
.ignoresSafeArea(.all, edges: .bottom)
ScrollView(.horizontal, showsIndicators: false, content: {
HStack {
ForEach(tabs,id: \.self){image in
TabButton(image: image, selectedTab: $selectedTab)
}
}
})
.padding(.horizontal, 25)
.padding(.vertical, 5)
.background(Color.white)
.clipShape(Capsule())
.shadow(color: Color.black.opacity(0.15), radius: 5, x: 5, y: 5)
.shadow(color: Color.black.opacity(0.15), radius: 5, x: -5, y: -5)
.padding(.horizontal)
}
.ignoresSafeArea(.keyboard, edges: .bottom)
.background(Color.black.opacity(0.05).ignoresSafeArea(.all, edges: .all))
}
}
// tab...
var tabs = ["house", "envelope", "folder", "gear", "slider.horizontal.3", "video", "arrow.up.doc"]
struct TabButton: View {
var image : String
@Binding var selectedTab : String
var body: some View {
Button(action: {selectedTab = image}) {
Image(systemName: image)
.renderingMode(.template)
.opacity(self.selectedTab == image ? (1) : (0.5))
.padding()
}
}
}
struct HouseView: View {
var body: some View {
VStack {
Text("House View")
}
}
}
struct EnvelopeView: View {
var body: some View {
VStack {
Text("Envelope View")
}
}
}
struct FolderView: View {
var body: some View {
VStack {
Text("Folder View")
}
}
}
struct SettingsView: View {
var body: some View {
VStack {
Text("Settings View")
}
}
}
struct SliderView: View {
var body: some View {
VStack {
Text("Slider View")
}
}
}
struct VideoView: View {
var body: some View {
VStack {
Text("Video View")
}
}
}
struct UpView: View {
var body: some View {
VStack {
Text("Up View")
}
}
}
在 TabView 中的视图上执行 ForEach 循环后的问题代码。视图填充但它破坏了 .tag() 功能，我不知道如何让它再次工作。
import SwiftUI
struct ContentView: View {
var body: some View {
CustomTabView()
}
}
struct CustomTabView: View {
@State var selectedTab = "house"
@State var viewData : AllViewData!
var body: some View {
ZStack(alignment: Alignment(horizontal: .center, vertical: .bottom)) {
TabView(selection: $selectedTab) {
ForEach(allViews){views in
ViewsCardView(viewData: views)
.tag("//not sure if this is the right place for the .tag()")
}
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
.ignoresSafeArea(.all, edges: .bottom)
ScrollView(.horizontal, showsIndicators: false, content: {
HStack {
ForEach(tabs,id: \.self){image in
TabButton(image: image, selectedTab: $selectedTab)
}
}
})
.padding(.horizontal, 25)
.padding(.vertical, 5)
.background(Color.white)
.clipShape(Capsule())
.shadow(color: Color.black.opacity(0.15), radius: 5, x: 5, y: 5)
.shadow(color: Color.black.opacity(0.15), radius: 5, x: -5, y: -5)
.padding(.horizontal)
}
.background(Color.black.opacity(0.05).ignoresSafeArea(.all, edges: .all))
}
}
// tab...
var tabs = ["house", "envelope", "folder", "gear", "slider.horizontal.3", "video", "arrow.up.doc"]
struct TabButton: View {
var image : String
@Binding var selectedTab : String
var body: some View {
Button(action: {selectedTab = image}) {
Image(systemName: image)
.renderingMode(.template)
.opacity(self.selectedTab == image ? (1) : (0.5))
.padding()
}
}
}
struct ViewsCardView: View {
@State var viewData : AllViewData!
var body: some View {
VStack {
Text(viewData.name)
}
}
}
struct AllViewData : Identifiable {
var id = UUID().uuidString
var name : String
}
var allViews = [
AllViewData(name: "House"),
AllViewData(name: "Envelope"),
AllViewData(name: "Folder"),
AllViewData(name: "Settings"),
AllViewData(name: "Slider"),
AllViewData(name: "Video"),
AllViewData(name: "Up"),
]
【问题讨论】：
-
请发送Minimal, Reproducible Example。您在代码中留下了太多东西，无法正常运行，因此很难看到发生了什么。另外，请使用股票 SF 符号定义图像，以便我们可以看到标签。
-
更新了代码，使其可以被复制。感谢您指出这一点。我希望我能找到解决这个问题的方法。
-
有问题的代码无法编译。您应该去掉第一部分中已经存在的所有内容，然后放入需要交换的结构。
-
奇怪，因为它为我编译。问题是当像工作代码示例一样滑动到下一个视图时，选项卡不再突出显示。我的麻烦是试图找出 TabViews 的 ForEach，同时还使用 .tag()。我放了一些显示行为的 gif 示例。