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

Question

我正在尝试使用 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

Answer 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()
}

结果：

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

Limit the number of dots in Page Tab View Swiftui

swiftui

swiftui-tabview