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