Avalonia:开发Android应用
<p>我把成功开发Android应用的经过记录下来，在开发过程中，模拟器经常出问题，将Java Development Kit的位置和Android SDK的位置改动一下，就解决了模拟器报错的问题，这是在Github上看到的解决办法。<br>先建Models文件夹，创建模型ColorItem.cs文件。</p>
<pre><code>using Avalonia.Media;
namespace AvaloniaMobileApp.Models
{
public class ColorItem
{
public Color? Color { get; set; }
public string? ColorName {get; set; }
}
}
</code></pre>
<p>再创建ColorItemMessage记录，用于在viewmodel间传递参数。</p>
<pre><code>namespace AvaloniaMobileApp.Models
{
publicrecord ColorItemMessage(string Sender,ColorItem Item);
}
</code></pre>
<p>先前用ReactiveUI写移动应用，结果闪退了，换用Communitytoolkit.mvvm社区工具，所以将ViewModelBase.cs继承 ObservableRecipient。</p>
<pre><code>using CommunityToolkit.Mvvm.ComponentModel;
namespace AvaloniaMobileApp.ViewModels;
public abstract class ViewModelBase : ObservableRecipient
{
}
</code></pre>
<p>在ViewModels文件夹下先创建要展示的页面ViewModel，ColorsViewModel.cs，AboutViewModel.cs，PalletteViewModel.cs。<br>
ColorsViewModel.cs</p>
<pre><code>using Avalonia.Data.Converters;
using Avalonia.Media;
using AvaloniaMobileApp.Models;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using CommunityToolkit.Mvvm.Messaging;
using System;
using System.Collections.ObjectModel;
using System.Reflection;
using System.Threading.Tasks;
namespace AvaloniaMobileApp.ViewModels
{
public partial class ColorsViewModel : ViewModelBase
{
public ObservableCollection<ColorItem> Colors { get; }
public ColorsViewModel()
{
Colors = [];
}
private ColorItem _selectedColorItem = new();
partial void OnSelectedColorItemChanged(ColorItem value)
{
IsActive = true;
WeakReferenceMessenger.Default.Send(new ColorItemMessage("colors", value));
}
private Task Init()
{
if (Colors.Count > 0)
{
return Task.CompletedTask;
}
var properties = typeof(Colors).GetProperties(BindingFlags.Public | BindingFlags.Static);
foreach (var property in properties)
{
if (property.GetValue(null) is Color color)
{
Colors.Add(new ColorItem
{
Color = color,
ColorName = property.Name
});
}
}
return Task.CompletedTask;
}
public static FuncValueConverter<Color, string> ColorToHex => new(color =>
{
return $"#{color.R:X2}{color.G:X2}{color.B:X2}";
});
public static FuncValueConverter<Color, string> ColorToCMYK => new(value =>
{
if (value is Color color)
{
double r = color.R / 255.0;
double g = color.G / 255.0;
double b = color.B / 255.0;
double k = 1 - Math.Max(Math.Max(r, g), b);
double c = k < 1 ? (1 - r - k) / (1 - k) : 0;
double m = k < 1 ? (1 - g - k) / (1 - k) : 0;
double y = k < 1 ? (1 - b - k) / (1 - k) : 0;
return $"CMYK = ({Math.Round(c*100,1)}% {Math.Round(m*100,1)}% {Math.Round(y*100,1)}% {Math.Round(k*100,1)}%)";
}
else
{
return "";
}
});
}
}
</code></pre>
<p>AboutViewModel.cs</p>
<pre><code>using System.Reflection;
namespace AvaloniaMobileApp.ViewModels
{
public class AboutViewModel : ViewModelBase
{
public string? AppName => Assembly.GetExecutingAssembly().GetName().Name;
public string? Version => Assembly.GetExecutingAssembly().GetName().Version!.ToString();
public string? Message => $"该应用使用 Avalonia框架，Avalonia 是跨平台的优秀框架，这是 Android App，使用 Avalonia 基础导航功能，应用 CommunityToolKit.Mvvm 工具开发";
}
}
</code></pre>
<p>PalletteViewModel.cs</p>
<pre><code>using Avalonia.Media;
using AvaloniaMobileApp.Models;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Messaging;
namespace AvaloniaMobileApp.ViewModels
{
public partial class PalletteViewModel : ViewModelBase, IRecipient<ColorItemMessage>
{
private Color? _colorType;
private ColorItem? _colorItem;
public void Receive(ColorItemMessage message)
{
if(message.Sender == "main")
{
ColorType = message.Item.Color;
ColorItem = message.Item;
Red = message.Item.Color!.Value.R;
Green = message.Item.Color.Value.G;
Blue = message.Item.Color.Value.B;
}
}
public PalletteViewModel()
{
IsActive = true;
}
private byte red;
private byte green;
private byte blue;
private void UpdateColorType()
{
ColorType = Color.FromRgb((byte)Red, (byte)Green, (byte)Blue);
}
partial void OnRedChanged(byte value) => UpdateColorType();
partial void OnGreenChanged(byte value) => UpdateColorType();
partial void OnBlueChanged(byte value) => UpdateColorType();
}
}
</code></pre>
<p>更改MainViewModel.cs</p>
<pre><code>using AvaloniaMobileApp.Models;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using CommunityToolkit.Mvvm.Messaging;
using Microsoft.Extensions.DependencyInjection;
using System.Threading.Tasks;
namespace AvaloniaMobileApp.ViewModels;
public partial class MainViewModel : ViewModelBase, IRecipient<ColorItemMessage>
{
private ViewModelBase? _currentPage;
private ColorItem _selectedColorItem = new();
public MainViewModel()
{
CurrentPage = App.Current.Services?.GetService<ColorsViewModel>();
IsActive = true;
}
public void Receive(ColorItemMessage message)
{
if(message.Sender == "colors")
{
SelectedColorItem = message.Item;
GotoPalletteCommand.Execute(null);
}
}
private Task GotoAbout()
{
if(CurrentPage is not AboutViewModel)
{
CurrentPage = App.Current.Services?.GetService<AboutViewModel>();
}
return Task.CompletedTask;
}
private Task GotoHome()
{
if(CurrentPage is not ColorsViewModel)
{
CurrentPage = App.Current.Services?.GetService<ColorsViewModel>();
}
return Task.CompletedTask;
}
private Task GotoPallette()
{
if (CurrentPage is not PalletteViewModel)
{
CurrentPage = App.Current.Services!.GetService<PalletteViewModel>();
WeakReferenceMessenger.Default.Send(new ColorItemMessage("main", SelectedColorItem));
}
return Task.CompletedTask;
}
}
</code></pre>
<p>创建要展示的Views,ColorsView.axaml。</p>
<pre><code><UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="using:AvaloniaMobileApp.ViewModels"
xmlns:models="using:AvaloniaMobileApp.Models"
xmlns:b="using:AvaloniaMobileApp.Behaviors"
x:DataType="vm:ColorsViewModel"
b:LoadedBehavior.ExecuteCommand="{Binding InitCommand}"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="AvaloniaMobileApp.Views.ColorsView">
<Grid RowDefinitions="Auto,*,auto">
<TextBlock Text="{Binding Colors.Count,StringFormat='Avalonia.Media Colors = {0}'}" Grid.Row="0"/>
<ListBox x:Name="ColorsListBox" Grid.Row="1" ItemsSource="{Binding Colors}" SelectedItem="{Binding SelectedColorItem}">
<ListBox.ItemTemplate>
<DataTemplate x:DataType="models:ColorItem">
<StackPanel Orientation="Horizontal">
<Rectangle Height="80" Width="80">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding Color}"/>
</Rectangle.Fill>
</Rectangle>
<StackPanel>
<TextBlock Text="{Binding ColorName}"/>
<TextBlock Text="{Binding Color,Converter={x:Static vm:ColorsViewModel.ColorToHex}}"/>
<TextBlock Text="{Binding Color,Converter={x:Static vm:ColorsViewModel.ColorToCMYK}}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
</code></pre>
<p>由于在代码中应用了这二行代码，导致xaml设计器报错。</p>
<pre><code><TextBlock Text="{Binding Color,Converter={x:Static vm:ColorsViewModel.ColorToHex}}"/>
<TextBlock Text="{Binding Color,Converter={x:Static vm:ColorsViewModel.ColorToCMYK}}"/>
</code></pre>
<p>如果不介意的话，可以忽略，不影响运行，介意就改成IValueConverter。<br>
AboutView.axaml</p>
<pre><code><UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:vm="using:AvaloniaMobileApp.ViewModels"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:DataType="vm:AboutViewModel"
x:Class="AvaloniaMobileApp.Views.AboutView">
<Grid RowDefinitions="Auto,Auto">
<StackPanel Orientation="Horizontal" Spacing="5" Grid.Row="0">
<TextBlock x:Name="AppNameTextBlock" Text="{Binding AppName}" FontSize="18" FontWeight="Bold"/>
<TextBlock x:Name="VersionTextBlock" FontSize="16" Text="{Binding Version}"/>
</StackPanel>
<TextBlock x:Name="MessageTextBlock" Grid.Row="1" TextWrapping="Wrap" Text="{Binding Message}"/>
</Grid>
</UserControl>
</code></pre>
<p>Pallette.axaml</p>
<pre><code><UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
xmlns:vm="using:AvaloniaMobileApp.ViewModels"
x:DataType="vm:PalletteViewModel"
xmlns:conv="using:AvaloniaMobileApp.Converter"
x:Class="AvaloniaMobileApp.Views.PalletteView">
<Grid RowDefinitions="Auto,Auto,Auto">
<TextBlock Text="{Binding ColorItem.ColorName,StringFormat='传过来的颜色名: {0}'}" Grid.Row="0"/>
<Border Grid.Row="1" Background="White" Margin="5">
<Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="200">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding ColorType}"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<UniformGrid Columns="6" Grid.Row="2">
<TextBlock Text="Red:" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBox Watermark="16进制值" Text="{Binding Red,Converter={x:Static conv:ByteToString.Instance},UpdateSourceTrigger=LostFocus}"Grid.Column="1"/>
<TextBlock Text="Green:" Grid.Column="2" HorizontalAlignment="Right"/>
<TextBox Watermark="16进制值" Text="{Binding Green,Converter={x:Static conv:ByteToString.Instance},UpdateSourceTrigger=LostFocus}" Grid.Column="3"/>
<TextBlock Text="Blue:" Grid.Column="4" HorizontalAlignment="Right"/>
<TextBox Watermark="16进制值" Text="{Binding Blue,Converter={x:Static conv:ByteToString.Instance},UpdateSourceTrigger=LostFocus}" Grid.Column="5"/>
</UniformGrid>
</Grid>
</UserControl>
</code></pre>
<p>MainView.axaml</p>
<pre><code><UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:AvaloniaMobileApp.ViewModels"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="AvaloniaMobileApp.Views.MainView"
x:DataType="vm:MainViewModel">
<Design.DataContext>
<!-- This only sets the DataContext for the previewer in an IDE,
to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
<vm:MainViewModel />
</Design.DataContext>
<Border x:Name="MainBorder">
<Grid RowDefinitions="Auto,*,Auto">
<Grid ColumnDefinitions="*,Auto" Grid.Row="0">
<TextBlock Text="Colors View" x:Name="TitleTextBlock" Grid.Column="0"/>
<StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="10">
<Button Command="{Binding GotoHomeCommand}" Content="&lt;&#8211;" FontSize="18"/>
<Button Command="{Binding GotoAboutCommand}" Content="About"/>
</StackPanel>
</Grid>
<TransitioningContentControl Grid.Row="1" Content="{Binding CurrentPage}">
<TransitioningContentControl.PageTransition>
<CrossFade Duration="0:0:0.500"/>
</TransitioningContentControl.PageTransition>
</TransitioningContentControl>
</Grid>
</Border>
</UserControl>
</code></pre>
<p>MainWindow.axaml文件不用动。<br>
由于不能用ReactiveUI，就得写附加属性，将命令绑定到事件。</p>
<pre><code>using Avalonia;
using Avalonia.Controls;
using Avalonia.Data;
using Avalonia.Interactivity;
using System.Windows.Input;
namespace AvaloniaMobileApp.Behaviors
{
public class LoadedBehavior : AvaloniaObject
{
static LoadedBehavior()
{
ExecuteCommandProperty.Changed.AddClassHandler<Interactive>(OnExecuteCommandChanged);
}
private static void OnExecuteCommandChanged(Interactive interactive, AvaloniaPropertyChangedEventArgs args)
{
if (args.NewValue is ICommand command)
{
interactive.AddHandler(Control.LoadedEvent, Handler);
}
else
{
interactive.RemoveHandler(Control.LoadedEvent, Handler);
}
}
private static void Handler(object? sender, RoutedEventArgs e)
{
if (sender is Interactive interactive)
{
var command = interactive.GetValue(ExecuteCommandProperty);
if (command?.CanExecute(null) == true)
{
command.Execute(null);
}
}
}
public static readonly AttachedProperty<ICommand> ExecuteCommandProperty = AvaloniaProperty
.RegisterAttached<LoadedBehavior, Interactive, ICommand>("ExecuteCommand", default, false, BindingMode.OneWay);
public static ICommand GetExecuteCommand(AvaloniaObject obj)
{
return obj.GetValue(ExecuteCommandProperty);
}
public static void SetExecuteCommand(AvaloniaObject obj, ICommand value)
{
obj.SetValue(ExecuteCommandProperty, value);
}
}
}
</code></pre>
<p>在Converter文件夹下创建ByteToString.cs,将byte转换成string。</p>
<pre><code>using Avalonia.Data;
using Avalonia.Data.Converters;
using System;
using System.Globalization;
namespace AvaloniaMobileApp.Converter
{
public class ByteToString : IValueConverter
{
public static readonly ByteToString Instance = new();
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{
if (value is byte b && targetType.IsAssignableTo(typeof(string)))
{
return b.ToString("X2");
}
return new BindingNotification(new InvalidCastException(), BindingErrorType.Error);
}
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
{
if(value is string str && targetType.IsAssignableTo(typeof(byte)))
{
if(byte.TryParse(str,NumberStyles.HexNumber,CultureInfo.InvariantCulture,out var b))
{
return b;
}
return byte.MinValue;
}
return new BindingNotification(new InvalidCastException(), BindingErrorType.Error);
}
}
}
</code></pre>
<p>在App.axaml中编写样式。</p>
<pre><code><Application xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AvaloniaMobileApp"
x:Class="AvaloniaMobileApp.App"
RequestedThemeVariant="Default">
<!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
<Application.DataTemplates>
<local:ViewLocator/>
</Application.DataTemplates>
<Application.Resources>
<SolidColorBrush x:Key="PrimaryBackground">#4A598F</SolidColorBrush>
<SolidColorBrush x:Key="PrimaryForeground">#E8EFF7</SolidColorBrush>
</Application.Resources>
<Application.Styles>
<FluentTheme />
<!--style-->
<Style Selector="Border#MainBorder">
<Setter Property="Background" Value="{StaticResource PrimaryBackground}"/>
</Style>
<Style Selector="Border">
<Setter Property="Padding" Value="10"/>
</Style>
<Style Selector="TextBlock">
<Setter Property="Foreground" Value="{StaticResource PrimaryForeground}"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style Selector="ListBox">
<Setter Property="Margin" Value="5"/>
</Style>
<Style Selector="ListBox TextBlock">
<Setter Property="Foreground" Value="Black"/>
</Style>
<Style Selector="TextBlock#TitleTextBlock">
<Setter Property="FontSize" Value="18"/>
<Setter Property="FontWeight" Value="Bold"/>
</Style>
<Style Selector="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Padding" Value="5"/>
</Style>
<Style Selector="Button /template/ ContentPresenter">
<Setter Property="Foreground" Value="{StaticResource PrimaryForeground}"/>
</Style>
<Style Selector="Rectangle">
<Setter Property="Margin" Value="5"/>
</Style>
</Application.Styles>
</Application>
</code></pre>
<p>在App.axaml.cs文件中使用ioc。</p>
<pre><code>using Avalonia;
using Avalonia.Controls.ApplicationLifetimes;
using Avalonia.Data.Core.Plugins;
using Avalonia.Markup.Xaml;
using AvaloniaMobileApp.ViewModels;
using AvaloniaMobileApp.Views;
using Microsoft.Extensions.DependencyInjection;
using System;
using System.Linq;
namespace AvaloniaMobileApp;
public partial class App : Application
{
public override void Initialize()
{
AvaloniaXamlLoader.Load(this);
}
public IServiceProvider? Services { get; private set; }
public new static App Current => (App)Application.Current!;
private IServiceProvider ConfigureServices()
{
var services = new ServiceCollection();
services.AddTransient<AboutViewModel>();
services.AddTransient<ColorsViewModel>();
services.AddTransient<PalletteViewModel>();
return services.BuildServiceProvider();
}
public override void OnFrameworkInitializationCompleted()
{
BindingPlugins.DataValidators.RemoveAt(0);
Services = ConfigureServices();
if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
{
// Avoid duplicate validations from both Avalonia and the CommunityToolkit.
// More info: https://docs.avaloniaui.net/docs/guides/development-guides/data-validation#manage-validationplugins
DisableAvaloniaDataAnnotationValidation();
desktop.MainWindow = new MainWindow
{
DataContext = new MainViewModel()
};
}
else if (ApplicationLifetime is ISingleViewApplicationLifetime singleViewPlatform)
{
singleViewPlatform.MainView = new MainView
{
DataContext = new MainViewModel()
};
}
base.OnFrameworkInitializationCompleted();
}
private void DisableAvaloniaDataAnnotationValidation()
{
// Get an array of plugins to remove
var dataValidationPluginsToRemove =
BindingPlugins.DataValidators.OfType<DataAnnotationsValidationPlugin>().ToArray();
// remove each entry found
foreach (var plugin in dataValidationPluginsToRemove)
{
BindingPlugins.DataValidators.Remove(plugin);
}
}
}
</code></pre>
<p>将项目设为Android启动，存档，分发。<br>
在我的荣耀手机Magic5 pro上成功运行。<br>
效果展示。</p>
<p><img src="https://img2024.cnblogs.com/blog/3617433/202509/3617433-20250925212201182-1263385032.jpg"></p>
<p><img src="https://img2024.cnblogs.com/blog/3617433/202509/3617433-20250925212212575-1112709768.jpg"></p>
<p><img src="https://img2024.cnblogs.com/blog/3617433/202509/3617433-20250925212222701-876492886.jpg"></p><br><br>
来源：https://www.cnblogs.com/fudc/p/19111971
頁:
[1]