在 SwiftUI 中增加标签栏项目图标的大小

Posted 2023-02-23

【中文标题】在 SwiftUI 中增加标签栏项目图标的大小

【英文标题】：Increase size of tab bar item icons in SwiftUI

【发布时间】：2019-09-03 21:48:23

【问题描述】：

有没有办法增加标签栏项目图标的大小？.frame(width: 40, height: 40) 没有帮助。

Settings()
    .tabItem 
        VStack 
            Image(systemName: "archivebox")
        
    
    .tag(1)

【参考方案1】：

您可以直接使用这样的字体大小（在 Xcode 11.3 中测试）。

请注意，仅适用于符号图像（SF Symbols 或 .custom SVG 符号），不适用于位图图像。

YourView()
   .tabItem  
      Image(systemName: "heart").font(.system(size: 26)) 
      Text("Offers") 
   

【讨论】：

我注意到在 ios 14 模拟器上运行的 Xcode 12.0 beta 4 (12A8179i) 上，这不再有效。图片都是固定大小的，好像对应旧的.font(.title)。

@Jeremy 你找到 Xcode 12 的解决方案了吗？

@ViktorSec 不，很遗憾。 :(

【参考方案2】：

您可以使用.font() 修饰符来获得更大的图像：

YourView()
    .tabItem 
        Image(systemName: "…").font(.title)
    

遗憾的是，将图像直接推到标签栏顶部时，填充看起来有问题。

【参考方案3】：

可以创建自定义tabView来实现自定义高度

附加的屏幕截图显示了受Gist启发的自定义tabview的结果

struct TabView: View 
    var views: [TabBarItem]
    @State var selectedIndex: Int = 0

    init(_ views: [TabBarItem]) 
        self.views = views
    

    var body: some View 
        ZStack 
            ForEach(views.indices)  i in
                self.views[i].view
                    .opacity(self.selectedIndex == i ? 1 : 0)
            
            GeometryReader  geometry in
                VStack 
                    Spacer()
                    ZStack(alignment: .top) 
                        LinearGradient(gradient: Gradient(colors: [Color.black.opacity(0.3), Color.black.opacity(0.4)]), startPoint: .top, endPoint: .bottom)
                            .frame(height: 70 + geometry.safeAreaInsets.bottom)

                        HStack 
                            ForEach(self.views.indices)  i in
                                Button(action: 
                                    self.selectedIndex = i
                                ) 
                                    VStack 
                                        if self.selectedIndex == i 
                                            self.views[i].image
                                                .foregroundColor(.white)
                                                 .padding(.top,10)
                                                .font(.title)
                                         else 
                                            self.views[i].image
                                                .foregroundColor(Color.white.opacity(0.4))
                                                .padding(.top,10)
                                               .font(.title)
                                        
                                        Text(self.views[i].title)
                                            .foregroundColor(.white)
                                            .font(Font.system(size: 16, weight: .bold))
                                            .padding(.top,10)
                                            .opacity(0.5)
                                    
                                    .frame(maxWidth: .infinity)
                                
                            
                        
                    
                
                .edgesIgnoringSafeArea(.bottom)
                .animation(.easeInOut)
            
        
    


struct TabBarItem 
    var view: AnyView
    var image: Image
    var title: String

    init<V: View>(view: V, image: Image, title: String) 
        self.view = AnyView(view)
        self.image = image
        self.title = title
    



/// Main View
struct ContentView: View 
  var body: some View 
    TabView([
      TabBarItem(view: Text("This is home screen"),
                 image: Image(systemName:"house.fill"),
                 title: "home"),
      TabBarItem(view: Text("2"),
                 image: Image(systemName:"heart.fill"),
                 title: "favorite"),

    ])