ios开发:用wkwebview显示网页内容

一,代码

列表页面,点击跳转:

//
//  ContentView.swift
//  helloworld2
//
//  Created by liuhongdi on 2026/3/28.
//

import SwiftUI
import Alamofire


struct ContentView: View {
    @State private var message = "加载中..."
        // 初始化 ViewModel
        @StateObject private var viewModel = PoemViewModel()
    
         var body: some View {

             NavigationStack {
                 VStack {
                     Text(message)

                     List {
                         if viewModel.isLoading && viewModel.poems.isEmpty {
                             ProgressView("加载中..")
                         }
                         ForEach(viewModel.poems){ poem in
                             NavigationLink(value: poem) {
                                  PoemRow(poem: poem) // 进一步拆分出子视图
                             }
                         }
                     }
                     .navigationTitle("唐诗鉴赏1")
                     .navigationDestination(for: Poem.self) { poem in
                         WebView(urlString: "https://baidu.com")
                     }
                     // 调用逻辑
                     .task{
                          await viewModel.fetchData()
                     }
                     .refreshable{
                          await viewModel.fetchData()
                     }
                 }
             }
         }
}


// 一行元素的view
struct PoemRow: View {
    let poem: Poem
    var body: some View {
        HStack(spacing: 15) {
            AsyncImage(url: URL(string: poem.image)) { image in
                image.resizable().aspectRatio(contentMode: .fit)
            } placeholder: {
                Color.purple.opacity(0.1)
            }
            .frame(width: 60, height: 60)
            .background(Color.purple)
            .cornerRadius(8)
            
            VStack(alignment: .leading){
                Text(poem.title).font(.headline)
                Text(poem.author).font(.subheadline).foregroundColor(.secondary)
            }
        }
    }
}

#Preview {
    ContentView()
}

webview的页面:

import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    // 接收参数
    let urlString: String

    // 创建并返回 WKWebView 实例
    func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
    }

    // 当 SwiftUI 状态更新时,加载 URL
    func updateUIView(_ uiView: WKWebView, context: Context) {
        if let url = URL(string: urlString) {
            let request = URLRequest(url: url)
            uiView.load(request)
        }
    }
}

二,测试效果:

image

 

posted @ 2026-04-05 16:48  刘宏缔的架构森林  阅读(2)  评论(0)    收藏  举报