swiftui中设置建议最多5个tabItem项,多个tabItem项会被自动折叠起来

发布于:2024-07-06 ⋅ 阅读:(70) ⋅ 点赞:(0)

在swiftui中设置底部的菜单栏的时候,最多建议设置5个,如果超过了,会被自动折叠到More中,点击More就会出现类似list的样式显示,不是很友好。

最多按照5个默认设置的话,就会正常全部显示出来:

测试代码:

//
//  SwitchTab.swift
//  SwiftBook
//
//  Created by song on 2024/7/4.
//

import SwiftUI

enum TabType: Int, Hashable {
    case home
    case videos
    case message
    case seting

    var title: String {
        switch self {
            case .home:
                return "Home"
            case .videos:
                return "Videos"
            case .message:
                return "Message"
            case .seting:
                return "Setting"
        }
    }

    var image: String {
        switch self {
            case .home:
                return "house.fill"
            case .videos:
                return "video.fill"
            case .message:
                return "message.fill"
            case .seting:
                return "printer.fill"
        }
    }
}

struct SwitchTab: View {
    @State private var selectedTab: TabType = .home

    var body: some View {
        TabView(selection: $selectedTab) {
            VStack {
                Color.red.overlay(content: {
                    Button(action: {
                        selectedTab = TabType.message
                    }, label: {
                        Text("Go to Message page").padding().background().cornerRadius(10, antialiased: true)
                    })
                })
            }
            .frame(width: .infinity, height: .infinity)
            .ignoresSafeArea(edges: .top)
            .tabItem {
                Text("首页")
                Image(systemName: "house.fill")
            }
            .tag(TabType.home)

            Color(.blue)
                .ignoresSafeArea(edges: .top)
                .tabItem {
                    Text("消息")
                    Image(systemName: "message.fill")
                }
                .tag(TabType.message)

            Color(.purple)
                .ignoresSafeArea(edges: .top)
                .tabItem {
                    Text("视频")
                    Image(systemName: "video.fill")
                }
                .tag(TabType.videos)
                .badge(/*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/)

            Color(.brown)
                .ignoresSafeArea(edges: .top)
                .tabItem {
                    Text("设置")
                    Image(systemName: "printer.fill")
                }
                .tag(TabType.videos)

            Color(.cyan)
                .ignoresSafeArea(edges: .top)
                .tabItem {
                    Text("我的")
                    Image(systemName: "iphone.gen3.radiowaves.left.and.right.circle.fill")
                }
                .tag(TabType.videos)
        }
    }
}

#Preview {
    SwitchTab()
}


网站公告

今日签到

点亮在社区的每一天
去签到