• HomeView/主页 的实现

    1. 创建数据模型

      1.1 创建货币模型 CoinModel.swift

    1. import Foundation
    2.  
    3. // GoinGecko API info
    4. /*
    5.  URL:
    6.  https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=250&page=1&sparkline=true&price_change_percentage=24h&locale=en&precision=2
    7.  
    8.  JSON Response
    9.  {
    10.      "id": "bitcoin",
    11.      "symbol": "btc",
    12.      "name": "Bitcoin",
    13.      "image": "https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579",
    14.      "current_price": 29594.97,
    15.      "market_cap": 575471925043,
    16.      "market_cap_rank": 1,
    17.      "fully_diluted_valuation": 621468559135,
    18.      "total_volume": 17867569837,
    19.      "high_24h": 29975,
    20.      "low_24h": 28773,
    21.      "price_change_24h": 671.94,
    22.      "price_change_percentage_24h": 2.32321,
    23.      "market_cap_change_24h": 13013242516,
    24.      "market_cap_change_percentage_24h": 2.31364,
    25.      "circulating_supply": 19445731,
    26.      "total_supply": 21000000,
    27.      "max_supply": 21000000,
    28.      "ath": 69045,
    29.      "ath_change_percentage": -57.13833,
    30.      "ath_date": "2021-11-10T14:24:11.849Z",
    31.      "atl": 67.81,
    32.      "atl_change_percentage": 43542.79212,
    33.      "atl_date": "2013-07-06T00:00:00.000Z",
    34.      "roi": null,
    35.      "last_updated": "2023-08-02T07:45:52.912Z",
    36.      "sparkline_in_7d": {
    37.        "price": [
    38.          29271.02433564558,
    39.          29245.370873051394
    40.        ]
    41.      },
    42.      "price_change_percentage_24h_in_currency": 2.3232080710152045
    43.    }
    44.  */
    45.  
    46. /// 硬币模型
    47. struct CoinModel: Identifiable, Codable{
    48.     let id, symbol, name: String
    49.     let image: String
    50.     let currentPrice: Double
    51.     let marketCap, marketCapRank, fullyDilutedValuation, totalVolume: Double?
    52.     let high24H, low24H: Double?
    53.     let priceChange24H, priceChangePercentage24H: Double?
    54.     let marketCapChange24H: Double?
    55.     let marketCapChangePercentage24H: Double?
    56.     let circulatingSupply, totalSupply, maxSupply, ath: Double?
    57.     let athChangePercentage: Double?
    58.     let athDate: String?
    59.     let atl, atlChangePercentage: Double?
    60.     let atlDate: String?
    61.     let lastUpdated: String?
    62.     let sparklineIn7D: SparklineIn7D?
    63.     let priceChangePercentage24HInCurrency: Double?
    64.     let currentHoldings: Double?
    65.     
    66.     enum CodingKeys: String, CodingKey{
    67.         case id, symbol, name, image
    68.         case currentPrice = "current_price"
    69.         case marketCap = "market_cap"
    70.         case marketCapRank = "market_cap_rank"
    71.         case fullyDilutedValuation = "fully_diluted_valuation"
    72.         case totalVolume = "total_volume"
    73.         case high24H = "high_24h"
    74.         case low24H = "low_24h"
    75.         case priceChange24H = "price_change_24h"
    76.         case priceChangePercentage24H = "price_change_percentage_24h"
    77.         case marketCapChange24H = "market_cap_change_24h"
    78.         case marketCapChangePercentage24H = "market_cap_change_percentage_24h"
    79.         case circulatingSupply = "circulating_supply"
    80.         case totalSupply = "total_supply"
    81.         case maxSupply = "max_supply"
    82.         case ath
    83.         case athChangePercentage = "ath_change_percentage"
    84.         case athDate = "ath_date"
    85.         case atl
    86.         case atlChangePercentage = "atl_change_percentage"
    87.         case atlDate = "atl_date"
    88.         case lastUpdated = "last_updated"
    89.         case sparklineIn7D = "sparkline_in_7d"
    90.         case priceChangePercentage24HInCurrency = "price_change_percentage_24h_in_currency"
    91.         case currentHoldings
    92.     }
    93.     
    94.     // 更新 currentHoldings
    95.     func updateHoldings(amount: Double) -> CoinModel{
    96.         return CoinModel(id: id, symbol: symbol, name: name, image: image, currentPrice: currentPrice, marketCap: marketCap, marketCapRank: marketCapRank, fullyDilutedValuation: fullyDilutedValuation, totalVolume: totalVolume, high24H: high24H, low24H: low24H, priceChange24H: priceChange24H, priceChangePercentage24H: priceChangePercentage24H, marketCapChange24H: marketCapChange24H, marketCapChangePercentage24H: marketCapChangePercentage24H, circulatingSupply: circulatingSupply, totalSupply: totalSupply, maxSupply: maxSupply, ath: ath, athChangePercentage: athChangePercentage, athDate: athDate, atl: atl, atlChangePercentage: atlChangePercentage, atlDate: atlDate, lastUpdated: lastUpdated, sparklineIn7D: sparklineIn7D, priceChangePercentage24HInCurrency: priceChangePercentage24HInCurrency, currentHoldings: amount)
    97.     }
    98.     
    99.     // 当前 currentHoldings: 当前持有量  currentPrice: 当前价格
    100.     var currentHoldingsValue: Double{
    101.         return (currentHoldings ?? 0) * currentPrice
    102.     }
    103.     
    104.     // 排名
    105.     var rank: Int{
    106.         return Int(marketCapRank ?? 0)
    107.     }
    108.     
    109. }
    110.  
    111. // MARK: - SparklineIn7D
    112. struct SparklineIn7D: Codable{
    113.     let price: [Double]?
    114. }

      1.2 创建统计数据模型 StatisticModel.swift

    1. import Foundation
    2.  
    3. /// 统计数据模型
    4. struct StatisticModel: Identifiable{
    5.     let id = UUID().uuidString
    6.     let title: String
    7.     let value: String
    8.     let percentageChange: Double?
    9.     
    10.     init(title: String, value: String, percentageChange: Double? = nil){
    11.         self.title = title
    12.         self.value = value
    13.         self.percentageChange = percentageChange
    14.     }
    15. }

      1.3 创建市场数据模型 MarketDataModel.swift

    1. import Foundation
    2.  
    3. // JSON data:
    4. /*
    5.  
    6.  URL: https://api.coingecko.com/api/v3/global
    7.  
    8.  JSON Response:
    9.  {
    10.    "data": {
    11.      "active_cryptocurrencies": 10034,
    12.      "upcoming_icos": 0,
    13.      "ongoing_icos": 49,
    14.      "ended_icos": 3376,
    15.      "markets": 798,
    16.      "total_market_cap": {
    17.        "btc": 41415982.085551225,
    18.        "eth": 660249629.9804014,
    19.        "ltc": 14655556681.638193,
    20.        "bch": 5134174420.757854,
    21.        "bnb": 4974656759.412051,
    22.        "eos": 1687970651664.1853,
    23.        "xrp": 1955098545449.6555,
    24.        "xlm": 8653816219993.665,
    25.        "link": 164544407719.89197,
    26.        "dot": 243138384158.18213,
    27.        "yfi": 188969825.57739097,
    28.        "usd": 1208744112847.1863,
    29.        "aed": 4439723170208.301,
    30.        "ars": 342300135587211.5,
    31.        "aud": 1852168274068.648,
    32.        "bdt": 131985176291313.28,
    33.        "bhd": 455706200496.2936,
    34.        "bmd": 1208744112847.1863,
    35.        "brl": 5923450525007.624,
    36.        "cad": 1621798568577.5525,
    37.        "chf": 1055975779400.883,
    38.        "clp": 1038432067347017.2,
    39.        "cny": 8719154783611.906,
    40.        "czk": 26637819261281.18,
    41.        "dkk": 8191626216674.328,
    42.        "eur": 1099398702910.807,
    43.        "gbp": 947401548208.496,
    44.        "hkd": 9438393793079.348,
    45.        "huf": 426215232621189.9,
    46.        "idr": 18399550169412116,
    47.        "ils": 4468853903327.898,
    48.        "inr": 100074962676574.22,
    49.        "jpy": 172903189967437.97,
    50.        "krw": 1592952743697798.8,
    51.        "kwd": 371735955720.91144,
    52.        "lkr": 390986477316809.3,
    53.        "mmk": 2534052004053905.5,
    54.        "mxn": 20694025572854.312,
    55.        "myr": 5532421804501.558,
    56.        "ngn": 907911878041781.4,
    57.        "nok": 12320972908562.197,
    58.        "nzd": 1993476504581.048,
    59.        "php": 68066798482650.87,
    60.        "pkr": 342404126260727.94,
    61.        "pln": 4869997394570.292,
    62.        "rub": 115933647966061.98,
    63.        "sar": 4534644636646.075,
    64.        "sek": 12833723369976.055,
    65.        "sgd": 1625841817635.0283,
    66.        "thb": 42306043949651.69,
    67.        "try": 32662320794122.848,
    68.        "twd": 38455675399008.88,
    69.        "uah": 44568641287237.47,
    70.        "vef": 121031548019.38873,
    71.        "vnd": 28690182404226572,
    72.        "zar": 22711359059990.625,
    73.        "xdr": 902640544965.6523,
    74.        "xag": 52235006540.929985,
    75.        "xau": 625126192.8411788,
    76.        "bits": 41415982085551.23,
    77.        "sats": 4141598208555122.5
    78.      },
    79.      "total_volume": {
    80.        "btc": 1370301.588278819,
    81.        "eth": 21845217.01679708,
    82.        "ltc": 484898138.0297936,
    83.        "bch": 169870832.6831974,
    84.        "bnb": 164592983.56086707,
    85.        "eos": 55848702565.24502,
    86.        "xrp": 64686976069.70232,
    87.        "xlm": 286322755462.7357,
    88.        "link": 5444165558.484416,
    89.        "dot": 8044549403.54382,
    90.        "yfi": 6252312.249666742,
    91.        "usd": 39992869763.07196,
    92.        "aed": 146894010604.11282,
    93.        "ars": 11325444812447.17,
    94.        "aud": 61281394280.91332,
    95.        "bdt": 4366901075233.5366,
    96.        "bhd": 15077631843.636286,
    97.        "bmd": 39992869763.07196,
    98.        "brl": 195985058273.93372,
    99.        "cad": 53659313204.24844,
    100.        "chf": 34938330925.19639,
    101.        "clp": 34357874413455.105,
    102.        "cny": 288484566748.94366,
    103.        "czk": 881346866690.6755,
    104.        "dkk": 271030598576.85486,
    105.        "eur": 36375034778.56504,
    106.        "gbp": 31346011391.598164,
    107.        "hkd": 312281524044.0637,
    108.        "huf": 14101884847328.004,
    109.        "idr": 608773027974562.1,
    110.        "ils": 147857838765.40222,
    111.        "inr": 3311110189766.445,
    112.        "jpy": 5720726731565.593,
    113.        "krw": 52704911602318.8,
    114.        "kwd": 12299367174.065407,
    115.        "lkr": 12936295697541.31,
    116.        "mmk": 83842403610359.19,
    117.        "mxn": 684688728418.6284,
    118.        "myr": 183047364905.5799,
    119.        "ngn": 30039444336438.703,
    120.        "nok": 407655400054.68567,
    121.        "nzd": 65956760720.56524,
    122.        "php": 2252078482098.112,
    123.        "pkr": 11328885479018.625,
    124.        "pln": 161130192467.93414,
    125.        "rub": 3835815401278.992,
    126.        "sar": 150034610673.73703,
    127.        "sek": 424620415401.04956,
    128.        "sgd": 53793089353.60598,
    129.        "thb": 1399750441707.5242,
    130.        "try": 1080675328876.8026,
    131.        "twd": 1272355994571.0083,
    132.        "uah": 1474611414916.4841,
    133.        "vef": 4004486049.3763947,
    134.        "vnd": 949251968366005,
    135.        "zar": 751434828409.7075,
    136.        "xdr": 29865035431.401863,
    137.        "xag": 1728263071.944928,
    138.        "xau": 20683112.455367908,
    139.        "bits": 1370301588278.819,
    140.        "sats": 137030158827881.9
    141.      },
    142.      "market_cap_percentage": {
    143.        "btc": 46.96554813023725,
    144.        "eth": 18.20564615641025,
    145.        "usdt": 6.9030113487818845,
    146.        "bnb": 3.0917977469405105,
    147.        "xrp": 2.6976159248858225,
    148.        "usdc": 2.161451122645245,
    149.        "steth": 1.2093198987489995,
    150.        "doge": 0.8556120003835122,
    151.        "ada": 0.8462977860840838,
    152.        "sol": 0.7808186900563315
    153.      },
    154.      "market_cap_change_percentage_24h_usd": 0.3274584437097279,
    155.      "updated_at": 1691478601
    156.    }
    157.  }
    158.  
    159.  */
    160.  
    161. // MARK: - Welcome
    162. struct GlobalData: Codable {
    163.     let data: MarketDataModel?
    164. }
    165.  
    166. // MARK: - 市场数据模型
    167. struct MarketDataModel: Codable {
    168.     let totalMarketCap, totalVolume, marketCapPercentage: [String: Double]
    169.     let marketCapChangePercentage24HUsd: Double
    170.     
    171.     enum CodingKeys: String, CodingKey{
    172.         // 总市值
    173.         case totalMarketCap = "total_market_cap"
    174.         case totalVolume = "total_volume"
    175.         case marketCapPercentage = "market_cap_percentage"
    176.         case marketCapChangePercentage24HUsd = "market_cap_change_percentage_24h_usd"
    177.     }
    178.     
    179.     // 总市值
    180.     var marketCap: String{
    181.         // 取指定 key 的值 : usd
    182.         if let item = totalMarketCap.first(where: {$0.key == "usd"}) {
    183.             return "$" + item.value.formattedWithAbbreviations()
    184.         }
    185.         return ""
    186.     }
    187.     
    188.     // 24 小时交易量
    189.     var volume: String {
    190.         if let item = totalVolume.first(where: {$0.key == "usd"}){
    191.             return "$" + item.value.formattedWithAbbreviations()
    192.         }
    193.         return ""
    194.     }
    195.     
    196.     // 比特币占有总市值
    197.     var btcDominance: String {
    198.         if let item = marketCapPercentage.first(where: {$0.key == "btc"}){
    199.             return item.value.asPercentString()
    200.         }
    201.         return ""
    202.     }
    203. }

      1.4 创建核心数据库文件 PortfolioContainer.xcdatamodeld，添加参数如图:

    2. 创建工具管理类

      2.1 创建网络请求管理器 NetworkingManager.swift

    1. import Foundation
    2. import Combine
    3.  
    4. /// 网络请求管理器
    5. class NetworkingManager{
    6.     /// 错误状态
    7.     enum NetworkingError: LocalizedError{
    8.         case badURLResponse(url: URL)
    9.         case unknown
    10.         var errorDescription: String?{
    11.             switch self {
    12.             case .badURLResponse(url: let url): return "[🔥] Bad response from URL: \(url)"
    13.             case .unknown: return "[⚠️] Unknown error occured"
    14.             }
    15.         }
    16.     }
    17.     
    18.     /// 下载数据通用方法
    19.     static func downLoad(url: URL) -> AnyPublisher<Data, any Error>{
    20.         return URLSession.shared.dataTaskPublisher(for: url)
    21.         // 默认执行的操作，确保在后台执行线程上
    22.         //.subscribe(on: DispatchQueue.global(qos: .default))
    23.             .tryMap({ try handleURLResponse(output: $0, url: url) })
    24.         //.receive(on: DispatchQueue.main)
    25.         // 重试次数
    26.             .retry(3)
    27.             .eraseToAnyPublisher()
    28.     }
    29.     
    30.     /// 返回状态/数据通用方法 throws: 抛出异常
    31.     static func handleURLResponse(output: URLSession.DataTaskPublisher.Output, url: URL)throws -> Data{
    32.         guard let response = output.response as? HTTPURLResponse,
    33.               response.statusCode >= 200 && response.statusCode < 300 else {
    34.             // URLError(.badServerResponse)
    35.             throw NetworkingError.badURLResponse(url: url)
    36.         }
    37.         return output.data
    38.     }
    39.     
    40.     /// 返回完成/失败通用方法
    41.     static func handleCompletion(completion: Subscribers.Completion<Error>){
    42.         switch completion{
    43.         case .finished:
    44.             break
    45.         case .failure(let error):
    46.             print(error.localizedDescription)
    47.             break
    48.         }
    49.     }
    50. }

      2.2 创建本地文件管理器 LocalFileManager.swift

    1. import Foundation
    2. import SwiftUI
    3.  
    4. /// 本地文件管理器
    5. class LocalFileManager{
    6.     // 单例模式
    7.     static let instance = LocalFileManager()
    8.     // 保证应用程序中只有一个实例并且只能在内部实例化
    9.     private init() {}
    10.     
    11.     // 保存图片
    12.     func saveImage(image: UIImage, imageName: String, folderName: String) {
    13.         // 创建文件夹路径
    14.         createFolderIfNeeded(folderName: folderName)
    15.         
    16.         // 获取图片的路径
    17.         guard
    18.             let data = image.pngData(),
    19.             let url  = getURLForImage(imageName: imageName, folderName: folderName)
    20.         else { return }
    21.         
    22.         // 保存文件到指定的文件夹
    23.         do{
    24.             try data.write(to: url)
    25.         }catch let error{
    26.             print("Error saving image. Image name \(imageName).| \(error.localizedDescription)")
    27.         }
    28.     }
    29.     
    30.     // 获取图片
    31.     func getImage(imageName: String, folderName: String) -> UIImage?{
    32.         guard
    33.             let url = getURLForImage(imageName: imageName, folderName: folderName),
    34.             FileManager.default.fileExists(atPath: url.path)else {
    35.             return nil
    36.         }
    37.         return UIImage(contentsOfFile: url.path)
    38.     }
    39.     
    40.     /// 创建文件夹路径
    41.     private func createFolderIfNeeded(folderName: String){
    42.         guard let url = getURLForFolder(folderName: folderName) else { return }
    43.         if !FileManager.default.fileExists(atPath: url.path){
    44.             do {
    45.                 try  FileManager.default.createDirectory(at: url, withIntermediateDirectories: true)
    46.             } catch let error {
    47.                 print("Error creating directory. Folder name \(folderName).| \(error.localizedDescription)")
    48.             }
    49.         }
    50.     }
    51.     
    52.     /// 获取文件夹路径
    53.     private func getURLForFolder(folderName: String) -> URL? {
    54.         guard let url = FileManager.default.urls(for: .cachesDirectory, in: .userDomainMask).first else { return nil}
    55.         return url.appendingPathComponent(folderName)
    56.     }
    57.     
    58.     /// 获取图片的路径
    59.     private func getURLForImage(imageName: String, folderName: String) -> URL?{
    60.         guard let folderURL = getURLForFolder(folderName: folderName) else { return nil }
    61.         return folderURL.appendingPathComponent(imageName + ".png")
    62.     }
    63. }

      2.3 创建触觉管理器 HapticManager.swift

    1. import Foundation
    2. import SwiftUI
    3.  
    4. /// 触觉管理器
    5. class HapticManager{
    6.     
    7.     /// 通知反馈生成器器
    8.     static private let generator = UINotificationFeedbackGenerator()
    9.     
    10.     /// 通知: 反馈类型
    11.     static func notification(type: UINotificationFeedbackGenerator.FeedbackType){
    12.         generator.notificationOccurred(type)
    13.     }
    14. }

    3. 创建扩展类

      3.1 创建颜色扩展类 Color.swift

    1. import Foundation
    2. import SwiftUI
    3.  
    4. /// 扩展类 颜色
    5. extension Color{
    6.      static let theme  = ColorTheme()
    7.      static let launch = LaunchTheme()
    8. }
    9.  
    10. /// 颜色样式
    11. struct ColorTheme{
    12.     let accent     = Color("AccentColor")
    13.     let background = Color("BackgroundColor")
    14.     let green      = Color("GreenColor")
    15.     let red        = Color("RedColor")
    16.     let secondaryText = Color("SecondaryTextColor")
    17. }
    18.  
    19. /// 颜色样式2
    20. struct ColorTheme2{
    21.     let accent     = Color(#colorLiteral(red: 0, green: 0.9914394021, blue: 1, alpha: 1))
    22.     let background = Color(#colorLiteral(red: 0.09019608051, green: 0, blue: 0.3019607961, alpha: 1))
    23.     let green      = Color(#colorLiteral(red: 0, green: 0.5603182912, blue: 0, alpha: 1))
    24.     let red        = Color(#colorLiteral(red: 0.5807225108, green: 0.066734083, blue: 0, alpha: 1))
    25.     let secondaryText = Color(#colorLiteral(red: 0.7540688515, green: 0.7540867925, blue: 0.7540771365, alpha: 1))
    26. }
    27.  
    28. /// 启动样式
    29. struct LaunchTheme {
    30.     let accent     = Color("LaunchAccentColor")
    31.     let background = Color("LaunchBackgroundColor")
    32. }

      3.2 创建提供预览视图扩展类 PreviewProvider.swift

    1. import Foundation
    2. import SwiftUI
    3.  
    4. /// 扩展类 提供预览
    5. extension PreviewProvider{
    6.     // 开发者预览数据
    7.     static var dev: DeveloperPreview{
    8.         return DeveloperPreview.instance
    9.     }
    10. }
    11.  
    12. // 开发者预览版
    13. class DeveloperPreview{
    14.     // 单例模式
    15.     static let instance = DeveloperPreview()
    16.     private init() {}
    17.     
    18.     // 环境变量，呈现的模式：显示或者关闭
    19.     @Environment(\.presentationMode) var presentationMode
    20.     
    21.     let homeViewModel = HomeViewModel()
    22.     
    23.     // 统计数据模型
    24.     let stat1 = StatisticModel(title: "Market Cap", value: "$12.5Bn", percentageChange: 26.32)
    25.     let stat2 = StatisticModel(title: "Total Volume", value: "$1.23Tr")
    26.     let stat3 = StatisticModel(title: "Portfolio Value", value: "$50.4k",percentageChange: -12.32)
    27.     
    28.     let coin = CoinModel(
    29.         id: "bitcoin",
    30.         symbol: "btc",
    31.         name: "Bitcoin",
    32.         image: "https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579",
    33.         currentPrice: 29594.97,
    34.         marketCap: 575471925043,
    35.         marketCapRank: 1,
    36.         fullyDilutedValuation: 621468559135,
    37.         totalVolume: 17867569837,
    38.         high24H: 29975,
    39.         low24H: 28773,
    40.         priceChange24H: 671.94,
    41.         priceChangePercentage24H: 2.32321,
    42.         marketCapChange24H: 13013242516,
    43.         marketCapChangePercentage24H: 2.31364,
    44.         circulatingSupply: 19445731,
    45.         totalSupply: 21000000,
    46.         maxSupply: 21000000,
    47.         ath: 69045,
    48.         athChangePercentage: -57.13833,
    49.         athDate: "2021-11-10T14:24:11.849Z",
    50.         atl: 67.81,
    51.         atlChangePercentage: 43542.79212,
    52.         atlDate: "2013-07-06T00:00:00.000Z",
    53.         lastUpdated: "2023-08-02T07:45:52.912Z",
    54.         sparklineIn7D:
    55.             SparklineIn7D(price:[
    56.             29271.02433564558,
    57.             29245.370873051394,
    58.             29205.501195094886,
    59.             29210.97710800848,
    60.             29183.90996906209,
    61.             29191.187134377586,
    62.             29167.309535190096,
    63.             29223.071887272858,
    64.             29307.753433422175,
    65.             29267.687825355235,
    66.             29313.499192934243,
    67.             29296.218518715148,
    68.             29276.651666477588,
    69.             29343.71801186576,
    70.             29354.73988657794,
    71.             29614.69857297837,
    72.             29473.762709346545,
    73.             29460.63779255003,
    74.             29363.672907978616,
    75.             29325.29799021886,
    76.             29370.611267446548,
    77.             29390.15178296929,
    78.             29428.222505493162,
    79.             29475.12359313808,
    80.             29471.20179209623,
    81.             29396.682959470276,
    82.             29416.063748693945,
    83.             29442.757895685798,
    84.             29550.523558342804,
    85.             29489.241437118748,
    86.             29513.005452237085,
    87.             29481.87017389305,
    88.             29440.157241806293,
    89.             29372.682404809886,
    90.             29327.962010819112,
    91.             29304.689279369806,
    92.             29227.558442049805,
    93.             29178.745455204324,
    94.             29155.348160823945,
    95.             29146.414472358578,
    96.             29190.04784447575,
    97.             29200.962573823388,
    98.             29201.236356821602,
    99.             29271.258206136354,
    100.             29276.093243553125,
    101.             29193.96481135078,
    102.             29225.130187030347,
    103.             29259.34141509108,
    104.             29172.589866912043,
    105.             29177.057442352412,
    106.             29144.25689537892,
    107.             29158.76207558714,
    108.             29202.314532690547,
    109.             29212.0966881263,
    110.             29222.654794248145,
    111.             29302.58488156929,
    112.             29286.271181422144,
    113.             29437.329605975596,
    114.             29387.54866090718,
    115.             29374.800526401574,
    116.             29237.366870488135,
    117.             29306.414045617796,
    118.             29313.493330593126,
    119.             29329.5049157853,
    120.             29317.998848911364,
    121.             29300.313958408336,
    122.             29314.09738709836,
    123.             29331.597426309774,
    124.             29372.858006614388,
    125.             29371.93585447968,
    126.             29365.560710924212,
    127.             29386.997851302443,
    128.             29357.263814441514,
    129.             29344.33621803127,
    130.             29307.866330609653,
    131.             29292.411501323997,
    132.             29279.062208908184,
    133.             29290.907121380646,
    134.             29275.952127727414,
    135.             29296.397048693474,
    136.             29300.218227669986,
    137.             29291.762204217895,
    138.             29291.877166187365,
    139.             29301.25798859754,
    140.             29323.60843299231,
    141.             29305.311033785278,
    142.             29335.43442901468,
    143.             29355.10941623317,
    144.             29350.104456680947,
    145.             29355.533727400776,
    146.             29356.74774591667,
    147.             29337.06524643115,
    148.             29327.210034664997,
    149.             29313.84510272745,
    150.             29316.494745597563,
    151.             29323.673091844805,
    152.             29314.269726879855,
    153.             29276.735658617326,
    154.             29291.429686285876,
    155.             29294.892488066977,
    156.             29281.92132540751,
    157.             29254.767133836835,
    158.             29280.924410272044,
    159.             29317.606859109263,
    160.             29277.34170421034,
    161.             29333.335435295256,
    162.             29377.387821327997,
    163.             29372.791590384797,
    164.             29380.712873208802,
    165.             29357.07852007383,
    166.             29173.883400452203,
    167.             29182.94706943146,
    168.             29210.311445584994,
    169.             29158.20830261118,
    170.             29277.755810272716,
    171.             29454.950860223915,
    172.             29446.040153631897,
    173.             29480.745288051072,
    174.             29419.437853166743,
    175.             29398.450179898642,
    176.             29381.999704403723,
    177.             29401.478326800752,
    178.             29379.291090327082,
    179.             29385.90384828296,
    180.             29370.640322724914,
    181.             29371.859549109304,
    182.             29389.802582833345,
    183.             29449.090796832406,
    184.             29351.411076211785,
    185.             29301.70086480563,
    186.             29250.006595240662,
    187.             29244.84298676968,
    188.             29217.38857006191,
    189.             29197.54498742039,
    190.             29220.005552322902,
    191.             29217.05529059147,
    192.             29239.485487664628,
    193.             29208.638675444134,
    194.             29225.78903990318,
    195.             29283.257482890982,
    196.             29196.40491920269,
    197.             28933.589441398828,
    198.             28836.362892634166,
    199.             28859.850682516564,
    200.             28902.83342032919,
    201.             28923.047091180444,
    202.             28922.768533406037,
    203.             28950.689444814736,
    204.             28926.692827318147,
    205.             28914.78045754031,
    206.             28876.0727583824,
    207.             28873.94607766258,
    208.             28878.68936584147,
    209.             28811.350317624612,
    210.             28893.17367623834,
    211.             28904.107217880563,
    212.             28932.211442017186,
    213.             29162.211547116116,
    214.             29257.225510262706,
    215.             29220.838459786457,
    216.             29190.624191620474,
    217.             29199.152902607395,
    218.             29694.16407843016,
    219.             29772.298033304203,
    220.             29874.280259270647,
    221.             29824.984567470103,
    222.             29613.437605238618,
    223.             29654.778753257848
    224.           ]),
    225.         priceChangePercentage24HInCurrency: 2.3232080710152045,
    226.         currentHoldings: 1.5
    227.     )
    228. }

      3.3 创建双精度扩展类 Double.swift

    1. import Foundation
    2.  
    3. /// 扩展类 双精度
    4. extension Double{
    5.     
    6.     /// 双精度数值转换为 小数点为 2位的货币值
    7.     /// ```
    8.     /// Convert 1234.56  to $1,234.56
    9.     /// ```
    10.     private var currencyFormatter2: NumberFormatter{
    11.         let formatter = NumberFormatter()
    12.         // 分组分隔符
    13.         formatter.usesGroupingSeparator = true
    14.         // 数字格式 等于 货币
    15.         formatter.numberStyle = .currency
    16.         // 发生时间 为当前 default
    17.         //formatter.locale = .current // <- default value
    18.         // 当前货币代码 设置为美元 default
    19.         //formatter.currencyCode = "usd" // <- change currency
    20.         // 当前货币符号 default
    21.         //formatter.currencySymbol = "$" // <- change currency symbol
    22.         // 最小分数位数
    23.         formatter.minimumFractionDigits = 2
    24.         // 最大分数位数
    25.         formatter.maximumFractionDigits = 2
    26.         return formatter
    27.     }
    28.     
    29.     /// 双精度数值转换为 字符串类型 小数点为 2位的货币值
    30.     /// ```
    31.     /// Convert 1234.56  to "$1,234.56"
    32.     /// ```
    33.     func asCurrencyWith2Decimals() -> String{
    34.         let number = NSNumber(value: self)
    35.         return currencyFormatter2.string(from: number) ?? "$0.00"
    36.     }
    37.     
    38.     /// 双精度数值转换为 小数点为 2位到 6位的货币值
    39.     /// ```
    40.     /// Convert 1234.56  to $1,234.56
    41.     /// Convert 12.3456  to $12.3456
    42.     /// Convert 0.123456 to $0.123456
    43.     /// ```
    44.     private var currencyFormatter6: NumberFormatter{
    45.         let formatter = NumberFormatter()
    46.         // 分组分隔符
    47.         formatter.usesGroupingSeparator = true
    48.         // 数字格式 等于 货币
    49.         formatter.numberStyle = .currency
    50.         // 发生时间 为当前 default
    51.         //formatter.locale = .current // <- default value
    52.         // 当前货币代码 设置为美元 default
    53.         //formatter.currencyCode = "usd" // <- change currency
    54.         // 当前货币符号 default
    55.         //formatter.currencySymbol = "$" // <- change currency symbol
    56.         // 最小分数位数
    57.         formatter.minimumFractionDigits = 2
    58.         // 最大分数位数
    59.         formatter.maximumFractionDigits = 6
    60.         return formatter
    61.     }
    62.     
    63.     /// 双精度数值转换为 字符串类型 小数点为 2位到 6位的货币值
    64.     /// ```
    65.     /// Convert 1234.56  to "$1,234.56"
    66.     /// Convert 12.3456  to "$12.3456"
    67.     /// Convert 0.123456 to "$0.123456"
    68.     /// ```
    69.     func asCurrencyWith6Decimals() -> String{
    70.         let number = NSNumber(value: self)
    71.         return currencyFormatter6.string(from: number) ?? "$0.00"
    72.     }
    73.     
    74.     /// 双精度数值转换为 字符串表现形式
    75.     /// ```
    76.     /// Convert 1.23456  to "1.23"
    77.     /// ```
    78.     func asNumberString() -> String{
    79.         return String(format: "%.2f", self)
    80.     }
    81.     
    82.     /// 双精度数值转换为 字符串表现形式带有百分比符号
    83.     /// ```
    84.     /// Convert 1.23456  to "1.23%"
    85.     /// ```
    86.     func asPercentString() -> String {
    87.         return asNumberString() + "%"
    88.     }
    89.     
    90.     /// Convert a Double to a String with K, M, Bn, Tr abbreviations.
    91.     /// k : 千， m : 百万， bn : 十亿，Tr : 万亿
    92.     /// ```
    93.     /// Convert 12 to 12.00
    94.     /// Convert 1234 to 1.23K
    95.     /// Convert 123456 to 123.45K
    96.     /// Convert 12345678 to 12.34M
    97.     /// Convert 1234567890 to 1.23Bn
    98.     /// Convert 123456789012 to 123.45Bn
    99.     /// Convert 12345678901234 to 12.34Tr
    100.     /// ```
    101.     func formattedWithAbbreviations() -> String {
    102.         let num = abs(Double(self))
    103.         let sign = (self < 0) ? "-" : ""
    104.         switch num {
    105.         case 1_000_000_000_000...:
    106.             let formatted = num / 1_000_000_000_000
    107.             let stringFormatted = formatted.asNumberString()
    108.             return "\(sign)\(stringFormatted)Tr"
    109.         case 1_000_000_000...:
    110.             let formatted = num / 1_000_000_000
    111.             let stringFormatted = formatted.asNumberString()
    112.             return "\(sign)\(stringFormatted)Bn"
    113.         case 1_000_000...:
    114.             let formatted = num / 1_000_000
    115.             let stringFormatted = formatted.asNumberString()
    116.             return "\(sign)\(stringFormatted)M"
    117.         case 1_000...:
    118.             let formatted = num / 1_000
    119.             let stringFormatted = formatted.asNumberString()
    120.             return "\(sign)\(stringFormatted)K"
    121.         case 0...:
    122.             return self.asNumberString()
    123.         default:
    124.             return "\(sign)\(self)"
    125.         }
    126.     }
    127. }

      3.4 创建应用扩展类 UIApplication.swift

    1. import Foundation
    2. import SwiftUI
    3.  
    4. extension UIApplication{
    5.     /// 结束编辑，隐藏键盘
    6.     func endEditing(){
    7.         sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    8.     }
    9. }

      3.5 创建日期扩展类 Date.swift

    1. import Foundation
    2.  
    3. /// 扩展类 日期
    4. extension Date {
    5.  
    6.     // "2021-11-10T14:24:11.849Z"
    7.     init(coinGeckoString: String) {
    8.         let formatter = DateFormatter()
    9.         formatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ss.SSSZ"
    10.         // 指定日期格式转换
    11.         let date = formatter.date(from: coinGeckoString) ?? Date()
    12.         self.init(timeInterval: 0, since: date)
    13.     }
    14.     
    15.     // 输出短格式
    16.     private var shortFormatter: DateFormatter{
    17.         let formatter = DateFormatter()
    18.         formatter.dateStyle = .short
    19.         return formatter
    20.     }
    21.     
    22.     // 转换为字符串短类型
    23.     func asShortDateString() -> String{
    24.         return shortFormatter.string(from: self)
    25.     }
    26. }

      3.6 创建字符串扩展类 String.swift

    1. import Foundation
    2.  
    3. /// 扩展类 字符串
    4. extension String{
    5.  
    6.     /// 移除 HTML 内容，查找到 HTML 标记，用 "" 替代
    7.     var removingHTMLOccurances: String{
    8.         return self.replacingOccurrences(of: "<[^>]+>", with: "", options: .regularExpression, range: nil)
    9.     }
    10. }

    4. 创建数据服务类

      4.1 创建货币数据服务类 CoinDataService.swift

    1. import Foundation
    2. import Combine
    3.  
    4. /// 货币数据服务
    5. class CoinDataService{
    6.     // 硬币模型数组 Published: 可以拥有订阅者
    7.     @Published var allCoins: [CoinModel] = []
    8.     // 随时取消操作
    9.     var coinSubscription: AnyCancellable?
    10.     
    11.     init() {
    12.         getCoins()
    13.     }
    14.     
    15.     // 获取全部硬币
    16.     func getCoins(){
    17.         guard let url = URL(string: "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=250&page=1&sparkline=true&price_change_percentage=24h&locale=en&precision=2")
    18.         else { return }
    19.         
    20.         coinSubscription = NetworkingManager.downLoad(url: url)
    21.             .decode(type: [CoinModel].self, decoder: JSONDecoder())
    22.             .receive(on: DispatchQueue.main)
    23.             .sink(receiveCompletion: NetworkingManager.handleCompletion,
    24.                   receiveValue: { [weak self] returnCoins in
    25.                 // 解除强引用 (注意)
    26.                 self?.allCoins = returnCoins
    27.                 // 取消订阅者
    28.                 self?.coinSubscription?.cancel()
    29.             })
    30.     }
    31. }

      4.2 创建货币图片下载缓存服务类 CoinImageService.swift

    1. import Foundation
    2. import SwiftUI
    3. import Combine
    4.  
    5. /// 货币图片下载缓存服务
    6. class CoinImageService{
    7.     @Published var image: UIImage? = nil
    8.     // 随时取消操作
    9.     private var imageSubscription: AnyCancellable?
    10.     private let coin: CoinModel
    11.     private let fileManager = LocalFileManager.instance
    12.     private let folderName = "coin_images"
    13.     private let imageName: String
    14.     
    15.     init(coin: CoinModel) {
    16.         self.coin = coin
    17.         self.imageName = coin.id
    18.         getCoinImage()
    19.     }
    20.     
    21.     // 获取图片: 文件夹获取 / 下载
    22.     private func getCoinImage(){
    23.         // 获取图片
    24.         if let saveImage = fileManager.getImage(imageName: imageName, folderName: folderName){
    25.             image = saveImage
    26.             //print("Retrieved image from file manager!")
    27.         }else{
    28.             downloadCoinImage()
    29.             //print("Downloading image now")
    30.         }
    31.     }
    32.     
    33.     // 下载硬币的图片
    34.     private func downloadCoinImage(){
    35.         guard let url = URL(string: coin.image)
    36.         else { return }
    37.         
    38.         imageSubscription = NetworkingManager.downLoad(url: url)
    39.             .tryMap{ data in
    40.                 return UIImage(data: data)
    41.             }
    42.             .receive(on: DispatchQueue.main)
    43.             .sink(receiveCompletion: NetworkingManager.handleCompletion,
    44.                   receiveValue: { [weak self] returnedImage in
    45.                 guard let self = self, let downloadedImage = returnedImage else { return }
    46.                 // 解除强引用 (注意)
    47.                 self.image = downloadedImage
    48.                 // 取消订阅者
    49.                 self.imageSubscription?.cancel()
    50.                 // 保存图片
    51.                 self.fileManager.saveImage(image: downloadedImage, imageName: self.imageName, folderName: self.folderName);
    52.             })
    53.     }
    54. }

      4.3 创建市场数据服务类 MarketDataService.swift

    1. import Foundation
    2. import Combine
    3.  
    4. /// 市场数据服务
    5. class MarketDataService{
    6.     // 市场数据模型数组 Published: 可以拥有订阅者
    7.     @Published var marketData: MarketDataModel? = nil
    8.     // 随时取消操作
    9.     var marketDataSubscription: AnyCancellable?
    10.     
    11.     init() {
    12.         getData()
    13.     }
    14.     
    15.     // 获取全部硬币
    16.     func getData(){
    17.         guard let url = URL(string: "https://api.coingecko.com/api/v3/global") else { return }
    18.         
    19.         marketDataSubscription = NetworkingManager.downLoad(url: url)
    20.             .decode(type: GlobalData.self, decoder: JSONDecoder())
    21.             .receive(on: DispatchQueue.main)
    22.             .sink(receiveCompletion: NetworkingManager.handleCompletion,
    23.                   receiveValue: { [weak self] returnGlobalData in
    24.                 // 解除强引用 (注意)
    25.                 self?.marketData = returnGlobalData.data
    26.                 // 取消订阅者
    27.                 self?.marketDataSubscription?.cancel()
    28.             })
    29.     }
    30. }

      4.4 创建持有交易货币投资组合数据存储服务(核心数据存储) PortfolioDataService.swift

    1. import Foundation
    2. import CoreData
    3.  
    4. /// 持有交易货币投资组合数据存储服务(核心数据存储)
    5. class PortfolioDataService{
    6.     // 数据容器
    7.     private let container: NSPersistentContainer
    8.     // 容器名称
    9.     private let containerName: String = "PortfolioContainer"
    10.     // 实体名称
    11.     private let entityName: String = "PortfolioEntity"
    12.     // 投资组合实体集合
    13.     @Published var savedEntities: [PortfolioEntity] = []
    14.     
    15.     init() {
    16.         // 获取容器文件
    17.         container = NSPersistentContainer(name: containerName)
    18.         // 加载持久存储
    19.         container.loadPersistentStores { _, error in
    20.             if let error = error {
    21.                 print("Error loading core data! \(error)")
    22.             }
    23.             self.getPortfolio()
    24.         }
    25.     }
    26.     
    27.     // MARK: PUBLIC
    28.     // 公开方法
    29.     /// 更新 / 删除 / 添加 投资组合数据
    30.     func updatePortfolio(coin: CoinModel, amount: Double){
    31.         // 判断货币数据是否在投资组合实体集合中
    32.         if let entity = savedEntities.first(where: {$0.coinID == coin.id}){
    33.             // 存在则更新
    34.             if amount > 0{
    35.                 update(entity: entity, amount: amount)
    36.             }else{
    37.                 delete(entity: entity)
    38.             }
    39.         }else{
    40.             add(coin: coin, amount: amount)
    41.         }
    42.     }
    43.     
    44.     // MARK: PRIVATE
    45.     // 私有方法
    46.     /// 获取容器里的投资组合实体数据
    47.     private func getPortfolio(){
    48.         // 根据实体名称,获取实体类型
    49.         let request = NSFetchRequest<PortfolioEntity>(entityName: entityName)
    50.         do {
    51.             savedEntities =  try container.viewContext.fetch(request)
    52.         } catch let error {
    53.             print("Error fatching portfolio entities. \(error)")
    54.         }
    55.     }
    56.     
    57.     /// 添加数据
    58.     private func add(coin: CoinModel, amount: Double){
    59.         let entity = PortfolioEntity(context: container.viewContext)
    60.         entity.coinID = coin.id
    61.         entity.amount = amount
    62.         applyChanges()
    63.     }
    64.     
    65.     /// 更新数据
    66.     private func update(entity: PortfolioEntity, amount: Double){
    67.         entity.amount = amount
    68.         applyChanges()
    69.     }
    70.     
    71.     /// 删除数据
    72.     private func delete(entity: PortfolioEntity){
    73.         container.viewContext.delete(entity)
    74.         applyChanges()
    75.     }
    76.     
    77.     /// 共用保存方法
    78.     private func save(){
    79.         do {
    80.             try container.viewContext.save()
    81.         } catch let error {
    82.             print("Error saving to core data. \(error)")
    83.         }
    84.     }
    85.     
    86.     // 应用并且改变
    87.     private func applyChanges(){
    88.         save()
    89.         getPortfolio()
    90.     }
    91. }

    5. 创建主页 ViewModel HomeViewModel.swift

    1. import Foundation
    2. import Combine
    3.  
    4. /// 主页 ViewModel
    5. class HomeViewModel: ObservableObject{
    6.     /// 统计数据模型数组
    7.     @Published var statistics: [StatisticModel] = []
    8.     /// 硬币模型数组
    9.     @Published var allCoins: [CoinModel] = []
    10.     /// 持有交易货币投资组合模型数组
    11.     @Published var portfolioCoins: [CoinModel] = []
    12.     /// 是否重新加载数据
    13.     @Published var isLoading: Bool = false
    14.     /// 搜索框文本
    15.     @Published var searchText: String = ""
    16.     /// 默认排序方式为持有最多的交易货币
    17.     @Published var sortOption: SortOption = .holdings
    18.     
    19.     /// 货币数据服务
    20.     private let coinDataService = CoinDataService()
    21.     /// 市场数据请求服务
    22.     private let marketDataService = MarketDataService()
    23.     /// 持有交易货币投资组合数据存储服务(核心数据存储)
    24.     private let portfolioDataService = PortfolioDataService()
    25.     /// 随时取消集合
    26.     private var cancellables = Set<AnyCancellable>()
    27.     
    28.     /// 排序选项
    29.     enum SortOption {
    30.         case rank, rankReversed, holdings, holdingsReversed, price, priceReversed
    31.     }
    32.     
    33.     init(){
    34.         addSubscribers()
    35.     }
    36.     
    37.     // 添加订阅者
    38.     func addSubscribers(){
    39.         // 更新货币消息
    40.         $searchText
    41.         // 组合订阅消息
    42.             .combineLatest(coinDataService.$allCoins, $sortOption)
    43.         // 运行其余代码之前等待 0.5 秒、文本框输入停下来之后，停顿 0.5 秒后，再执行后面的操作
    44.             .debounce(for: .seconds(0.5), scheduler: DispatchQueue.main)
    45.             .map(filterAndSortCoins)
    46.             .sink {[weak self] returnedCoins in
    47.                 self?.allCoins = returnedCoins
    48.             }
    49.             .store(in: &cancellables)
    50.         
    51.         // 更新持有交易货币投资组合数据
    52.         $allCoins
    53.         // 组合订阅消息
    54.             .combineLatest(portfolioDataService.$savedEntities)
    55.         // 根据投资组合实体中数据，获取持有的货币信息
    56.             .map(mapAllCoinsToPortfolioCoins)
    57.             .sink {[weak self] returnedCoins in
    58.                 guard let self = self else { return }
    59.                 // 排序
    60.                 self.portfolioCoins = self.sortPortfolioCoinsIfNeeded(coins: returnedCoins)
    61.             }
    62.             .store(in: &cancellables)
    63.         
    64.         // 更新市场数据，订阅市场数据服务
    65.         marketDataService.$marketData
    66.         // 组合订阅持有交易货币投资组合的数据
    67.             .combineLatest($portfolioCoins)
    68.         // 转换为统计数据模型数组
    69.             .map(mapGlobalMarketData)
    70.             .sink {[weak self] returnedStats in
    71.                 self?.statistics = returnedStats
    72.                 self?.isLoading = false
    73.             }
    74.             .store(in: &cancellables)
    75.     }
    76.     
    77.     /// 更新持有交易货币组合投资中的数据
    78.     func updatePortfolio(coin: CoinModel, amount: Double){
    79.         portfolioDataService.updatePortfolio(coin: coin, amount: amount)
    80.     }
    81.     
    82.     /// 重新加载货币数据
    83.     func reloadData(){
    84.         isLoading = true
    85.         coinDataService.getCoins()
    86.         marketDataService.getData()
    87.         // 添加触动提醒
    88.         HapticManager.notification(type: .success)
    89.     }
    90.     
    91.     /// 过滤器和排序方法
    92.     private func filterAndSortCoins(text: String, coins: [CoinModel], sort: SortOption) -> [CoinModel] {
    93.         // 过滤
    94.         var updatedCoins = filterCoins(text: text, coins: coins)
    95.         // 排序
    96.         sortCoins(sort: sort, coins: &updatedCoins)
    97.         return updatedCoins
    98.     }
    99.     
    100.     /// 过滤器方法
    101.     private func filterCoins(text: String, coins:[CoinModel]) -> [CoinModel]{
    102.         guard !text.isEmpty else{
    103.             // 为空返回原数组
    104.             return coins
    105.         }
    106.         // 文本转小写
    107.         let lowercasedText = text.lowercased()
    108.         // 过滤器
    109.         return coins.filter { coin -> Bool in
    110.             // 过滤条件
    111.             return coin.name.lowercased().contains(lowercasedText) ||
    112.             coin.symbol.lowercased().contains(lowercasedText) ||
    113.             coin.id.lowercased().contains(lowercasedText)
    114.         }
    115.     }
    116.     
    117.     /// 排序方法 inout: 基于原有的数组上进行改变
    118.     private func sortCoins(sort: SortOption, coins: inout [CoinModel]) {
    119.         switch sort {
    120.         case .rank, .holdings:
    121.              coins.sort(by: { $0.rank < $1.rank })
    122.         case .rankReversed, .holdingsReversed:
    123.              coins.sort(by: { $0.rank > $1.rank })
    124.         case .price:
    125.              coins.sort(by: { $0.currentPrice > $1.currentPrice })
    126.         case .priceReversed:
    127.              coins.sort(by: { $0.currentPrice < $1.currentPrice })
    128.         }
    129.     }
    130.     
    131.     /// 排序持有的交易货币
    132.     private func sortPortfolioCoinsIfNeeded(coins: [CoinModel]) -> [CoinModel]{
    133.         // 只会按持有金额高到低或者低到高进行
    134.         switch sortOption {
    135.         case .holdings:
    136.             return coins.sorted(by: { $0.currentHoldingsValue > $1.currentHoldingsValue })
    137.         case .holdingsReversed:
    138.             return coins.sorted(by: { $0.currentHoldingsValue < $1.currentHoldingsValue })
    139.         default:
    140.             return coins
    141.         }
    142.     }
    143.     
    144.     ///在交易货币集合中，根据投资组合实体中数据，获取持有的货币信息
    145.     private func mapAllCoinsToPortfolioCoins(allCoins: [CoinModel], portfolioEntities: [PortfolioEntity]) -> [CoinModel]{
    146.         allCoins
    147.             .compactMap { coin -> CoinModel? in
    148.                 guard let entity = portfolioEntities.first(where: {$0.coinID == coin.id}) else {
    149.                     return nil
    150.                 }
    151.                 return coin.updateHoldings(amount: entity.amount)
    152.             }
    153.     }
    154.     
    155.     ///市场数据模型 转换为 统计数据模型数组
    156.     private func mapGlobalMarketData(marketDataModel: MarketDataModel?, portfolioCoins: [CoinModel]) -> [StatisticModel]{
    157.         // 生成统计数据模型数组
    158.         var stats: [StatisticModel] = []
    159.         // 检测是否有数据
    160.         guard let data = marketDataModel else{
    161.             return stats
    162.         }
    163.         // 总市值
    164.         let marketCap = StatisticModel(title: "Market Cap", value: data.marketCap, percentageChange: data.marketCapChangePercentage24HUsd)
    165.         // 24 小时交易量
    166.         let volume = StatisticModel(title: "24h Volume", value: data.volume)
    167.         // 比特币占有总市值
    168.         let btcDominance = StatisticModel(title: "BTC Dominance", value: data.btcDominance)
    169.         
    170.         // 持有交易货币的金额
    171.         let portfolioValue =
    172.         portfolioCoins
    173.             .map({ $0.currentHoldingsValue })
    174.         // 集合快速求和
    175.             .reduce(0, +)
    176.         
    177.         // 持有交易货币的增长率
    178.         // 之前的变化价格 24小时
    179.         let previousValue =
    180.         portfolioCoins
    181.             .map { coin -> Double in
    182.                 let currentValue = coin.currentHoldingsValue
    183.                 let percentChange = (coin.priceChangePercentage24H ?? 0) / 100
    184.                 // 假如当前值为: 110，之前24小时上涨了 10%，之前的值为 100
    185.                 // 110 / (1 + 0.1) = 100
    186.                 let previousValue = currentValue / (1 + percentChange)
    187.                 return previousValue
    188.             }
    189.             .reduce(0, +)
    190.          
    191.         //* 100 百分比 (* 100 : 0.1 -> 10%)
    192.         let percentageChange = ((portfolioValue - previousValue) / previousValue) * 100
    193.         
    194.         // 持有的交易货币金额与增长率
    195.         let portfolio = StatisticModel(
    196.             title: "Portfolio Value",
    197.             value: portfolioValue.asCurrencyWith2Decimals(),
    198.             percentageChange: percentageChange)
    199.        
    200.         // 添加到数组
    201.         stats.append(contentsOf: [
    202.             marketCap,
    203.             volume,
    204.             btcDominance,
    205.             portfolio
    206.         ])
    207.         return stats
    208.     }
    209. }

    6. 视图组件

      6.1 货币图片、标志、名称视图组件

        1) 创建货币图片 ViewModel CoinImageViewModel.swift
    1. import Foundation
    2. import SwiftUI
    3. import Combine
    4.  
    5. /// 货币图片 ViewModel
    6. class CoinImageViewModel: ObservableObject{
    7.     @Published var image: UIImage? = nil
    8.     @Published var isLoading: Bool = true
    9.     /// 货币模型
    10.     private let coin: CoinModel
    11.     /// 货币图片下载缓存服务
    12.     private let dataService:CoinImageService
    13.     private var cancellable = Set<AnyCancellable>()
    14.     
    15.     init(coin: CoinModel) {
    16.         self.coin = coin
    17.         self.dataService = CoinImageService(coin: coin)
    18.         self.addSubscribers()
    19.         self.isLoading = true
    20.     }
    21.     
    22.     /// 添加订阅者
    23.     private func addSubscribers(){
    24.         dataService.$image
    25.             .sink(receiveCompletion: { [weak self]_ in
    26.                 self?.isLoading = false
    27.             }, receiveValue: { [weak self] returnedImage  in
    28.                 self?.image = returnedImage
    29.             })
    30.             .store(in: &cancellable)
    31.     }
    32. }
        2) 创建货币图片视图 CoinImageView.swift
    1. import SwiftUI
    2.  
    3. /// 货币图片视图
    4. struct CoinImageView: View {
    5.     //= CoinImageViewModel(coin: DeveloperPreview.instance.coin)
    6.     @StateObject private var viewModel: CoinImageViewModel
    7.     
    8.     init(coin: CoinModel) {
    9.         _viewModel = StateObject(wrappedValue: CoinImageViewModel(coin: coin))
    10.     }
    11.     
    12.     // 内容
    13.     var body: some View {
    14.         ZStack {
    15.             if let image = viewModel.image {
    16.                 Image(uiImage: image)
    17.                     .resizable()
    18.                 // 缩放适应该视图的任何大小
    19.                     .scaledToFit()
    20.             }else if viewModel.isLoading{
    21.                 ProgressView()
    22.             }else{
    23.                 Image(systemName: "questionmark")
    24.                     .foregroundColor(Color.theme.secondaryText)
    25.             }
    26.         }
    27.     }
    28. }
    29.  
    30. struct CoinImageView_Previews: PreviewProvider {
    31.     static var previews: some View {
    32.         CoinImageView(coin: dev.coin)
    33.             .padding()
    34.             .previewLayout(.sizeThatFits)
    35.     }
    36. }
        3) 创建货币图片、标志、名称视图 CoinLogoView.swift
    1. import SwiftUI
    2.  
    3. /// 货币的图片与名称
    4. struct CoinLogoView: View {
    5.     let coin: CoinModel
    6.     
    7.     var body: some View {
    8.         VStack {
    9.             CoinImageView(coin: coin)
    10.                 .frame(width: 50, height: 50)
    11.             Text(coin.symbol.uppercased())
    12.                 .font(.headline)
    13.                 .foregroundColor(Color.theme.accent)
    14.                 .lineLimit(1)
    15.                 .minimumScaleFactor(0.5)
    16.             Text(coin.name)
    17.                 .font(.caption)
    18.                 .foregroundColor(Color.theme.secondaryText)
    19.                 .lineLimit(2)
    20.                 .minimumScaleFactor(0.5)
    21.                 .multilineTextAlignment(.center)
    22.         }
    23.     }
    24. }
    25.  
    26. struct CoinLogoView_Previews: PreviewProvider {
    27.     static var previews: some View {
    28.         CoinLogoView(coin: dev.coin)
    29.             .previewLayout(.sizeThatFits)
    30.     }
    31. }

      6.2 圆形按钮视图组件

        1) 创建带阴影圆形按钮视图 CircleButtonView.swift
    1. import SwiftUI
    2.  
    3. /// 带阴影圆形按钮视图
    4. struct CircleButtonView: View {
    5.     let iconName: String
    6.     
    7.     var body: some View {
    8.         Image(systemName: iconName)
    9.             .font(.headline)
    10.             .foregroundColor(Color.theme.accent)
    11.             .frame(width: 50, height: 50)
    12.             .background(
    13.                 Circle().foregroundColor(Color.theme.background)
    14.             )
    15.             .shadow(color: Color.theme.accent.opacity(0.25), radius: 10, x: 0, y: 0)
    16.             .padding()
    17.     }
    18. }
    19.  
    20. struct CircleButtonView_Previews: PreviewProvider {
    21.     static var previews: some View {
    22.         Group {
    23.             CircleButtonView(iconName: "info")
    24.             // 预览区域 点预览布局，适合点的大小
    25.                 .previewLayout(.sizeThatFits)
    26.             
    27.             CircleButtonView(iconName: "plus")
    28.             // 预览区域 点预览布局，适合点的大小 preferredColorScheme
    29.                 .previewLayout(.sizeThatFits)
    30.                 .preferredColorScheme(.dark)
    31.         }
    32.     }
    33. }
        2) 创建圆形按钮动画视图 CircleButtonAnimationView.swift
    1. import SwiftUI
    2.  
    3. /// 圆形按钮动画视图
    4. struct CircleButtonAnimationView: View {
    5.     // 是否动画
    6.     @Binding var animate: Bool
    7.     
    8.     var body: some View {
    9.       Circle()
    10.             .stroke(lineWidth: 5.0)
    11.             .scale(animate ? 1.0 : 0.0)
    12.             .opacity(animate ? 0.0 : 1.0)
    13.             .animation(animate ? Animation.easeOut(duration: 1.0) : .none)
    14.     }
    15. }
    16.  
    17. struct CircleButtonAnimationView_Previews: PreviewProvider {
    18.     static var previews: some View {
    19.         CircleButtonAnimationView(animate: .constant(false))
    20.             .foregroundColor(.red)
    21.             .frame(width: 100, height: 100)
    22.     }
    23. }

      6.3 创建搜索框视图 SearchBarView.swift

    1. import SwiftUI
    2.  
    3. /// 搜索框视图
    4. struct SearchBarView: View {
    5.     @Binding var searchText: String
    6.     
    7.     var body: some View {
    8.         HStack {
    9.             Image(systemName: "magnifyingglass")
    10.                 .foregroundColor(
    11.                     searchText.isEmpty ?
    12.                     Color.theme.secondaryText : Color.theme.accent
    13.                 )
    14.             
    15.             TextField("Search by name or symbol...", text: $searchText)
    16.                 .foregroundColor(Color.theme.accent)
    17.             // 键盘样式
    18.                 .keyboardType(.namePhonePad)
    19.             // 禁用自动更正
    20.                 .autocorrectionDisabled(true)
    21.             //.textContentType(.init(rawValue: ""))
    22.                 .overlay(
    23.                     Image(systemName: "xmark.circle.fill")
    24.                         .padding() // 加大图片到区域
    25.                         .offset(x: 10)
    26.                         .foregroundColor(Color.theme.accent)
    27.                         .opacity(searchText.isEmpty ? 0.0 : 1.0)
    28.                         .onTapGesture {
    29.                             // 结束编辑 隐藏键盘
    30.                             UIApplication.shared.endEditing()
    31.                             searchText = ""
    32.                         }
    33.                     ,alignment: .trailing
    34.                 )
    35.         }
    36.         .font(.headline)
    37.         .padding()
    38.         .background(
    39.             RoundedRectangle(cornerRadius: 25)
    40.             // 填充颜色
    41.                 .fill(Color.theme.background)
    42.             // 阴影
    43.                 .shadow(
    44.                     color: Color.theme.accent.opacity(0.15),
    45.                     radius: 10, x: 0, y: 0)
    46.         )
    47.         .padding()
    48.     }
    49. }
    50.  
    51. struct SearchBarView_Previews: PreviewProvider {
    52.     static var previews: some View {
    53.         Group {
    54.             SearchBarView(searchText: .constant(""))
    55.                 .previewLayout(.sizeThatFits)
    56.                 .preferredColorScheme(.light)
    57.             SearchBarView(searchText: .constant(""))
    58.                 .previewLayout(.sizeThatFits)
    59.                 .preferredColorScheme(.dark)
    60.         }
    61.     }
    62. }

      6.4 创建统计数据视图 StatisticView.swift

    1. import SwiftUI
    2.  
    3. /// 统计数据视图
    4. struct StatisticView: View {
    5.     let stat : StatisticModel
    6.     var body: some View {
    7.         VStack(alignment: .leading, spacing: 4) {
    8.             Text(stat.title)
    9.                 .font(.caption)
    10.                 .foregroundColor(Color.theme.secondaryText)
    11.             Text(stat.value)
    12.                 .font(.headline)
    13.                 .foregroundColor(Color.theme.accent)
    14.             HStack (spacing: 4){
    15.                 Image(systemName: "triangle.fill")
    16.                     .font(.caption2)
    17.                     .rotationEffect(Angle(degrees: (stat.percentageChange ?? 0) >= 0 ? 0 : 180))
    18.                 
    19.                 Text(stat.percentageChange?.asPercentString() ?? "")
    20.                     .font(.caption)
    21.                 .bold()
    22.             }
    23.             .foregroundColor((stat.percentageChange ?? 0) >= 0 ? Color.theme.green : Color.theme.red)
    24.             .opacity(stat.percentageChange == nil ? 0.0 : 1.0)
    25.         }
    26.     }
    27. }
    28.  
    29. struct StatisticView_Previews: PreviewProvider {
    30.     static var previews: some View {
    31.         Group {
    32.             StatisticView(stat: dev.stat1)
    33.                 .previewLayout(.sizeThatFits)
    34.                 //.preferredColorScheme(.dark)
    35.             StatisticView(stat: dev.stat2)
    36.                 .previewLayout(.sizeThatFits)
    37.             StatisticView(stat: dev.stat3)
    38.                 .previewLayout(.sizeThatFits)
    39.             //.preferredColorScheme(.dark)
    40.         }
    41.     }
    42. }

      6.5 创建通用关闭按钮视图 XMarkButton.swift

    1. import SwiftUI
    2.  
    3. /// 通用关闭按钮视图
    4. struct XMarkButton: View {
    5.     // 环境变量: 呈现方式
    6.     let presentationMode: Binding<PresentationMode>
    7.     
    8.     var body: some View {
    9.         Button(action: {
    10.             presentationMode.wrappedValue.dismiss()
    11.         }, label: {
    12.             HStack {
    13.                 Image(systemName: "xmark")
    14.                     .font(.headline)
    15.             }
    16.         })
    17.         .foregroundColor(Color.theme.accent)
    18.     }
    19. }
    20.  
    21. struct XMarkButton_Previews: PreviewProvider {
    22.     static var previews: some View {
    23.         XMarkButton(presentationMode: dev.presentationMode)
    24.     }
    25. }

    7. 主页 View/视图 层

      7.1 创建主页货币数据统计视图 HomeStatsView.swift

    1. import SwiftUI
    2.  
    3. /// 主页货币数据统计视图
    4. struct HomeStatsView: View {
    5.     /// 环境对象，主 ViewModel
    6.     @EnvironmentObject private var viewModel: HomeViewModel
    7.     /// 输出货币统计数据或者持有货币统计数据
    8.     @Binding var showPortfolio: Bool
    9.     
    10.     var body: some View {
    11.         HStack {
    12.             ForEach(viewModel.statistics) { stat in
    13.                 StatisticView(stat: stat)
    14.                     .frame(width: UIScreen.main.bounds.width / 3)
    15.             }
    16.         }
    17.         .frame(width: UIScreen.main.bounds.width, alignment: showPortfolio ? .trailing : .leading)
    18.     }
    19. }
    20.  
    21. struct HomeStatsView_Previews: PreviewProvider {
    22.     static var previews: some View {
    23.         // .constant(false)
    24.         HomeStatsView(showPortfolio: .constant(false))
    25.             .environmentObject(dev.homeViewModel)
    26.     }
    27. }

      7.2 创建货币列表行视图 CoinRowView.swift

    1. import SwiftUI
    2.  
    3. /// 货币列表行视图
    4. struct CoinRowView: View {
    5.     /// 硬币模型
    6.     let coin: CoinModel;
    7.     
    8.     /// 控股列
    9.     let showHoldingsColumn: Bool
    10.     
    11.     var body: some View {
    12.         HStack(spacing: 0) {
    13.             leftColumn
    14.             Spacer()
    15.             if showHoldingsColumn {
    16.                 centerColumn
    17.             }
    18.             rightColumn
    19.         }
    20.         .font(.subheadline)
    21.         // 追加热区限制，使 Spacer 也可点击
    22.         //.contentShape(Rectangle())
    23.         // 添加背景，使得 Spacer 也可点击
    24.         .background(Color.theme.background.opacity(0.001))
    25.     }
    26. }
    27.  
    28. // 扩展类
    29. extension CoinRowView{
    30.     // 左边的View
    31.     private var leftColumn: some View{
    32.         HStack(spacing: 0) {
    33.             // 显示排名,图片，名称
    34.             Text("\(coin.rank)")
    35.                 .font(.caption)
    36.                 .foregroundColor(Color.theme.secondaryText)
    37.                 .frame(minWidth: 30)
    38.             CoinImageView(coin: coin)
    39.                 .frame(width: 30, height: 30)
    40.             Text(coin.symbol.uppercased())
    41.                 .font(.headline)
    42.                 .padding(.leading, 6)
    43.                 .foregroundColor(Color.theme.accent)
    44.         }
    45.     }
    46.     
    47.     // 中间的View
    48.     private var centerColumn: some View{
    49.         // 显示持有的股份
    50.         VStack(alignment: .trailing) {
    51.             // 显示持有的金额
    52.             Text(coin.currentHoldingsValue.asCurrencyWith2Decimals())
    53.                 .bold()
    54.             // 显示我们的持有量
    55.             Text((coin.currentHoldings ?? 0).asNumberString())
    56.         }
    57.         .foregroundColor(Color.theme.accent)
    58.     }
    59.     
    60.     // 右边的View
    61.     private var rightColumn: some View{
    62.         // 当前价格及上涨或者下跌24小时的百分比
    63.         VStack(alignment: .trailing) {
    64.             Text(coin.currentPrice.asCurrencyWith6Decimals())
    65.                 .bold()
    66.                 .foregroundColor(Color.theme.accent)
    67.             Text(coin.priceChangePercentage24H?.asPercentString() ?? "")
    68.                 .foregroundColor((coin.priceChangePercentage24H ?? 0 ) >= 0 ? Color.theme.green : Color.theme.red)
    69.         }
    70.         .frame(width: UIScreen.main.bounds.width / 3.5, alignment: .trailing)
    71.     }
    72. }
    73.  
    74. struct CoinRowView_Previews: PreviewProvider {
    75.     static var previews: some View {
    76.         Group {
    77.             CoinRowView(coin: dev.coin, showHoldingsColumn: true)
    78.                 .previewLayout(.sizeThatFits)
    79.             CoinRowView(coin: dev.coin, showHoldingsColumn: true)
    80.                 .previewLayout(.sizeThatFits)
    81.                 .preferredColorScheme(.dark)
    82.         }
    83.     }
    84. }

      7.3 创建编辑持有交易货币投资组合视图 PortfolioView.swift

    1. import SwiftUI
    2.  
    3. /// 编辑持有交易货币投资组合视图
    4. struct PortfolioView: View {
    5.     /// 环境变量，呈现方式：显示或者关闭
    6.     @Environment(\.presentationMode) var presentationMode
    7.     /// 环境变量中的主页 ViewModel
    8.     @EnvironmentObject private var viewModel: HomeViewModel
    9.     /// 是否选择其中一个模型
    10.     @State private var selectedCoin: CoinModel? = nil
    11.     /// 持有的数量
    12.     @State private var quantityText: String = ""
    13.     /// 是否点击保存按钮
    14.     @State private var showCheckmark: Bool = false
    15.     
    16.     var body: some View {
    17.         NavigationView {
    18.             ScrollView {
    19.                 VStack(alignment: .leading, spacing: 0) {
    20.                     // 搜索框
    21.                     SearchBarView(searchText: $viewModel.searchText)
    22.                     // 带图片的水平货币列表
    23.                     coinLogoList
    24.                     //根据当前货币的金额，计算出持有的金额
    25.                     if selectedCoin != nil{
    26.                         portfolioInputSection
    27.                     }
    28.                 }
    29.             }
    30.             .background(
    31.                 Color.theme.background
    32.                 .ignoresSafeArea()
    33.             )
    34.             .navigationTitle("Edit portfolio")
    35.             // navigationBarItems 已过时，推荐使用 toolbar，动态调整 View
    36.             // .navigationBarItems(leading:  XMarkButton())
    37.             .toolbar {
    38.                 // 关闭按钮
    39.                 ToolbarItem(placement: .navigationBarLeading) {
    40.                     XMarkButton(presentationMode: presentationMode)
    41.                 }
    42.                 // 确认按钮
    43.                 ToolbarItem(placement: .navigationBarTrailing) {
    44.                     trailingNavBarButton
    45.                 }
    46.             }
    47.             // 观察页面上搜索的文字发生变化
    48.             .onChange(of: viewModel.searchText) { value in
    49.                 // value == ""
    50.                 // 如果搜索框中的文字为空，移除选中列表中的货币
    51.                 if value.isEmpty {
    52.                     removeSelectedCoin()
    53.                 }
    54.             }
    55.         }
    56.     }
    57. }
    58.  
    59. // View 的扩展
    60. extension PortfolioView{
    61.     /// 带图片的水平货币列表
    62.     private var coinLogoList: some View {
    63.         ScrollView(.horizontal, showsIndicators: false) {
    64.             LazyHStack(spacing: 10) {
    65.                 ForEach(viewModel.searchText.isEmpty ? viewModel.portfolioCoins : viewModel.allCoins) { coin in
    66.                     CoinLogoView(coin: coin)
    67.                         .frame(width: 75)
    68.                         .padding(4)
    69.                         .onTapGesture {
    70.                             withAnimation(.easeIn) {
    71.                                 updateSelectedCoin(coin: coin)
    72.                             }
    73.                         }
    74.                         .background(
    75.                             RoundedRectangle(cornerRadius: 10)
    76.                                 .stroke(selectedCoin?.id == coin.id ?
    77.                                         Color.theme.green : Color.clear
    78.                                         , lineWidth: 1)
    79.                         )
    80.                 }
    81.             }
    82.             .frame(height: 120)
    83.             .padding(.leading)
    84.         }
    85.     }
    86.     
    87.     /// 更新点击的货币信息
    88.     private func updateSelectedCoin(coin: CoinModel){
    89.         selectedCoin = coin
    90.         if let portfolioCoin = viewModel.portfolioCoins.first(where: {$0.id == coin.id}),
    91.            let amount = portfolioCoin.currentHoldings{
    92.             quantityText = "\(amount)"
    93.         }else{
    94.             quantityText = ""
    95.         }
    96.     }
    97.     
    98.     /// 获取当前持有货币金额
    99.     private func getCurrentValue() -> Double {
    100.         // 获取数量
    101.         if let quantity = Double(quantityText){
    102.             return quantity * (selectedCoin?.currentPrice ?? 0)
    103.         }
    104.         return 0
    105.     }
    106.     
    107.     /// 根据当前货币的金额，计算出持有的金额
    108.     private var portfolioInputSection: some View {
    109.         VStack(spacing: 20) {
    110.             // 当前货币的价格
    111.             HStack {
    112.                 Text("Current price of \(selectedCoin?.symbol.uppercased() ?? ""):")
    113.                 Spacer()
    114.                 Text(selectedCoin?.currentPrice.asCurrencyWith6Decimals() ?? "")
    115.             }
    116.             Divider()
    117.             // 持有的货币数量
    118.             HStack {
    119.                 Text("Amount holding:")
    120.                 Spacer()
    121.                 TextField("Ex: 1.4", text: $quantityText)
    122.                 // 右对齐
    123.                     .multilineTextAlignment(.trailing)
    124.                 // 设置键盘类型，只能为数字
    125.                     .keyboardType(.decimalPad)
    126.             }
    127.             Divider()
    128.             HStack {
    129.                 Text("Current value:")
    130.                 Spacer()
    131.                 Text(getCurrentValue().asCurrencyWith2Decimals())
    132.             }
    133.         }
    134.         .animation(.none)
    135.         .padding()
    136.         .font(.headline)
    137.     }
    138.     
    139.     /// 导航栏右侧的保存按钮
    140.     private var trailingNavBarButton: some View{
    141.         HStack(spacing: 10) {
    142.             Image(systemName: "checkmark")
    143.                 .opacity(showCheckmark ? 1.0 : 0.0)
    144.                 //.foregroundColor(Color.theme.accent)
    145.             Button {
    146.                 saveButtonPressed()
    147.             } label: {
    148.                 Text("Save".uppercased())
    149.             }
    150.             // 选中当前的货币并且持有的货币数量与输入的数量不相等时，显示保存按钮
    151.             .opacity((selectedCoin != nil && selectedCoin?.currentHoldings != Double(quantityText)) ? 1.0 : 0.0)
    152.         }
    153.         .font(.headline)
    154.     }
    155.     
    156.     /// 按下保存按钮
    157.     private func saveButtonPressed(){
    158.         // 判断是否有选中按钮
    159.         guard
    160.             let coin = selectedCoin,
    161.             let amount = Double(quantityText)
    162.         else { return }
    163.        
    164.         // 保存/更新到持有投资组合货币
    165.         viewModel.updatePortfolio(coin: coin, amount: amount)
    166.         
    167.         // 显示检查标记
    168.         withAnimation(.easeIn) {
    169.             showCheckmark = true
    170.             removeSelectedCoin()
    171.         }
    172.         
    173.         // 隐藏键盘
    174.         UIApplication.shared.endEditing()
    175.         
    176.         // 隐藏检查标记
    177.         DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
    178.             withAnimation(.easeOut){
    179.                 showCheckmark = false
    180.             }
    181.         }
    182.     }
    183.     
    184.     // 移除选中列表中的货币
    185.     private func removeSelectedCoin(){
    186.         selectedCoin = nil
    187.         // 清空搜索框
    188.         viewModel.searchText = ""
    189.     }
    190. }
    191.  
    192. struct PortfolioView_Previews: PreviewProvider {
    193.     static var previews: some View {
    194.         PortfolioView()
    195.             .environmentObject(dev.homeViewModel)
    196.     }
    197. }

      7.4 创建主页视图 HomeView.swift

    1. import SwiftUI
    2.  
    3. // .constant("")  State(wrappedValue:)
    4. // 加密货币
    5. struct HomeView: View {
    6.     @EnvironmentObject private var viewModel:HomeViewModel
    7.     
    8.     /// 是否显示动画
    9.     @State private var showPortfolio: Bool = false
    10.     /// 是否显示编辑持有货币 View
    11.     @State private var showPortfolioView: Bool = false
    12.     /// 是否显示设置View
    13.     @State private var showSettingView: Bool = false
    14.     
    15.     /// 选中的交易货币
    16.     @State private var selectedCoin: CoinModel? = nil
    17.     /// 是否显示交易货币详情页
    18.     @State private var showDetailView: Bool = false
    19.     
    20.     var body: some View {
    21.         ZStack {
    22.             // 背景布局 background layer
    23.             Color.theme.background
    24.                 .ignoresSafeArea()
    25.             // 新的工作表单，持有货币组合 View
    26.                 .sheet(isPresented: $showPortfolioView) {
    27.                     PortfolioView()
    28.                     // 环境变量对象添加 ViewModel
    29.                         .environmentObject(viewModel)
    30.                 }
    31.             
    32.             // 内容布局
    33.             VStack {
    34.                 // 顶部导航栏
    35.                 homeHeader
    36.                 
    37.                 // 统计栏
    38.                 HomeStatsView(showPortfolio: $showPortfolio)
    39.                 
    40.                 // 搜索框
    41.                 SearchBarView(searchText: $viewModel.searchText)
    42.                 
    43.                 // 列表标题栏
    44.                 columnTitles
    45.                 
    46.                 // 货币列表数据
    47.                 coinSectionUsingTransitions
    48.                 
    49.                 //coinSectionUsingOffsets
    50.                 Spacer(minLength: 0)
    51.             }
    52.             // 设置页面
    53.             .sheet(isPresented: $showSettingView) {
    54.                 SettingsView()
    55.             }
    56.         }
    57.         .background(
    58.             NavigationLink(
    59.                 destination: DetailLoadingView(coin: $selectedCoin),
    60.                 isActive: $showDetailView,
    61.                 label: { EmptyView() })
    62.         )
    63.     }
    64. }
    65.  
    66. struct HomeView_Previews: PreviewProvider {
    67.     static var previews: some View {
    68.         NavigationView {
    69.             HomeView()
    70.             //.navigationBarHidden(true)
    71.         }
    72.         .environmentObject(dev.homeViewModel)
    73.     }
    74. }
    75.  
    76. // 扩展 HomeView
    77. extension HomeView{
    78.     // 主页顶部 View
    79.     private var homeHeader: some View{
    80.         HStack {
    81.             CircleButtonView(iconName: showPortfolio ? "plus" : "info")
    82.                 .animation(.none)
    83.                 .onTapGesture {
    84.                     if showPortfolio {
    85.                         showPortfolioView.toggle()
    86.                     } else {
    87.                         showSettingView.toggle()
    88.                     }
    89.                 }
    90.                 .background(CircleButtonAnimationView(animate: $showPortfolio))
    91.             Spacer()
    92.             Text(showPortfolio ? "Portfolio" : "Live Prices")
    93.                 .font(.headline)
    94.                 .fontWeight(.heavy)
    95.                 .foregroundColor(Color.theme.accent)
    96.                 .animation(.none)
    97.             Spacer()
    98.             CircleButtonView(iconName: "chevron.right")
    99.                 .rotationEffect(Angle(degrees: showPortfolio ? 180 : 0))
    100.                 .onTapGesture {
    101.                     // 添加动画
    102.                     withAnimation(.spring()){
    103.                         showPortfolio.toggle()
    104.                     }
    105.                 }
    106.         }
    107.         .padding(.horizontal)
    108.     }
    109.     
    110.     /// 交易货币数据列表
    111.     private var coinSectionUsingTransitions: some View{
    112.         ZStack(alignment: .top) {
    113.             if !showPortfolio{
    114.                 if !viewModel.allCoins.isEmpty {
    115.                     allCoinsList
    116.                     // 将 view 从右侧推到左侧
    117.                         .transition(.move(edge: .leading))
    118.                 }
    119.             }
    120.             
    121.             // 持有的货币列表
    122.             if showPortfolio{
    123.                 ZStack(alignment: .top) {
    124.                     if viewModel.portfolioCoins.isEmpty && viewModel.searchText.isEmpty{
    125.                         // 当没有持有交易货币时，给出提示语
    126.                         portfolioEmptyText
    127.                     } else{
    128.                         // 持有交易货币投资组合列表
    129.                         if !viewModel.portfolioCoins.isEmpty {
    130.                             portfolioCoinsList
    131.                         }
    132.                     }
    133.                 }
    134.                 .transition(.move(edge: .trailing))
    135.             }
    136.         }
    137.     }
    138.     
    139.     /// 交易货币数据列表
    140.     private var coinSectionUsingOffsets: some View{
    141.         ZStack(alignment: .top) {
    142.             if !showPortfolio{
    143.                 allCoinsList
    144.                 // 将 view 从右侧推到左侧
    145.                     .offset(x: showPortfolio ? -UIScreen.main.bounds.width : 0)
    146.             }
    147.             
    148.             // 持有的货币列表
    149.             if showPortfolio{
    150.                 ZStack(alignment: .top) {
    151.                     if viewModel.portfolioCoins.isEmpty && viewModel.searchText.isEmpty{
    152.                         // 当没有持有交易货币时，给出提示语
    153.                         portfolioEmptyText
    154.                     } else{
    155.                         // 持有交易货币投资组合列表
    156.                         portfolioCoinsList
    157.                     }
    158.                 }
    159.                 .offset(x: showPortfolio ? 0 : UIScreen.main.bounds.width)
    160.             }
    161.         }
    162.     }
    163.     
    164.     /// 交易货币列表
    165.     private var allCoinsList: some View{
    166.         List {
    167.             ForEach(viewModel.allCoins) { coin in
    168.                 CoinRowView(coin: coin, showHoldingsColumn: false)
    169.                     .listRowInsets(.init(top: 10, leading: 0, bottom: 10, trailing: 10))
    170.                     .onTapGesture {
    171.                         segue(coin: coin)
    172.                     }
    173.                     .listRowBackground(Color.theme.background)
    174.             }
    175.         }
    176.         //.modifier(ListBackgroundModifier())
    177.         //.background(Color.theme.background.ignoresSafeArea())
    178.         .listStyle(.plain)
    179.     }
    180.     
    181.     /// 持有交易货币投资组合列表
    182.     private var portfolioCoinsList: some View{
    183.         List {
    184.             ForEach(viewModel.portfolioCoins) { coin in
    185.                 CoinRowView(coin: coin, showHoldingsColumn: true)
    186.                     .listRowInsets(.init(top: 10, leading: 0, bottom: 10, trailing: 10))
    187.                     .onTapGesture {
    188.                         segue(coin: coin)
    189.                     }
    190.                     .listRowBackground(Color.theme.background)
    191.             }
    192.         }
    193.         .listStyle(.plain)
    194.     }
    195.     
    196.     /// 当没有持有交易货币时，给出提示语
    197.     private var portfolioEmptyText: some View{
    198.         Text("You haven't added any coins to your portfolio yet. Click the + button to get started! 🧐")
    199.             .font(.callout)
    200.             .foregroundColor(Color.theme.accent)
    201.             .fontWeight(.medium)
    202.             .multilineTextAlignment(.center)
    203.             .padding(50)
    204.     }
    205.     
    206.     /// 跳转到交易货币详情页
    207.     private func segue(coin: CoinModel){
    208.         selectedCoin = coin
    209.         showDetailView.toggle()
    210.     }
    211.     
    212.     /// 列表的标题
    213.     private var columnTitles: some View{
    214.         HStack {
    215.             // 硬币
    216.             HStack(spacing: 4) {
    217.                 Text("Coin")
    218.                 Image(systemName: "chevron.down")
    219.                     .opacity((viewModel.sortOption == .rank || viewModel.sortOption == .rankReversed) ? 1.0 : 0.0)
    220.                     .rotationEffect(Angle(degrees: viewModel.sortOption == .rank ? 0 : 180))
    221.             }
    222.             .onTapGesture {
    223.                 // 设置排序
    224.                 withAnimation(.default) {
    225.                     viewModel.sortOption = (viewModel.sortOption == .rank ? .rankReversed : .rank)
    226.                 }
    227.             }
    228.             
    229.             Spacer()
    230.             if showPortfolio{
    231.                 // 持有交易货币的控股
    232.                 HStack(spacing: 4) {
    233.                     Text("Holdings")
    234.                     Image(systemName: "chevron.down")
    235.                         .opacity((viewModel.sortOption == .holdings || viewModel.sortOption == .holdingsReversed) ? 1.0 : 0.0)
    236.                         .rotationEffect(Angle(degrees: viewModel.sortOption == .holdings ? 0 : 180))
    237.                 }
    238.                 .onTapGesture {
    239.                     // 设置排序
    240.                     withAnimation(.default) {
    241.                         viewModel.sortOption = (viewModel.sortOption == .holdings ? .holdingsReversed : .holdings)
    242.                     }
    243.                 }
    244.             }
    245.             
    246.             HStack(spacing: 4) {
    247.                 // 价格
    248.                 Text("Price")
    249.                     .frame(width: UIScreen.main.bounds.width / 3.5, alignment: .trailing)
    250.                 Image(systemName: "chevron.down")
    251.                     .opacity((viewModel.sortOption == .price || viewModel.sortOption == .priceReversed) ? 1.0 : 0.0)
    252.                     .rotationEffect(Angle(degrees: viewModel.sortOption == .price ? 0 : 180))
    253.             }
    254.             .onTapGesture {
    255.                 // 设置排序
    256.                 withAnimation(.default) {
    257.                     viewModel.sortOption = (viewModel.sortOption == .price ? .priceReversed : .price)
    258.                 }
    259.             }
    260.             // 刷新
    261.             Button {
    262.                 withAnimation(.linear(duration: 2.0)) {
    263.                     viewModel.reloadData()
    264.                 }
    265.             } label: {
    266.                 Image(systemName: "goforward")
    267.             }
    268.             // 添加旋转动画
    269.             .rotationEffect(Angle(degrees: viewModel.isLoading ? 360 : 0), anchor: .center)
    270.         }
    271.         .font(.caption)
    272.         .foregroundColor(Color.theme.secondaryText)
    273.         .padding(.horizontal)
    274.     }
    275. }

    8. 效果图:

  • 相关阅读:
    cpu飙高问题，案例分析（一）
    VB.net WebBrowser网页元素抓取分析方法
    MM32F0140 UART1空闲中断接收
    SCI写作指南
    深入理解Kafka分区副本机制
    使用svnsync sync方法同步
    DDTT Sulfurizing Reagent，DDTT硫化剂
    Unity性能优化一本通
    哈工大2022机器学习实验一：曲线拟合
    无敌，全面对标字节跳动2-2：算法与数据结构突击手册(leetcode)
  • 原文地址：https://blog.csdn.net/u011193452/article/details/133751436