今天我們要繼續完成天氣 App的下一個部分，讓使用者能夠自己選擇要查詢的城市或縣市地區。

建立地區選單

我們先在程式中宣告一個陣列 Area，裡面放上所有台灣主要的縣市名稱。
另外，我們用一個變數 selectArea 來記錄目前使用者選擇的地區。

let Area: [String] = [ "宜蘭縣","花蓮縣","臺東縣","澎湖縣","金門縣","連江縣","臺北市","新北市","桃園市",
                           "臺中市","臺南市","高雄市","新竹縣","新竹市","苗栗縣","彰化縣","南投縣","嘉義縣",
                           "嘉義市","屏東縣"]
    var selectArea: String?

設定 PickerView

在畫面上我們放入一個 UIPickerView，並連接到 @IBOutlet。
接著在 viewDidLoad() 中設定它的delegate與dataSource：

    override func viewDidLoad() {
        super.viewDidLoad ()
        CityPickerView.delegate = self
        CityPickerView.dataSource = self
    }

取得使用者選擇

接下來我們製作一個 確認按鈕 。
當使用者選擇好城市後按下按鈕，就可以印出所選地區，並且把這個地區傳到下一個畫面。

    @IBAction func Confirm(_ sender: Any) {
        if let selectAreaa = selectArea {
            print("這是所選擇的地區 \(selectAreaa)")
            let areaVC = SecondViewController(nibName: "SecondViewController", bundle: nil)
            areaVC.selectedArea = selectAreaa
            self.present(areaVC, animated: true, completion: nil)
        }
    }    

Tips:這裡使用 present() 來切換畫面，當使用者按下確認後，就會跳到第二個畫面顯示該地區的天氣資訊。

實作 UIPickerView 的功能

最後，我們讓 MainViewController 實作 UIPickerViewDelegate 和 UIPickerViewDataSource，
並完成顯示與選取的邏輯：

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]
    }
}

結語

今天我們完成了天氣 App的地區選擇功能。