限制页面选项卡视图 Swiftui 中的点数答案

【问题标题】：Limit the number of dots in Page Tab View Swiftui限制页面选项卡视图 Swiftui 中的点数
【发布时间】：2021-08-26 22:45:16
【问题描述】：

我正在尝试使用 PageTabview 选项来允许用户浏览一系列数据来自 JSON 文件的页面。即使字段中有很多值，我也希望能够将可见点的数量限制为 5 或 6。如果字段中有 25 个值，我不想要的是 25 个点。我该怎么做？我希望能够显示像箭头一样的指示符，告诉用户还有更多……谢谢。我的代码如下：


struct TopicsExperienceCards: View {
    @Binding var closeExperience: Bool
    let etype: EItype
    var body: some View {
        //start of content of zstack layout
        ZStack {
            VStack(spacing: 20) {
                
                HStack{
                    Rectangle()
                        .fill(Color.white)
                        .frame(width: 300, height: 1, alignment: .center)
                   Spacer()
                Button(action: {
                    closeExperience = false })
                {
                Image(systemName:"xmark")
                    .foregroundColor(Color(etype.accentcolor))
                    .padding()
                }
                } //HSTACK
                TabView {
                    ForEach(etype.experience,id: \.self) { item in
                       // Display the content of a card //
                       
                       VStack (alignment:.center, spacing:0){
                                Text(item)
                                    .padding()
                                    .frame(width:300, height:300, alignment:.center)
                        Divider()
                        Spacer()
                        Text("Room for an image")
                        Spacer()
                        Spacer()
                        }//VSTACK
                        //End of display of content of the card //
                } //: FOREACH
                } //: TABVIEW
                .tabViewStyle(PageTabViewStyle())
                .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
                .onAppear {
                   setupAppearance() }
} //VSTACK

        }  //: ZStack
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
        .background(Color.white)
        .overlay(
                    RoundedRectangle(cornerRadius: 16)
                        .strokeBorder()
                        .foregroundColor(Color(etype.accentcolor)))
       .cornerRadius(16.0)
    .padding()
    }
}


struct TopicsExperienceCards_Previews: PreviewProvider {
    static let etypes: [EItype] = Bundle.main.decode("eibasestructure.json")
    static var previews: some View {
        TopicsExperienceCards(closeExperience:.constant(true),etype:etypes[1])
    }
}

enter image description here

【问题讨论】：

只是好奇 "//: ZStack" cmets 是从哪里来的？看起来不错，不过这样的cmets我见的不多，是不是来自一些SwiftUI的教程？
非常感谢您的帮助 Philip Dukhov。您添加的代码服务于我正在寻找的东西。非常感激。我最初确实从教程中学到了类似 //: ZStack 的东西，但这些天我添加它是为了我自己的理智。我不是开发人员，但我希望为我自己的个人工作创建一些应用程序，因此发现添加此类 cmets 非常有用。再次感谢您！
不客气。如果我的回答解决了您的问题，请将其标记为已接受=)

标签： swiftui swiftui-tabview

【解决方案1】：

系统点视图限制为大约 10 个点，可能取决于设备。您无法更改此值。

除此之外，您可以隐藏系统一，并使用点创建您自己的视图。作为一个例子，你可以关注this article，所以最后你会得到这样的东西：

@State var currentIndex = 0

var body: some View {
    //start of content of zstack layout
    ZStack {
        printUI(currentIndex)
        VStack(spacing: 20) {
            
            HStack{
                Rectangle()
                    .fill(Color.white)
                    .frame(width: 300, height: 1, alignment: .center)
                Spacer()
                Button(action: {
                        closeExperience = false })
                {
                    Image(systemName:"xmark")
                        .foregroundColor(Color.red)
                        .padding()
                }
            } //HSTACK
            TabView(selection: $currentIndex.animation()) {
                ForEach(etype.experience.indices,id: \.self) { i in
                    let item = etype.experience[i]
                    // Display the content of a card //
                    
                    VStack (alignment:.center, spacing:0){
                        Text(item)
                            .padding()
                            .frame(width:300, height:300, alignment:.center)
                        Divider()
                        Spacer()
                        Text("Room for an image")
                        Spacer()
                        Spacer()
                    }//VSTACK
                    //End of display of content of the card //
                } //: FOREACH
            } //: TABVIEW
            .tabViewStyle(PageTabViewStyle())
            .onAppear {
                setupAppearance()
            }
            Fancy3DotsIndexView(numberOfPages: etype.experience.count, currentIndex: currentIndex)
                .padding()
                .background(Color.green)
                .clipShape(Capsule())
        } //VSTACK
        
    }  //: ZStack
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
    .background(Color.white)
    .overlay(
        RoundedRectangle(cornerRadius: 16)
            .strokeBorder()
            .foregroundColor(Color.red)
    )
    .cornerRadius(16.0)
    .padding()
}

结果：

【讨论】：