как сделать навигационную ссылку содержащей текст и изображение - PullRequest
Новая
       5

как сделать навигационную ссылку содержащей текст и изображение

0 голосов
/ 16 января 2020

Я создаю приложение для рецептов в SwiftUI. Я создал домашний экран с несколькими списками представления, которое я создал в отдельном файле. (см. рисунок, у меня пока нет всех изображений, поэтому у меня одно и то же изображение для всех видов)

screen shot of the running app(working)

Я хочу встроить посмотрите внутрь navigationLink, чтобы при нажатии на A di sh пользователь отображал go на подробном экране. это код, который у меня есть: 

struct MenuTopicView: View {

    var titleText: String
    var foodImageName: String


    var body: some View {

        NavigationLink(destination: RecipeView(recipeName: titleText)) {
            ZStack {
                Image(foodImageName)
                    .resizable()

                VStack {
                    Text(titleText)
                        .foregroundColor(Color.init(hex: "AAAAAA"))
                        .font(.system(size: 30, weight: .semibold))
                    Spacer()
                }
            }
            .frame(width: 189, height: 194)
            .cornerRadius(15)
            .shadow(color: Color.init(hex:"000000"), radius: 7,x: 7, y: 7)
        }
    }
}

но когда я запускаю его, я получаю это:

running app in the simulator(not working

это код основного вида, в котором я создаю этот макет: 

struct ContentView: View {

    private var spacing: CGFloat = 20
    var body: some View {
        VStack {
            Text("First Course")
                .frame(height: 36)
                .font(.system(size: 25, weight: .semibold))

            ScrollView (Axis.Set.horizontal, showsIndicators: false){
                HStack{
                    MenuTopicView(titleText: "Soup", foodImageName: "Soup")
                    MenuTopicView(titleText: "Fish", foodImageName: "Soup")
                }
            }.frame(height: 200)

            Text("Main Course")
                .frame(height: 36)
                .font(.system(size: 25, weight: .semibold))

            ScrollView(Axis.Set.horizontal) {
                HStack {
                    MenuTopicView(titleText: "Steak", foodImageName: "Soup")
                    MenuTopicView(titleText: "Chicken", foodImageName: "Soup")
                }
            }

            Text("Dessert")
                .frame(height: 36)
                .font(.system(size: 25, weight: .semibold))

            ScrollView(Axis.Set.horizontal) {
                HStack {
                    MenuTopicView(titleText: "Ice cream", foodImageName: "Soup")
                    MenuTopicView(titleText: "Pancakes", foodImageName: "Soup")
                }
            }
        }
    }

}

Некоторое время я гуглял, и мне не удалось получить ответ на этот вопрос. У кого-нибудь есть предложения?

Спасибо!

BSM

1 Ответ

2 голосов
/ 16 января 2020

Попробуйте добавить этот модификатор к вашему Image:
.renderingMode(.original)

...