如何在SwiftUI中实现类似天气App的带页面指示器的工具栏

要实现类似苹果天气App的分页指示器布局（位于底部工具栏上方），核心思路是隐藏TabView默认的指示器，然后自定义指示器并手动布局在TabView与底部工具栏之间，同时通过绑定变量同步当前页面索引。

完整实现代码 #

import SwiftUI

struct ContentView: View {
    // 跟踪当前页面索引
    @State private var currentPage = 0
    // 总页数
    private let totalPages = 7
    
    var body: some View {
        VStack(spacing: 0) {
            // 分页内容区域
            TabView(selection: $currentPage) {
                View1().tag(0)
                View2().tag(1)
                View3().tag(2)
                View4().tag(3)
                View5().tag(4)
                View6().tag(5)
                View7().tag(6)
            }
            .tabViewStyle(PageTabViewStyle())
            // 隐藏默认的页面指示器
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .never))
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            // 自定义页面指示器（位于内容区与工具栏之间）
            PageIndexView(selection: $currentPage, displayMode: .always) {
                ForEach(0..<totalPages) { index in
                    Circle()
                        .frame(width: 8, height: 8)
                        // 自定义选中/未选中状态颜色
                        .foregroundColor(currentPage == index ? .blue : .gray.opacity(0.5))
                }
            }
            .padding(.vertical, 8)
            
            // 底部工具栏（模拟天气App样式）
            HStack(spacing: 24) {
                Button(action: {
                    // 实现添加逻辑
                }) {
                    Image(systemName: "plus")
                        .font(.title)
                }
                Spacer()
                Button(action: {
                    // 实现分享逻辑
                }) {
                    Image(systemName: "square.and.arrow.up")
                        .font(.title)
                }
                Spacer()
                Button(action: {
                    // 实现更多选项逻辑
                }) {
                    Image(systemName: "ellipsis.circle")
                        .font(.title)
                }
            }
            .padding(.horizontal, 24)
            .padding(.vertical, 12)
            .background(Color(.systemBackground))
            .shadow(color: .black.opacity(0.1), radius: 2, x: 0, y: -2)
        }
        // 可选：让内容延伸到顶部安全区
        .edgesIgnoringSafeArea(.top)
    }
}

// 示例子视图（替换为你的实际View1~View7）
struct View1: View {
    var body: some View {
        Color.blue.overlay(Text("View 1").foregroundColor(.white).font(.largeTitle))
    }
}

struct View2: View {
    var body: some View {
        Color.green.overlay(Text("View 2").foregroundColor(.white).font(.largeTitle))
    }
}

// 请自行补充View3~View7的实现

关键说明 #

1. 页面索引绑定：通过@State private var currentPage绑定TabView的selection参数，实时同步当前选中的页面。
2. 隐藏默认指示器：使用.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .never))关闭TabView自带的指示器。
3. 自定义指示器布局：手动添加PageIndexView，并将其放置在TabView和底部工具栏之间，通过ForEach生成对应数量的指示器节点，还可自定义选中/未选中的颜色样式。
4. 底部工具栏实现：用HStack模拟系统工具栏，添加背景色和阴影来贴近天气App的视觉效果，可根据需求替换按钮图标和逻辑。

内容的提问来源于stack exchange，提问作者Gabriel Salinas