You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让SwiftUI视图在Apple iPhone实时预览设备中正常显示?

代码在Xcode内置预览正常,但iPhone实时预览无法显示内容

我的代码在Xcode内置预览窗口可正常运行,但在Apple iPhone的Xcode实时预览设备中无法显示。查阅资料后,我认为这与空数组有关。以下是相关代码:

EventModel.swift

import Foundation

class EventData: Codable, Identifiable {
    var event_image: String
    var event_name: String
    //var event_date: String
    var image: String
    var fname: String
    var lname: String
}

EventView.swift

import SwiftUI

struct EventView: View {
    @State var eventData: [EventData] = []
    
    let gradient = LinearGradient(
            gradient: Gradient(stops: [
                .init(color: .black, location: 0),
                .init(color: .clear, location: 0.4)
            ]),
            startPoint: .bottom,
            endPoint: .top
    )
    
    var body: some View {
        VStack {
            HStack {
                Text("Events").padding(.horizontal).font(.custom("Karla-Bold", size: 25))
                Spacer()
                Button {
                    print("View more events")
                } label: {
                    Text("view more").padding(.horizontal)
                }
            }.padding(EdgeInsets(top: 15, leading: 0, bottom: -10, trailing: 0))
            ScrollView(.horizontal, showsIndicators: false) {
                //Text("Test")
                HStack {
                    ForEach(eventData) { (events) in
                        HStack(spacing:0) {
                            AsyncImage(url: URL(string: "http://localhost/imagefiles/\(events.event_image)")) { phase in
                                switch phase {
                                case .empty:
                                    ProgressView()
                                case .success(let image):
                                    image
                                        .resizable()
                                        //.cornerRadius(11)
                                        .frame(width:230, height: 130)
                                case .failure:
                                    Image(systemName: "wifi.slash")
                                @unknown default:
                                    EmptyView()
                                }
                            } .overlay {
                                ZStack(alignment: .bottom) {
                                    AsyncImage(url: URL(string: "http://localhost/imagefiles/\(events.event_image)")) { phase in
                                        switch phase {
                                        case .empty:
                                            ProgressView()
                                        case .success(let image):
                                            image
                                                .resizable()
                                                .cornerRadius(11)
                                                .frame(width:230, height: 130)
                                        case .failure:
                                            Image(systemName: "wifi.slash")
                                        @unknown default:
                                            EmptyView()
                                        }
                                    }.blur(radius: 20)
                                        .padding(EdgeInsets(top: -20, leading: -20, bottom: 0, trailing: -20))
                                        .clipped()
                                        .mask(gradient)
                                    
                                    gradient
                                    //Profile Picture Here
                                    HStack {
                                        AsyncImage(
                                            url: URL(string: "http://localhost/imagefiles/\(events.image)"),
                                            transaction: Transaction(animation: .easeInOut)
                                        ) { phase in
                                            switch phase {
                                            case .empty:
                                                ProgressView()
                                            case .success(let image):
                                                image
                                                    .resizable()
                                                    .transition(.scale(scale: 0.1, anchor: .center))
                                            case .failure:
                                                Image(systemName: "wifi.slash")
                                            @unknown default:
                                                EmptyView()
                                            }
                                        }
                                        .frame(width:30, height: 30)
                                        .background(Color.gray)
                                        .clipShape(Circle())

                                        VStack(alignment: .leading) {
                                            // Event Name
                                            Text("\(events.event_name)").font(.custom("Karla-ExtraBold", size: 15)).foregroundColor(Color.white)
                                            
                                            // Organizer Name
                                            HStack {
                                                Text("Organized by").font(.custom("Karla-Regular", size: 10)).foregroundColor(Color.white)
                                                Text("\(events.fname) \(events.lname)").font(.custom("Karla-ExtraBold", size: 10)).foregroundColor(Color.white)
                                                
                                            }
                                        }
                                    }.padding(EdgeInsets(top: 0, leading: 0, bottom: 15, trailing: 0))
                                }//add here
                                
                            }
                            .clipShape(RoundedRectangle(cornerRadius: 11    , style: .continuous))
                        }
                    }
                }.onAppear(perform: {
                    // send request to server
                    
                    guard let eventsUrl: URL = URL(string: "http://localhost/phpfiles/events.php") else {
                        print("invalid URL")
                        return
                    }
                    
                    // Pulling Status Content
                    var eventsUrlRequest: URLRequest = URLRequest(url: eventsUrl)
                    eventsUrlRequest.httpMethod = "GET"
                    
                    URLSession.shared.dataTask(with: eventsUrlRequest, completionHandler: { (data, response, error) in
                        // check if response is okay
                        
                        guard let data = data else {
                            print("invalid response")
                            return
                        }
                        
                        // convert JSON response into class model as an array
                        do {
                            eventData = try JSONDecoder().decode([EventData].self, from: data)
                        } catch {
                            print(error)
                        }
                        
                    }).resume()
                    
                })
            }.padding()
        }.background(Color.mainColor)
    }
}

struct EventView_Previews: PreviewProvider {
    static var previews: some View {
        EventView()
    }
}

iPhone实时预览设备上的视图效果如下,HTTP数据请求未显示(仅Xcode内置预览屏幕中正常显示):
iPhone实时预览效果

内容的提问来源于stack exchange,提问作者programmer12

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.16 00:12:01