SwiftUI:在NavigationStack中为TabView使用资源中的图像

Question

NavigationStack {
TabView(selection: $selection) {
HomeView()
.tabItem {
Image(systemName: "rectangle.grid.1x2.fill")
.padding(.top, 8)
}
.tag(0)

ChatsView()
.tabItem {
Image(systemName: "message")
.padding(.top, 8)
}
.tag(1)
}
.accentColor(.black)
}

我想使用资产中的图像而不是Image(systemName: "message")。当我写Image("myImage")时，它确实从资源中加载图像，但它的大小不一样，它太大了。所以我尝试了Image("myImage").resizable().frame(width: 20, height: 20)。但是调整大小在这里不起作用，大小保持不变，我不知道为什么。接下来我要做的就是缩小资产图像。这确实有效，但是使用这种方法显示的图像非常像素化。所以也不是一个选项。

我该怎么做?

Answer 1

试试这个:

struct CustomTabBar: View {
@Binding var selection: Int

var body: some View {
HStack {
Button(action: {
self.selection = 0
}) {
Image(systemName: "rectangle.grid.1x2.fill")
.font(.system(size: 60))
.foregroundColor(self.selection == 0 ? .black : .gray)
}

Button(action: {
self.selection = 1
}) {
Image(systemName: "message")
.font(.system(size: 60))
.foregroundColor(self.selection == 1 ? .black : .gray)
}
}
.padding()
}
}
struct ContentView: View {
@State private var selection = 0

var body: some View {
VStack {
TabView(selection: self.$selection) {
HomeView()
.tag(0)
ChatsView()
.tag(1)
}
CustomTabBar(selection: self.$selection)
}
}
}

Answer 2

我必须稍微调整一下NexusUA的答案才能使它工作:

struct CustomTabBar: View {
@Binding var selection: Int

var body: some View {
HStack {
Button(action: {
self.selection = 0
}) {
Image(systemName: "rectangle.grid.1x2.fill")
.font(.system(size: 60))
.foregroundColor(self.selection == 0 ? .black : .gray)
}

Button(action: {
self.selection = 1
}) {
Image(systemName: "message")
.font(.system(size: 60))
.foregroundColor(self.selection == 1 ? .black : .gray)
}
}
.padding()
}
}
struct ContentView: View {
@State private var selection = 0

var body: some View {
VStack {
TabView(selection: self.$selection) {
HomeView()
.tag(0)
ChatsView()
.tag(1)
}
// add this
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
.navigationBarHidden(true)
CustomTabBar(selection: self.$selection)
}
}
}