ios开发： 列表中显示网络图片

一，代码：

import SwiftUI

struct ContentView: View {
    @State private var message = "加载中..."
    
    var contentList: [[String: Any]] = [
        ["id":1,"title":"夜宿山寺","author":"李白","image":"https://imgs-qn.test.com/ware/sowhatimg/ware/orig/2/39/39653.png"],
        ["id":2,"title":"宿建德江","author":"孟浩然","image":"https://imgs-qn.test.com/ware/sowhatimg/ware/orig/2/39/39651.png"],
        ["id":3,"title":"晓出净慈寺送林子方","author":"杨万里","image":"https://imgs-qn.test.com/ware/slider/1938.png"],
        ["id":4,"title":"望庐山瀑布","author":"李白","image":"https://imgs-qn.test.com/ware/goods/big/2/284/284909.jpg"],
                      ]
    
         var body: some View {

             
             VStack {
                  Text(message)

                         List{
                             ForEach(0..<contentList.count, id: \.self) { index in
                                                let item = contentList[index]
                                                
                                 HStack(spacing: 15) {
                                     // 1. 处理网络图片
                                     if let imageUrlString = item["image"] as? String,
                                        let imageUrl = URL(string: imageUrlString) {
                                         AsyncImage(url: imageUrl) { image in
                                             image.resizable().aspectRatio(contentMode: .fit)
                                         } placeholder: {
                                             Color.gray.opacity(0.2) // 图片加载时的占位色
                                         }
                                         .frame(width: 90, height: 90)
                                         .background(Color.purple)
                                         .cornerRadius(8)
                                     }

                                     // 2. 文本信息
                                     VStack(alignment: .leading, spacing: 5) {
                                         Text(item["title"] as? String ?? "未知标题")
                                             .font(.headline)
                                         Text(item["author"] as? String ?? "未知作者")
                                             .font(.subheadline)
                                             .foregroundColor(.secondary)
                                     }
                                 }
                                 .padding(.vertical, 4)
                                            }
                             }

                     }
             
         }

}

#Preview {
    ContentView()
}

 

二，测试效果：