Day21 - 天氣API實作：城市選擇與畫面跳轉

在上一天的內容中，我們完成了天氣資料模型（WeatherData），能夠正確解析從中央氣象署開放資料平臺回傳的 JSON。
今天，我們要開始讓使用者實際操作——從畫面中選擇一個城市，然後進入下一個畫面查看該地區的天氣資料。

專案結構說明

這個部分的核心在 MainViewController.swift。
這個畫面負責：

• 顯示城市選擇器（UIPickerView）
• 讓使用者選擇一個地區
• 點擊按鈕後，進入顯示天氣的第二個畫面

程式碼完整內容

//
//  MainViewController.swift
//  Weather API
//
//  Created by imac-2156 on 2025/7/30.
//

import UIKit  // 匯入 UIKit，iOS UI 開發主要框架

// 主畫面：讓使用者選擇縣市，並可跳轉到第二頁顯示天氣資料
class MainViewController: UIViewController {
    
    // MARK: - IBOutlet
    @IBOutlet weak var CityPickerView: UIPickerView! // 城市選擇器
    @IBOutlet weak var btnData: UIButton!            // 確認按鈕
    
    // MARK: - Property
    // 台灣縣市陣列（供 PickerView 顯示用）
    let Area: [String] = [
        "宜蘭縣","花蓮縣","臺東縣","澎湖縣","金門縣","連江縣",
        "臺北市","新北市","桃園市","臺中市","臺南市","高雄市",
        "新竹縣","新竹市","苗栗縣","彰化縣","南投縣","嘉義縣",
        "嘉義市","屏東縣"
    ]
    
    // 使用者目前選擇的縣市（可能為 nil）
    var selectArea: String?

    // MARK: - LifeCycle
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 設定 PickerView 的 delegate 與 dataSource
        CityPickerView.delegate = self
        CityPickerView.dataSource = self
    }
    
    // MARK: - IBAction
    @IBAction func Confirm(_ sender: Any) {
        // 如果使用者已經選擇縣市
        if let selectAreaa = selectArea {
            print("這是所選擇的地區 \(selectAreaa)")
            
            // 初始化第二個畫面的控制器
            let areaVC = SecondViewController(nibName: "SecondViewController", bundle: nil)
            
            // 將使用者選擇的縣市傳遞過去
            areaVC.selectedArea = selectAreaa
            
            // 以 Modal 方式開啟第二個畫面
            self.present(areaVC, animated: true, completion: nil)
        }
    }
}

// MARK: - 擴展 PickerView 的代理與資料來源方法
extension MainViewController: UIPickerViewDelegate, UIPickerViewDataSource {
    
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1 // 只有一個滾輪
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return Area.count // 顯示縣市數量
    }
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return Area[row] // 顯示每一列的縣市名稱
    }
    
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        selectArea = Area[row] // 儲存使用者選擇的縣市
    }
}

功能說明

PickerView：縣市選擇器

UIPickerView 是一種常見的 iOS UI 元件，讓使用者可以滾動選擇項目。
在這裡，我們把它設為一個滾輪，列出所有台灣縣市。

實作上需要兩個部分：

• dataSource：提供資料內容（城市列表）
• delegate：負責處理使用者選擇事件

這兩個都由 MainViewController 自己實作。

Confirm 按鈕：畫面跳轉

按下「確認」後，App 會檢查 selectArea 是否有值，若有，則：

1. 生成第二頁 SecondViewController
2. 將使用者選的地區傳給它（透過屬性傳值）
3. 使用 present() 開啟新畫面

這是最簡潔的畫面切換方式，後續也可以改成使用 UINavigationController 做 push 式的跳轉。

UI 設計建議

這個畫面只需要三個元件即可完成：

• 一個 UIPickerView（放在中央）
• 一個 UIButton（放在底部）
• 背景可以使用系統色或漸層，讓視覺更乾淨

整體操作流程簡單直覺，也符合 iOS 的設計風格。

小結

今天完成了天氣 App 的第一個互動畫面。
透過 PickerView 讓使用者選擇地區，並在按下按鈕後跳轉到下一頁。
這樣，我們的 App 就正式從靜態資料邁入「使用者互動」階段。

下一篇，我們會繼續在第二頁中實作 API 資料的請求與顯示，把中央氣象局的天氣資料拉回來，呈現在畫面上。
章？