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