切換語言為:簡體
swiftui中設定建議最多5個tabItem項,多個tabItem項會被自動摺疊起來

swiftui中設定建議最多5個tabItem項,多個tabItem項會被自動摺疊起來

  • 爱糖宝
  • 2024-07-05
  • 2068
  • 0
  • 0

在swiftui中設定底部的選單欄的時候,最多建議設定5個,如果超過了,會被自動摺疊到More中,點選More就會出現類似list的樣式顯示,不是很友好。

最多按照5個預設設定的話,就會正常全部顯示出來:

swiftui中設定建議最多5個tabItem項,多個tabItem項會被自動摺疊起來

測試程式碼:

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


0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.