Uno Platform入门教程：使用C Markup和MVUX构建计数器应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00316/article/details/148418647

Uno Platform入门教程：使用C# Markup和MVUX构建计数器应用

uno 项目地址: https://gitcode.com/gh_mirrors/uno/Uno

前言

本教程将带领初学者使用Uno Platform框架，结合C# Markup和MVUX模式，构建一个跨平台的计数器应用。通过这个实践项目，您将掌握Uno Platform开发的核心概念和基本工作流程。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

安装最新版本的Visual Studio（推荐2022版）
安装Uno Platform扩展
.NET SDK 6.0或更高版本

创建新项目

使用Visual Studio创建

打开Visual Studio，选择"创建新项目"
在搜索框中输入"Uno Platform"
选择"Uno Platform App"模板，点击"下一步"
将项目命名为"Counter"，点击"创建"

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

选择"Blank"应用类型
在"Presentation"选项卡中选择"MVUX"框架
在"Markup"选项卡中选择"C# Markup"方式
点击"创建"完成项目生成

使用命令行创建

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

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

项目结构解析

生成的项目包含以下主要部分：

Counter：主项目，包含应用逻辑和共享UI
多个平台特定的项目头（如Android、iOS、Windows等）

构建UI界面

我们将使用C# Markup方式构建UI，这种方式允许我们完全用C#代码定义界面布局，无需XAML文件。

主页面布局

在MainPage.cs中，我们构建一个垂直堆叠的面板：

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.Content(
            new StackPanel()
                .VerticalAlignment(VerticalAlignment.Center)
                .Children(
                    // 这里将添加UI元素
                )
        );
    }
}

添加UI元素

应用图标：

new Image()
    .Width(150)
    .Height(150)
    .Source("ms-appx:///Assets/logo.png")

计数器显示：

new TextBlock()
    .TextAlignment(TextAlignment.Center)
    .Text("Counter: 0")

步长输入框：

new TextBox()
    .PlaceholderText("Step Size")

增加按钮：

new Button()
    .Content("Increment Counter by Step Size")

实现业务逻辑（MVUX模式）

MVUX(Model-View-Update-eXtended)是Uno Platform推荐的状态管理模式，类似于MVVM但更适合响应式编程。

创建数据模型

定义主模型接口：

public interface IMainModel
{
    int Count { get; }
    int Step { get; set; }
    ICommand IncrementCommand { get; }
}

实现可绑定模型：

public class BindableMainModel : BindableBase, IMainModel
{
    private int _count;
    private int _step = 1;
    
    public int Count => _count;
    
    public int Step
    {
        get => _step;
        set => SetProperty(ref _step, value);
    }
    
    public ICommand IncrementCommand { get; }
    
    public BindableMainModel()
    {
        IncrementCommand = new RelayCommand(() => {
            _count += Step;
            OnPropertyChanged(nameof(Count));
        });
    }
}

数据绑定

将UI元素与数据模型绑定：

设置页面数据上下文：

this.DataContext(new BindableMainModel(), (page, vm) => page
    // 页面内容
);

绑定计数器显示：

.Text(() => vm.Count, txt => $"Counter: {txt}")

绑定步长输入（双向绑定）：

.Text(x => x.Binding(() => vm.Step).TwoWay())

绑定按钮命令：

.Command(() => vm.IncrementCommand)

完整代码示例

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.DataContext(new BindableMainModel(), (page, vm) => page
            .Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
            .Content(
                new StackPanel()
                    .VerticalAlignment(VerticalAlignment.Center)
                    .Children(
                        new Image()
                            .Source("ms-appx:///Assets/logo.png")
                            .Width(150).Height(150),
                        new TextBox()
                            .PlaceholderText("Step Size")
                            .Text(x => x.Binding(() => vm.Step).TwoWay()),
                        new TextBlock()
                            .Text(() => vm.Count, txt => $"Counter: {txt}"),
                        new Button()
                            .Command(() => vm.IncrementCommand)
                            .Content("Increment Counter by Step Size")
                    )
            )
        );
    }
}