是否可以更改导航按钮以显示图像而不是蓝色? [英] Is it possible to change a NavigationButton to display Image instead of Blue Color?

问题描述

我正在尝试设置一个 NavigationButton 来显示图像，而不仅仅是一个蓝色按钮.

I'm trying to set a NavigationButton to display an Image, instead of only being a blue-colored button.

目前，我正在显示一个由图像组成的水平、Scrollview.

Currently, I'm displaying a Horizontal, Scrollview, that consists of Images.

那些图像应该指向另一个视图，该视图将呈现在 rootView 之上.

Those Images should lead to another view, which would be rendered above the rootView.

但是，当我将这些图像包裹在 NavigationButton 周围时，这些图像变成了只有蓝色，而不是显示预期的原始图像.

However, when I wrapped those images around a NavigationButton, those images turn out to be only blue, instead of displaying the original image intended.

CategoryRow 组件(ScrollView)

CategoryRow Component (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 的地方)

ContentView (where the CategoryRow is rendered)

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

我希望图像可以用作按钮(确实如此)，但仍显示原始图像，而不是全部为蓝色.

I expect the Images to work as a button (which it did), but still displaying the original image, instead of being all blue.

预期结果和实际结果的图像如下:

Images to the expected result and the actual result are the following:

推荐答案

尝试改变渲染模式

Image(place.imageName)
    .renderingMode(.original)

这篇关于是否可以更改导航按钮以显示图像而不是蓝色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！