Question

我正在尝试SwiftUI，并且正在构建一个假期应用程序，您可以在其中查看天气情况以及在那里住了多久的情况。问题是，当我将HolidayCard放在NavigationLink中时，所有图像都会消失。

This is the code and the preview with navigation link

struct ContentView: View {
var body: some View {
    NavigationView {
        ScrollView {
            ForEach(holidayData, id: \.id) { holiday in
                NavigationLink(destination: HolidayDetails(holiday: holiday)) {
                    HolidayCard(holiday: holiday)
                }
            }
        }
        .navigationBarTitle(Text("My holidays"), displayMode: .large)
    }
}

}

This is my HolidayCard and how should it look like

var body: some View {
    HStack {
        VStack(alignment: .leading, spacing: 12) {
            Spacer()

            holiday.weatherImage
                .resizable()
                .frame(width: 48, height: 48)

            VStack(alignment: .leading, spacing: 0) {
                Text("\(holiday.city),")
                    .font(.headline)
                    .fontWeight(.bold)
                Text(holiday.country)
                    .font(.subheadline)
            }

            Text("\(holiday.season.rawValue) · \(holiday.duration) days")
                .font(.headline)
                .fontWeight(.light)
        }
        .foregroundColor(Color.white)
        .padding()
        .background(Color.black.opacity(0.5))

        Spacer()
    }
    .frame(width: UIScreen.main.bounds.width - 20, height: 200)
    .background(
        holiday.cityImage
            .resizable()
            .aspectRatio(contentMode: .fill)
    )
    .cornerRadius(10)
    .padding(10)
        .padding(.top, 30)
    .shadow(color: Color.gray, radius: 6, x: 3, y: 6)
}

假日详细信息

struct HolidayDetails: View {
var holiday: Holiday

@State var moreDescription = false

var body: some View {
    ScrollView {
        VStack {
            ZStack(alignment: .bottomLeading) {
                holiday.cityImage
                .resizable()
                    .frame(height: moreDescription ? UIScreen.main.bounds.height * 0.3 : UIScreen.main.bounds.height * 0.6)
                    .aspectRatio(contentMode: .fill)
                    .frame(width: UIScreen.main.bounds.width)
                    .animation(.easeInOut)

                HStack {
                    VStack(alignment: .leading, spacing: 12) {
                        holiday.weatherImage
                            .resizable()
                            .frame(width: 64, height: 64)

                        VStack(alignment: .leading, spacing: 0) {
                            Text("\(holiday.city),")
                                .font(.largeTitle)
                                .fontWeight(.bold)
                            Text(holiday.country)
                                .font(.title)
                        }

                        Text("\(holiday.season.rawValue) · \(holiday.duration) days")
                            .font(.headline)
                            .fontWeight(.light)
                    }
                    .foregroundColor(Color.white)
                    .animation(.easeInOut)
                    .padding()
                }
            }

            VStack(alignment: .center, spacing: 12) {
                Text(holiday.description)
                    .font(moreDescription ? .subheadline : .caption)
                    .lineLimit(moreDescription ? 99 : 2)
                    .opacity(moreDescription ? 1 : 0.5)
                    .animation(.easeInOut)
                    .padding()

                Button(action: {
                    withAnimation(.easeInOut(duration: 3)) {
                        self.moreDescription.toggle()
                    }
                }) {
                    Text(moreDescription ? "Less.." : "More..")
                        .font(.caption)
                        .padding(.vertical, moreDescription ? 10 : 5)
                        .padding(.horizontal, moreDescription ? 30 : 15)
                        .background(Color.blue)
                        .foregroundColor(Color.white)
                        .animation(.easeInOut)
                }
                .cornerRadius(10)
            }


            Spacer()
        }
    }
}
}

假日模式

import Foundation
import SwiftUI

struct Holiday: Hashable, Codable, Identifiable {
    var id: Int
    var city: String
    var country: String
    var description: String
    var duration: Int
    var weather: Weather
    var season: Season
}

extension Holiday {
    var weatherImage: Image {
        Image("\(self.weather)")
    }

    var cityImage: Image {
        Image(self.city
        .replacingOccurrences(of: " ", with: "")
        .lowercased())
    }
}

enum Weather: String, CaseIterable, Hashable, Codable {
    case cloudy = "cloudy"
    case rainy = "rainy"
    case snowy = "snowy"
    case sunny = "sunny"
}

enum Season: String, CaseIterable, Hashable, Codable {
    case summer = "Summer"
    case winter = "Winter"
    case spring = "Spring"
    case autumn = "Autumn"
}

这就是我度假的方式

    import Foundation

let holidayData: [Holiday] = load("holidayData.json")

func load<T: Decodable>(_ filename: String, as type: T.Type = T.self) -> T {
    let data: Data

    guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
        else {
            fatalError("Couldn't find \(filename) in main bundle.")
    }

    do {
        data = try Data(contentsOf: file)
    } catch {
        fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
    }

    do {
        let decoder = JSONDecoder()
        return try decoder.decode(T.self, from: data)
    } catch {
        fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
    }
}

没有导航链接，背景图像和天气图像都是可见的。

Answer 1

尝试将.renderingMode（.original）放入图片中

Answer 2

尝试将此参数添加到您的NaviguationLink或Button

.buttonStyle(PlainButtonStyle())

在NavigationLink中，SwiftUI图像消失

2 个答案: