Hello Swift Charts – Part 3

擔心好用的 Charts 框架能不能在 UIKit 也就是 Storyboard 專案中使用嗎?其實我也不知道,因為怎麼看,這個框架都是為了 SwiftUI 而設計的。但是呢,don’t worry,UIKit 中有一個特殊的 View Controller 叫做 UIHostingController(有元件可以拉到 Storyboard 上喔),他是專門顯示 SwiftUI 用的。啪,彈個指,搞定。

截圖 2022-06-10 22.07.37

首先在 Storyboard 上拉出一個 Container View 元件到預設的 View Controller 上,然後把 Container View 預設帶出的 UIViewController 刪掉。完成後再拉出一個 Hosting View Controller 到 Storyboard 上,接著在 Container View 上按滑鼠右鍵拉藍線到 Hosting View Controller。鬆開滑鼠後應該會跳出一個選擇 Segue 型態的小視窗,選擇「Embed」。成功完成後的圖應該如下。

截圖 2022-06-10 21.18.35

接下來開啟輔助編輯視窗(不知道怎麼開啟的話按熱鍵 Ctrl-Option-Command-Return),就是將畫面切成左邊是 Storyboard 右邊是程式碼,然後從 Segue 拉藍線到右邊 viewDidLoad() 下方,準備設定 Segue 的 IBAction,名稱可以任意取。

截圖 2022-06-10 21.38.45

在 Xcode 幫我們產生的 IBSegueAction 函數中會有一行預設的程式碼,在最後的 rootView 參數輸入 SwiftUI 的 struct 名稱,然後記得要 import SwiftUI 就完成了。這裡的 BarChart() 原始碼請參考這一篇

import UIKit
// 注意這裡
import SwiftUI

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    @IBSegueAction func showBarChart(_ coder: NSCoder) -> UIViewController? {
        return UIHostingController(coder: coder, rootView: BarChart())
    }
    
}



執行結果如下。看吧,只打了幾個字就輕輕鬆鬆的在 UIViewController 中內嵌一個 SwiftUI 畫出的漂亮圖表了,大小位置任君調整。

截圖 2022-06-10 21.48.51

【延伸閱讀】

Hello Swift Charts

Hello Swift Charts – Part 2

6 thoughts on “Hello Swift Charts – Part 3

  1. 咪嚕
    咪嚕 says:

    請問一下,我照著您的方式完成Hosting View Controller,
    但是BarChart雖然有import SwiftUI跟Charts卻無法find ‘Chart’ 跟 ‘BarMark ‘ in the scope.是甚麼原因,謝謝!

    • 朱克剛
      朱克剛 says:

      嗨咪嚕

      你是不是忘了在專案中加入一個 SwiftUI View 的檔案,若你是根據這頁的程式碼,那 SwiftUI View 的檔案要命名為 BarChart.swift,最後將圖表放到這個檔案中,這樣應該就可以了。

  2. 咪嚕
    咪嚕 says:

    您好,我是照著您的步驟命名一個 BarChart.swift並放到Controller中,但出現了”Cannot find ‘Chart’ in scope”和”Cannot find ‘BarMark’ in scope”兩個錯誤訊息。
    我在想是不是因為我引用了這個套件所以衝突到了!
    https://github.com/danielgindi/Charts

  3. 朱克剛
    朱克剛 says:

    如果我在 BarChart.swift 中沒有 import Charts 的話,就會看到這兩個錯誤訊息,你看看是不是這個原因。

發表迴響