在SwiftUI中增加选项卡栏图标的大小

Question

有没有办法增加选项卡栏图标的大小？
.frame(width: 40, height: 40)无效。

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

- arakweker

Answer 1

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

请注意，这仅适用于符号图像（SF Symbols或自定义SVG符号），不适用于位图图像。

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

- ali6p

---

我注意到在运行于iOS 14模拟器上的Xcode 12.0 beta 4 (12A8179i)中，这个功能不再生效。图片全部是固定尺寸的，似乎对应了旧的.font(.title)设置。 - Jeremy

@Jeremy，你找到Xcode 12的解决方案了吗？ - Viktor Sec

@ViktorSec 不好意思，没有。:( - Jeremy

这只适用于 Pre xcode 12，之后的版本似乎无法调整 TabItem 的标签或图像大小。无论我做什么，它都是固定的。 - Matt Pengelly

Answer 2

你可以使用.font()修改器来获得更大的图像：

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

不幸的是，如果将图像推到选项卡栏的顶部，填充看起来会出现问题。

- Drarok

Answer 3

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

附带屏幕截图显示了自定义tabview的结果，这是受到Gist启发的。

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"),

    ])
  }
}

- Jawad Ali

---

很棒的答案！关于iOS 15，.animation(.easeInOut)已经被弃用了，所以使用withAnimation(.easeInOut) { self.selectedIndex = i }闭包类型的显式动画来实现相同的过渡效果。在Button的action闭包中使用它。 - hamsternik