一、.NET MAUI開發環境搭建&安卓SDK和安卓模擬器安裝提示網路連線失敗問題解決
引言
本節目標是幫助第一次搭建.NET MAUI開發環境,在下載安卓SDK和安卓模擬器過程中一直提示網路問題解決思路。
現象一:Visiual Studio 2022中新增Android裝置管理時,提示系統映像下載錯誤:Network is not reachable. Please check your connection and try again.
![.NET MAUI 安卓應用開發初體驗](https://i.iter01.com/images/d961cdfe03e16e65829ca2f3f6644e9b11c6ada6fd496093983bc81a75e5e0cd.png)
現象二:Visiual Studio 2022中新增Android SDK和工具時,提示"網路不可用。請檢查你的連線,然後再重試"
![.NET MAUI 安卓應用開發初體驗](https://i.iter01.com/images/543da12a693d3d393ce3db09f346a219e702ea6bf8e4de1c1536733e8d495442.png)
.NET MAUI 簡介
官方文件
什麼是 .NET MAUI? - .NET MAUI | Microsoft Learn
.NET Multi-platform App UI (.NET MAUI) is a cross-platform framework for creating native mobile and desktop apps with C# and XAML.
Using .NET MAUI, you can develop apps that can run on Android, iOS, macOS, and Windows from a single shared code-base.
.NET MAUI 全稱 .NET Multi-platform App UI
開發環境介紹
VS版本:Microsoft Visual Studio Community 2022 (64 位) - Current 版本 17.4.1
.NET 版本:.NET 7.0 STS
安裝【 .NET Multi-platform App UI 開發】
![.NET MAUI 安卓應用開發初體驗](https://i.iter01.com/images/16947adee6310ca79bc5e0a8ecb4fa84b132277e2dce07e74c9d7318641bb70a.png)
Android SDK 和 安卓模擬器
這裡直接介紹出現網路問題後,解決方案
1、檢視VS中 Android SDK 儲存位置
2、安裝 JAVA JDK,並配置在系統環境中JAVA_HOME (可以選擇JDK11或者JDK 8.0)
3、下載並安裝 Android Studio
4、啟動Android Studio,設定國內映象
![.NET MAUI 安卓應用開發初體驗](https://i.iter01.com/images/0bea04793bd41c1beaaae0760b0050411a4120a5a9c5d4623373b19a42f0a969.png)
![.NET MAUI 安卓應用開發初體驗](https://i.iter01.com/images/bd00699e5c02e3353c5aeca3d108da32eae08a940e4608c6b15a10efc7cf40f2.png)
5、設定 Android SDK 儲存位置,將Android Studio 中SDK 儲存位置 和 VS 中一樣
![.NET MAUI 安卓應用開發初體驗](https://i.iter01.com/images/f60adcfa9b0461d8a9bc0a76e8fec7c4570d25df331f55b56dac435c2cdb61b0.png)
6、下載對應的Android SDK 和 Android Emulator
![.NET MAUI 安卓應用開發初體驗](https://i.iter01.com/images/ca8becf8578cc5512a5126886634adffc58316bc6fbb8f18724486f7c95171b9.png)
7、透過AVD Manager新建安卓模擬裝置
二、第一個.NET MAUI 安卓應用程式
跟著官方文件,開啟第一個.NET MAUI 程式
新建一個.NET MAUI應用程式
![.NET MAUI 安卓應用開發初體驗](https://i.iter01.com/images/2656ea6a9172b357e8fc1310bb613784c114c4ff7b00a35b854b36f47c3ddffc.png)
執行效果
![.NET MAUI 安卓應用開發初體驗](https://i.iter01.com/images/54186f11f41dcd71502a856c0473af4ad85bba8032c093efe7450063d6784806.png)
專案截圖
![.NET MAUI 安卓應用開發初體驗](https://i.iter01.com/images/ceaf2d2a081cdfa08d13afce78bb84d04b67ff5dcf1ca672cb6583ced4b5927b.png)
MainViewModel
新建ViewModel資料夾,新增MainViewModel類,繼承ObservableObject。透過NuGet新增CommunityToolkit.Mvvm 8.1.0-preview1 依賴項。
public partial class MainViewModel : ObservableObject
{
public MainViewModel()
{
this.Items= new ObservableCollection<string>();
}
[ObservableProperty]
public string inputText;
[ObservableProperty]
public ObservableCollection<string> items;
[RelayCommand]
public void Add()
{
if (!string.IsNullOrWhiteSpace(InputText))
{
Items.Add(InputText);
InputText = string.Empty;
}
}
[RelayCommand]
public void Remove(string item)
{
if (Items.Contains(item))
{
Items.Remove(item);
}
}
}
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppMvvM.MainPage"
xmlns:viewModel="clr-namespace:MauiAppMvvM.ViewModel"
x:DataType="viewModel:MainViewModel"
x:Name="mainPage">
<Grid RowDefinitions="100, Auto, *"
ColumnDefinitions=".75*, .25*"
Padding="10"
RowSpacing="10"
ColumnSpacing="10">
<Image Grid.ColumnSpan="2"
Source="dotnet_bot.svg"
BackgroundColor="Orange"/>
<Entry Placeholder="請輸入您的任務項"
Grid.Row="1"
Grid.Column="0"
Keyboard="Chat"
Text ="{Binding InputText}"/>
<Button Text="Add"
Grid.Row="1"
Grid.Column="1"
Command="{Binding AddCommand}" />
<CollectionView Grid.Row="2"
Grid.ColumnSpan="2"
ItemsSource="{Binding Items}">
<CollectionView.ItemTemplate >
<DataTemplate x:DataType="{x:Type x:String}">
<SwipeView>
<SwipeView.RightItems>
<SwipeItem Text="Delete"
IconImageSource="delete.png"
BackgroundColor="LightPink"
Command="{Binding Source={RelativeSource AncestorType={x:Type viewModel:MainViewModel}}, Path=RemoveCommand}"
CommandParameter="{Binding .}"/>
</SwipeView.RightItems>
<Grid Padding="0,5">
<Frame>
<Label Text="{Binding .}"
FontSize="24"/>
</Frame>
</Grid>
</SwipeView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
</ContentPage>
MainPage.xaml.cs
public MainPage(MainViewModel viewModel)
{
InitializeComponent();
this.BindingContext = viewModel;
}
MauiProgram.cs
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
#if DEBUG
builder.Logging.AddDebug();
#endif
builder.Services.AddSingleton<MainPage>();
builder.Services.AddSingleton<ViewModel.MainViewModel>();
return builder.Build();
}
}
至此,一個完整的.NET MAUI完成了,讓我們一起享受.NET MAUI之旅吧!
後記
<SwipeItem Text="Delete"
IconImageSource="delete.png"
BackgroundColor="LightPink"
Command="{Binding Source={RelativeSource AncestorType={x:Type viewModel:MainViewModel}}, Path=RemoveCommand}"
CommandParameter="{Binding .}"/>
SwipeItem的Command實際沒有生效,目前還沒有找到原因