SwiftUI中如何自定义Footer并实现页面切换（不使用TabView）

你可以通过状态变量控制主内容视图切换，结合固定在底部的Footer布局来实现需求。以下是完整的SwiftUI实现代码：

import SwiftUI

// 示例页面视图，替换成你自己的业务页面
struct Page0: View {
    var body: some View {
        Text("首页内容")
            .font(.largeTitle)
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.blue)
    }
}

struct Page1: View {
    var body: some View {
        Text("第二页内容")
            .font(.largeTitle)
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.green)
    }
}

struct MainView: View {
    // 管理选中标签的状态变量，点击按钮时更新
    @State private var selectedTab = 0
    
    var body: some View {
        VStack(spacing: 0) {
            // 主内容区域：根据selectedTab切换对应页面
            ZStack {
                switch selectedTab {
                case 0:
                    Page0()
                case 1:
                    Page1()
                // 新增页面时，继续添加对应case即可
                default:
                    Page0()
                }
            }
            
            // 你的自定义Footer，固定在底部
            HStack {
                HStack{
                    Spacer()
                    Button (action: {
                        selectedTab = 0
                    }) {
                        Image(selectedTab == 0 ? "white_img" : "yellow_img")
                    }
                    Spacer()
                }
                Rectangle()
                    .foregroundColor(.clear)
                    .frame(width: 1.5, height: 30)
                    .background(.white)
                HStack{
                    Spacer()
                    Button (action: {
                        selectedTab = 1
                    }) {
                        Image(selectedTab == 1 ? "white_img2" : "yellow_img2")
                    }
                    Spacer()
                }
            }
            .frame(height: 60) // 自定义Footer高度
            .background(.black) // 设置Footer背景色
        }
        .ignoresSafeArea(.all, edges: .bottom) // 让Footer延伸到底部安全区
    }
}

struct MainView_Previews: PreviewProvider {
    static var previews: some View {
        MainView()
    }
}

核心逻辑说明： #

• 状态驱动视图更新：@State修饰的selectedTab会在按钮点击时更新，自动触发主内容区的视图切换。
• 固定Footer布局：VStack将主内容区和Footer垂直排列，主内容区通过frame(maxHeight: .infinity)占满剩余空间，Footer自然固定在底部。
• 安全区适配：ignoresSafeArea(.all, edges: .bottom)让Footer覆盖底部安全区，避免出现空白条。
• 扩展性：新增标签页时，只需添加对应的页面视图、在switch中增加case，同时在Footer里补充按钮即可。

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