是否可以更改 NavigationButton 以显示图像而不是蓝色?
Is it possible to change a NavigationButton to display Image instead of Blue Color?
我正在尝试设置一个 NavigationButton
来显示图像,而不仅仅是一个蓝色按钮。
目前,我正在显示由图像组成的水平 Scrollview
。
这些图像应该会导致另一个视图,该视图将呈现在 rootView
上方。
但是,当我将这些图像包裹在 NavigationButton
周围时,这些图像变成了蓝色,而不是显示原始图像。
CategoryRow 组件 (ScrollView
)
ScrollView(showsHorizontalIndicator: false) {
HStack(alignment: .top, spacing: 0) {
ForEach(categorizeCountry()) { place in
NavigationButton(destination: PlaceDetail(place: place)) {
Image(place.imageName)
.resizable()
.clipShape(Rectangle())
.frame(width: 225, height: 150)
.cornerRadius(8)
.padding(.leading, 2)
.padding(.trailing, 2)
}
}
}
}
ContentView(呈现 CategoryRow 的地方)
var body: some View {
NavigationView {
List {
FeaturedCard(places: fiveRandomPlaces)
CategoryRow(label: "Australia")
CategoryRow(label: "Japan")
CategoryRow(label: "Singapore")
CategoryRow(label: "Indonesia")
ForEach(store.places) { place in
PlaceCell(place: place)
}
}
.navigationBarTitle(Text("Been There"))
.navigationBarItems(trailing: Button(action: sortPlaces) {
Text("Sort")
})
.listStyle(.grouped)
}
}
我希望图像能像按钮一样工作(确实如此),但仍显示原始图像,而不是全蓝。
图片到预期结果和实际结果如下:
尝试改变渲染模式
Image(place.imageName)
.renderingMode(.original)
我正在尝试设置一个 NavigationButton
来显示图像,而不仅仅是一个蓝色按钮。
目前,我正在显示由图像组成的水平 Scrollview
。
这些图像应该会导致另一个视图,该视图将呈现在 rootView
上方。
但是,当我将这些图像包裹在 NavigationButton
周围时,这些图像变成了蓝色,而不是显示原始图像。
CategoryRow 组件 (ScrollView
)
ScrollView(showsHorizontalIndicator: false) {
HStack(alignment: .top, spacing: 0) {
ForEach(categorizeCountry()) { place in
NavigationButton(destination: PlaceDetail(place: place)) {
Image(place.imageName)
.resizable()
.clipShape(Rectangle())
.frame(width: 225, height: 150)
.cornerRadius(8)
.padding(.leading, 2)
.padding(.trailing, 2)
}
}
}
}
ContentView(呈现 CategoryRow 的地方)
var body: some View {
NavigationView {
List {
FeaturedCard(places: fiveRandomPlaces)
CategoryRow(label: "Australia")
CategoryRow(label: "Japan")
CategoryRow(label: "Singapore")
CategoryRow(label: "Indonesia")
ForEach(store.places) { place in
PlaceCell(place: place)
}
}
.navigationBarTitle(Text("Been There"))
.navigationBarItems(trailing: Button(action: sortPlaces) {
Text("Sort")
})
.listStyle(.grouped)
}
}
我希望图像能像按钮一样工作(确实如此),但仍显示原始图像,而不是全蓝。
图片到预期结果和实际结果如下:
尝试改变渲染模式
Image(place.imageName)
.renderingMode(.original)