如何更改SwiftUI TabView的圆点指示器位置？

Question

这是我的TabView，我想将“点指示器”的位置改为右下角。怎么做？

   TabView {
        ForEach (modelData.features, id: \.id) { landmark in
            landmark.image
                .resizable()
                .scaledToFill()
                .frame(height: 200)
                .clipped()
        }
    }
    .frame(height: 200)
    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
    .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
    .indexViewStyle(PageIndexViewStyle()

- lyzMaster

---

使用TabView中现有的工具无法实现，但如果您想要，可以通过自定义方式来实现，您需要编写所有代码。 - ios coder

Answer 1

使TabView的框架大于200

TabView {
    ForEach (modelData.features, id: \.id) { landmark in
        landmark.image
            .resizable()
            .scaledToFill()
            .frame(height: 200)
            .clipped()
    }
}
.frame(height: 260)
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
.indexViewStyle(PageIndexViewStyle()

- FBC

Answer 2

我曾经为此苦苦挣扎，但发现这种方法比其他任何解决方案都要好得多。通过这种方法，您可以保留原生的刮擦和逐渐消失的点的行为。同时还可以在任何位置上灵活地定位它。

struct CustomPageControl: UIViewRepresentable {
    
    let numberOfPages: Int
    @Binding var currentPage: Int
    
    func makeUIView(context: Context) -> UIPageControl {
        let view = UIPageControl()
        view.numberOfPages = numberOfPages
        view.backgroundStyle = .prominent
        view.addTarget(context.coordinator, action: #selector(Coordinator.pageChanged), for: .valueChanged)
        return view
    }
    
    func updateUIView(_ uiView: UIPageControl, context: Context) {
        uiView.numberOfPages = numberOfPages
        uiView.currentPage = currentPage
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        var parent: CustomPageControl
        
        init(_ parent: CustomPageControl) {
            self.parent = parent
        }
        
        @objc func pageChanged(sender: UIPageControl) {
            parent.currentPage = sender.currentPage
        }
    }
}

@State var selectedTabIndex: Int = 0

TabView(selection: $selectedTabIndex) {
                        // Content
}
.tabViewStyle(.page(indexDisplayMode: .never))
.indexViewStyle(.page(backgroundDisplayMode: .never))


CustomPageControl(numberOfPages: 5, currentPage: $selectedTabIndex)
                    

- Harry J