使用 .NET MAUI 建立移動應用——Get Start

2022-06-14 12:01:23

大家好,我是張飛洪,感謝您的閱讀,我會不定期和你分享學習心得,希望我的文章能成為你成長路上的墊腳石,讓我們一起精進。

1、IDE下載安裝

  • 如果你還沒安裝Visual Studio 2022 預覽版

你可以點選下載

在安裝過程中,應選擇.NET 跨平臺應用程式 UI 開發,如下圖所示:

  • 已經擁有 Visual Studio 2022 預覽版

如果您已經擁有 Visual Studio 2022 預覽版,則可以更新以新增 .NET MAUI 支援。

 

2、建立應用

  • 開啟 Visual Studio 2022 預覽版。
  • 選擇建立新專案按鈕。
  • 專案型別下拉選單中選擇MAUI 。
  • 選擇.NET MAUI App模板並選擇下一步按鈕。

 

  • 輸入MyFirstMauiApp作為專案名稱並選擇Create按鈕。

  • 還原 NuGet 包

等待NuGet 自動還原應用程式的依賴項,等到螢幕左下方的狀態列中出現已恢復就緒訊息。

3、執行應用

本教學將重點介紹首先將 .NET MAUI 應用程式部署到本地 Windows 計算機。稍後,您可以選擇設定 Android 裝置或模擬器。

  • 為開發設定 Windows

要開發 Windows 應用程式,您需要啟用開發人員模式以在 Windows 11 或 Windows 10 上旁載入應用程式。

啟用開發者模式

  1. 在 Windows 上,轉到「設定」應用程式。
  2. 在 Windows 11 上的隱私和安全和 Windows 10 上的更新和安全中搜尋開發人員設定
  3. 開啟Developer Mode下的切換開關。

4.將顯示使用開發人員功能對話方塊。選擇「是」以確認您要啟用開發者模式。

  • 在 Windows 上執行

現在已準備好執行 .NET MAUI 應用並將其部署到 Windows。在工具列中,預設將Windows 機器視為偵錯目標。

選擇「偵錯」 > 「開始偵錯F5」(或按)

4、編輯程式碼

使用 .NET MAUI 開發時,可以在偵錯時使用 XAML 熱過載。這意味著您可以在執行時更改 XAML 使用者介面, UI 將自動更新。

解決方案資源管理器中,雙擊專案MainPage.xaml下的檔案MyFirstMauiApp。

目前,Text第一個Label設定為Hello, World!如下程式碼所示:

<Label
    Text="Hello, World!" 
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" >

將文字更新為Hello, .NET MAUI!:

<Label
    Text="Hello, .NET MAUI!" 
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" >

UI 會自動更新:

使用 .NET MAUI 開發時,還可以使用 .NET Hot Reload 重新載入 C# 程式碼。我們修改程式中的邏輯,將計數增加 10 而不是 1。

開啟MainPage.xaml.cs(此檔案巢狀在 MainPage.xaml 下,或者您可以右鍵單擊並從選單中選擇檢視程式碼)。

該OnCounterClicked檔案上的方法當前具有以下程式碼:

private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

通過將 更改為 來更新count++;以增加 10 count += 10;

private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

要應用程式碼更改,請在 Visual Studio 中選擇熱過載按鈕或選擇 ALT+F10.

選擇「點選我」按鈕,看到它增加了 10。

5、設定安卓裝置

可以根據自己的開發環境決定部署到多個平臺。剛剛執行並部署到 Windows。現在,讓我們設定一個 Android 裝置或模擬器。

  • 安卓 SDK 安裝

從偵錯下拉式選單中,選擇框架下的 net6.0-android

構建專案需要特定版本的 Android SDK。如果您尚未接受 Android SDK 許可,您將在錯誤列表視窗中看到以下錯誤訊息。

雙擊訊息以開始許可接受過程。對存在的每個許可證單擊接受,然後將開始自動安裝。

  • 設定安卓模擬器

如果您沒有要部署的 Android 裝置,則可以設定 Android 模擬器。如果你已經這樣做了,你可以跳過這一步。

如果這是您第一次構建 .NET MAUI 應用程式,您將在偵錯選單中看到「Android Emulator」。單擊它開始建立過程。

這會彈出使用者帳戶控制提示。選擇按鈕,模擬器建立過程將開始。選擇建立按鈕以使用預設設定建立模擬器。

此時,可能會提示您同意 Android 模擬器的許可協定。選擇接受以繼續該過程,下載模擬器影象並完成模擬器的建立,建立模擬器後,您會看到一個顯示Start的按鈕。點選它。

您可能會收到啟用 Windows Hypervisor 平臺的提示。按照檔案啟用加速以提高效能(強烈推薦)

Android 模擬器將啟動。等待它完全完成啟動,您將看到它顯示在 Visual Studio 偵錯選單中。

您的 Android 模擬器現已建立並可以使用。下次執行 Visual Studio 時,模擬器將直接出現在偵錯目標視窗中,並在您選擇它時啟動。

  • 設定安卓裝置

要使用 Android 裝置進行開發,需要啟用 USB 偵錯。按照裝置上的這些步驟將其連線到 Visual Studio。如果您沒有 Android 裝置,則可以跳過此部分。

啟用開發者模式

  1. 轉到設定螢幕。
  2. 使用設定螢幕頂部的搜尋查詢內部版本號,或在關於手機中找到它。
  3. 點選內部版本號7-10 次,直到「你現在是開發者了!」 彈出。
  4. 單擊建立

檢查 USB 偵錯狀態

  1. 轉到設定螢幕。
  2. 使用設定螢幕頂部的搜尋查詢USB 偵錯,或在開發人員選項中找到它。
  3. 如果尚未啟用USB 偵錯,請啟用它。

信任裝置

  1. 將您的裝置插入計算機。
  2. 系統將提示您允許 USB 偵錯
  3. 選中始終允許從此計算機
  4. 單擊允許

您的裝置現已設定好,並將作為部署目標顯示在 Visual Studio 中。

  • 在安卓上執行

確保您的裝置或模擬器被選為偵錯目標。

從選單中,選擇偵錯>開始偵錯(或按F5)。如果禁用此選項,請確保選擇了模擬器或裝置。

應用程式將構建、部署到所選的 Android 裝置/模擬器並執行。