Uno Platform 入门教程：使用XAML和MVUX模式构建计数器应用

Uno Platform 入门教程：使用XAML和MVUX模式构建计数器应用

前言

本教程将带领开发者使用Uno Platform框架，通过XAML标记语言和MVUX（Model-View-Update-eXtended）设计模式，构建一个跨平台的计数器应用程序。Uno Platform是一个强大的框架，允许开发者使用单一代码库为Windows、Android、iOS、macOS和WebAssembly等多个平台创建应用程序。

环境准备

在开始之前，请确保已安装以下工具：

• Visual Studio 2022（推荐最新版本）
• 已安装Uno Platform扩展

创建新项目

使用Visual Studio创建

1. 启动Visual Studio，选择"创建新项目"
2. 在搜索框中输入"Uno Platform"
3. 选择"Uno Platform App"模板，点击"下一步"
4. 将项目命名为"Counter"，点击"创建"

在Uno Platform模板向导中，我们需要进行以下配置：

• 选择"Blank"模板
• 在"Presentation"选项卡中选择"MVUX"
• 在"Markup"选项卡中选择"XAML"

点击"创建"完成项目初始化。模板将生成一个包含多个项目的解决方案，其中主项目是包含应用程序代码的类库。

使用命令行创建

开发者也可以使用dotnet CLI创建项目：

dotnet new unoapp -preset blank -presentation mvux -markup xaml -o Counter

项目结构解析

生成的解决方案包含以下关键部分：

• Counter：主项目，包含共享的应用程序代码
• 多个平台特定的项目头（heads），用于支持不同平台的运行

构建用户界面

打开MainPage.xaml文件，我们将构建计数器应用的基本界面：

<Page x:Class="Counter.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:Counter"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <StackPanel VerticalAlignment="Center">
    <!-- 应用Logo -->
    <Image Width="150" Height="150" Source="Assets/logo.png" />
    
    <!-- 步长输入框 -->
    <TextBox PlaceholderText="Step Size" />
    
    <!-- 计数器显示 -->
    <TextBlock>
      <Run Text="Counter: " />
      <Run Text="0" />
    </TextBlock>
    
    <!-- 增加按钮 -->
    <Button Content="Increment Counter by Step Size" />
  </StackPanel>
</Page>

实现MVUX模式

MVUX是Uno Platform推荐的设计模式，它基于Elm架构，特别适合构建响应式UI应用。

创建数据模型

1. 添加一个名为MainModel.cs的新类
2. 实现计数器逻辑：

public partial record MainModel
{
    public int Count { get; init; }
    public int Step { get; init; } = 1;
    
    public ValueTask Increment(CancellationToken ct)
    {
        return new ValueTask(Task.CompletedTask);
    }
}

创建可绑定模型

为了使模型能够与XAML绑定，我们需要创建一个可绑定版本：

public partial class BindableMainModel
{
    public BindableMainModel()
    {
        Model = new MainModel();
    }
    
    public IState<int> Count => State.Value(this, () => 0);
    public IState<int> Step => State.Value(this, () => 1);
    
    public ICommand IncrementCommand => new AsyncCommand(Increment);
    
    private async Task Increment()
    {
        // 实现增加逻辑
    }
}

数据绑定实现

将UI元素与数据模型绑定是MVUX模式的核心：

<Page.DataContext>
    <local:BindableMainModel />
</Page.DataContext>

<!-- 计数器显示绑定 -->
<TextBlock>
    <Run Text="Counter: " />
    <Run Text="{Binding Count}" />
</TextBlock>

<!-- 步长输入绑定 -->
<TextBox Text="{Binding Step, Mode=TwoWay}" />

<!-- 按钮命令绑定 -->
<Button Command="{Binding IncrementCommand}" />

功能实现

完善BindableMainModel中的Increment方法：

private async Task Increment()
{
    var currentStep = await Step;
    var currentCount = await Count;
    await Count.Update(currentCount + currentStep, CancellationToken.None);
}

运行与测试

现在可以运行应用程序进行测试：

1. 在文本框中输入步长值
2. 点击增加按钮
3. 观察计数器是否正确增加

总结

通过本教程，我们完成了以下工作：

1. 创建了一个Uno Platform项目
2. 使用XAML构建了用户界面
3. 实现了MVUX模式的数据模型
4. 完成了数据绑定和业务逻辑

这个简单的计数器应用展示了Uno Platform开发的基本流程，开发者可以在此基础上继续扩展功能，如添加减少按钮、重置功能等。

进阶建议

对于想要深入学习的开发者，可以考虑：

1. 添加输入验证，确保步长为有效数字
2. 实现本地存储，保存计数器的状态
3. 添加多语言支持
4. 实现主题切换功能

Uno Platform的强大之处在于其跨平台能力，开发者可以尝试将应用部署到不同平台，体验真正的"一次编写，处处运行"。