当前位置：首页 > news >正文

响应式编程入门教程第三节：ReactiveCommand 与 UI 交互

news 2025/7/16 9:22:53

响应式编程入门教程第一节：揭秘 UniRx 核心 - ReactiveProperty - 让你的数据动起来！

响应式编程入门教程第二节：构建 ObservableProperty＜T＞ — 封装 ReactiveProperty 的高级用法

响应式编程入门教程第四节：响应式集合与数据绑定

在前面的教程中，我们了解了 ReactiveProperty 如何帮助我们管理和响应数据的变化。现在，我们将步入响应式编程在 Unity UI 交互中的另一个核心角色：ReactiveCommand。它不仅仅是一个简单的命令模式实现，更是将命令的执行与 UI 状态、异步操作以及数据流紧密结合的强大工具。

1. 传统命令模式的局限性与响应式需求

在传统的 Unity UI 开发中，我们经常使用按钮的 onClick.AddListener() 来触发某个操作。当操作逻辑变得复杂，比如需要判断前置条件（玩家是否有足够的金币施放技能）、操作是异步的（网络请求），或者需要根据操作状态更新 UI（按钮禁用、加载动画），我们往往需要写大量的条件判断和状态管理代码。

考虑一个简单的例子：一个技能按钮。

点击后施放技能。
施放技能需要消耗能量。
能量不足时，按钮应该禁用。
技能施放过程中，按钮也应该禁用，并显示冷却时间。

传统实现中，这些逻辑会散布在按钮的点击回调、Update 函数、以及各种状态变量中，导致代码耦合、难以维护和测试。

响应式编程的目标就是解决这类问题：将状态的变化、事件的发生都视为数据流，然后通过操作符对其进行转换、组合和响应。ReactiveCommand 正是这种理念在命令执行上的体现。

2. ReactiveCommand 核心概念

ReactiveCommand 本质上是一个 ICommand 的响应式实现。它包含两个核心功能：

执行命令： 当命令被触发时，执行预设的逻辑。
判断能否执行： 提供一个 IObservable<bool> 流，该流的值决定了命令当前是否可执行。当此流的值变为 false 时，任何绑定到该命令的 UI 元素（如按钮）会自动禁用；变为 true 时则会启用。

让我们看看它的基本构造：

public class SkillSystem : MonoBehaviour
{// ReactiveProperty 用于管理玩家能量public ReactiveProperty<int> PlayerEnergy = new ReactiveProperty<int>(100);// ReactiveCommand 用于施放技能public ReactiveCommand ReleaseSkillCommand { get; private set; }private void Awake(){// 1. 创建 ReactiveCommand// 参数是一个 IObservable<bool>，用于决定命令是否可执行// 这里表示当 PlayerEnergy.Value >= 10 时，命令可执行ReleaseSkillCommand = PlayerEnergy.Select(energy => energy >= 10) // 根据能量值判断是否可施放.ToReactiveCommand(); // 将 IObservable<bool> 转换为 ReactiveCommand// 2. 订阅命令的执行// 当命令被执行时，扣除能量并打印日志ReleaseSkillCommand.Subscribe(_ =>{PlayerEnergy.Value -= 10;Debug.Log("技能施放成功！当前能量：" + PlayerEnergy.Value);}).AddTo(this); // 生命周期管理：当 GameObject 销毁时，自动取消订阅// 3. 订阅命令的可执行状态变化// 这可以用于在控制台观察按钮的禁用启用状态，实际UI绑定后会自动处理ReleaseSkillCommand.CanExecute.Subscribe(canExecute => Debug.Log("技能按钮是否可用: " + canExecute)).AddTo(this);}// 假设这是 UI 按钮的点击事件处理器// 我们会直接将按钮绑定到 ReleaseSkillCommand，所以这个方法通常不需要手动调用public void OnSkillButtonClick(){// 手动执行命令 (通常通过 UI 绑定自动触发)ReleaseSkillCommand.Execute();}
}

在上面的例子中，ReleaseSkillCommand 的可执行性完全由 PlayerEnergy 的值决定。当 PlayerEnergy.Value 低于 10 时，ReleaseSkillCommand.CanExecute 流会发出 false，此时任何绑定到此命令的 UI 元素将自动禁用。

3. UI 按钮绑定与数据驱动

这是 ReactiveCommand 最直观的应用场景。UniRx 提供了方便的扩展方法，可以直接将 Button 或 Toggle 等 UI 元素绑定到 ReactiveCommand。

步骤：

在 Unity Inspector 中创建一个 UI Button。
确保你的脚本 (SkillSystem) 挂载在一个 GameObject 上。
将 Button 拖拽到脚本中需要绑定的地方（如果使用 Inspector 绑定）。

代码实现：

using UnityEngine;
using UnityEngine.UI;
using UniRx;
using UniRx.Triggers; // 用于将 UI 事件转换为 Observablepublic class SkillSystemWithUI : MonoBehaviour
{public ReactiveProperty<int> PlayerEnergy = new ReactiveProperty<int>(100);public ReactiveCommand ReleaseSkillCommand { get; private set; }public Button skillButton; // 在 Inspector 中拖拽赋值public Text energyText; // 用于显示能量值的Textprivate void Awake(){// 创建 ReactiveCommandReleaseSkillCommand = PlayerEnergy.Select(energy => energy >= 10).ToReactiveCommand();// 订阅命令的执行逻辑ReleaseSkillCommand.Subscribe(_ =>{PlayerEnergy.Value -= 10;Debug.Log("技能施放成功！当前能量：" + PlayerEnergy.Value);}).AddTo(this);// UI 绑定：将按钮的点击事件与 ReleaseSkillCommand 关联// BindTo 扩展方法会自动处理按钮的禁用启用状态skillButton.onClick.AsObservable() // 将 onClick 事件转换为 Observable.SubscribeWithState(ReleaseSkillCommand, (x, command) => command.Execute()) // 当点击时执行命令.AddTo(this);// 或者更简洁的方式，直接使用 BindTo：// releaseSkillCommand.BindTo(skillButton).AddTo(this);// 注意：BindTo(Button) 会将 Command 的可执行性绑定到 Button 的 Interactable 属性，// 并且 Button 点击时会自动执行 Command。ReleaseSkillCommand.BindTo(skillButton).AddTo(this);// 绑定能量值到 TextPlayerEnergy.SubscribeToText(energyText, energy => $"能量: {energy}").AddTo(this);}
}

在 skillButton.BindTo(ReleaseSkillCommand).AddTo(this); 这一行中，UniRx 帮我们做了两件事：

当 ReleaseSkillCommand.CanExecute 的值变化时，自动更新 skillButton.interactable 属性。
当 skillButton 被点击时，自动调用 ReleaseSkillCommand.Execute()。

这样一来，按钮的禁用启用状态完全由 PlayerEnergy 的值驱动，我们无需手动在 Update 或其他地方去修改按钮的 interactable 属性。这就是数据驱动 UI 的魅力！

4. 异步命令与命令的禁用

很多时候，我们的命令执行会涉及到异步操作，比如网络请求、加载资源、播放动画等。ReactiveCommand 能够很好地处理这些异步场景，并且在异步操作进行时，自动将命令标记为不可执行。

核心机制： ToReactiveCommand 的重载方法可以接受一个 IObservable<bool> 作为 canExecute 源，而当命令被执行时，它会内部管理一个 IsExecuting 的 ReactiveProperty。当 Execute 被调用时，IsExecuting 变为 true，直到内部订阅的 IObservable 完成（Next 或 Error 或 Complete），IsExecuting 才变为 false。我们可以将这个 IsExecuting 结合到 canExecute 的逻辑中。

using UnityEngine;
using UnityEngine.UI;
using UniRx;
using System;
using System.Threading.Tasks; // 为了使用 Taskpublic class AsyncSkillSystem : MonoBehaviour
{public ReactiveProperty<int> PlayerEnergy = new ReactiveProperty<int>(100);public ReactiveCommand AsyncSkillCommand { get; private set; }public Button asyncSkillButton;public Text energyText;public Text statusText; // 用于显示异步操作状态private void Awake(){// 组合条件：能量充足 并且 当前命令没有在执行var canExecuteSource = PlayerEnergy.Select(energy => energy >= 10);// 创建异步 ReactiveCommand// 注意这里 ToReactiveCommand() 的重载，它会自动跟踪内部异步操作的执行状态AsyncSkillCommand = canExecuteSource.ToReactiveCommand(); // 不传入参数，内部会自动处理 IsExecuting// 订阅命令的执行逻辑 (异步操作)// 注意：这里我们使用 SelectMany 来处理异步操作AsyncSkillCommand.SelectMany(_ => SimulateAsyncTask()) // 当命令执行时，触发异步任务.Subscribe(_ => { /* 异步任务完成 */ },ex => Debug.LogError("异步技能施放失败: " + ex.Message) // 错误处理).AddTo(this);// 监听命令的执行状态 (用于显示加载动画或禁用其他UI)AsyncSkillCommand.IsExecuting.Subscribe(isExecuting =>{statusText.text = isExecuting ? "技能冷却中..." : "准备就绪";asyncSkillButton.interactable = !isExecuting && AsyncSkillCommand.CanExecute.Value; // 确保在异步执行时不禁用按钮}).AddTo(this);// 将 AsyncSkillCommand 绑定到按钮// BindTo 会自动处理 CanExecute 和 IsExecuting 的组合逻辑，// 使得按钮在能量不足或异步操作进行中时自动禁用AsyncSkillCommand.BindTo(asyncSkillButton).AddTo(this);// 绑定能量值到 TextPlayerEnergy.SubscribeToText(energyText, energy => $"能量: {energy}").AddTo(this);}// 模拟一个异步任务，例如网络请求或耗时计算private async UniTask<Unit> SimulateAsyncTask(){PlayerEnergy.Value -= 10;Debug.Log("开始施放异步技能...");await UniTask.Delay(TimeSpan.FromSeconds(2)); // 模拟2秒的延迟Debug.Log("异步技能施放完成！当前能量：" + PlayerEnergy.Value);return Unit.Default; // Unit.Default 表示一个空值，类似于 void}
}

在这个例子中：

AsyncSkillCommand 的可执行性不仅取决于 PlayerEnergy，还隐式地取决于它内部的 IsExecuting 状态。
当点击按钮触发 AsyncSkillCommand.Execute() 时，SimulateAsyncTask() 会被调用。
在 SimulateAsyncTask() 执行期间（2秒），AsyncSkillCommand.IsExecuting 会为 true，导致 asyncSkillButton 自动禁用，并且 statusText 显示“技能冷却中…”。
当 SimulateAsyncTask() 完成后，AsyncSkillCommand.IsExecuting 变回 false，按钮和状态文本恢复正常。

这种处理异步命令的方式极大地简化了状态管理代码，让开发者可以专注于业务逻辑本身。

5. ReactiveCommand 的高级用法与注意事项

组合多个 CanExecute 源： 你可以通过 CombineLatest 或 Zip 等操作符，组合多个 IObservable<bool> 来决定一个 ReactiveCommand 的可执行性。例如，一个按钮可能需要同时满足“玩家在线”和“有足够的金币”两个条件才能点击。

public ReactiveProperty<bool> IsOnline = new ReactiveProperty<bool>(true);
public ReactiveProperty<int> Gold = new ReactiveProperty<int>(50);private void CreateCombinedCommand()
{var canExecuteSource = IsOnline.CombineLatest(Gold, (online, gold) => online && gold >= 20);var purchaseCommand = canExecuteSource.ToReactiveCommand();purchaseCommand.Subscribe(_ =>{Gold.Value -= 20;Debug.Log("购买成功！");}).AddTo(this);purchaseCommand.BindTo(GetComponent<Button>()).AddTo(this);
}

指定执行参数： ReactiveCommand<TParam> 允许你在执行命令时传入参数。

public ReactiveCommand<int> SpendGoldCommand { get; private set; }private void CreateSpendGoldCommand()
{SpendGoldCommand = PlayerEnergy.Select(energy => energy > 0) // 假设只要有能量就能执行此命令.ToReactiveCommand<int>(); // 指定参数类型为 intSpendGoldCommand.Subscribe(amount =>{PlayerEnergy.Value -= amount;Debug.Log($"花费了 {amount} 能量。当前能量：{PlayerEnergy.Value}");}).AddTo(this);// 可以在 UI 元素的回调中调用：// SpendGoldCommand.Execute(10); // 花费10能量
}

错误处理： 如果命令的订阅链中发生错误，错误会传播并可能导致订阅终止。你可以使用 Catch、OnErrorResumeNext 等操作符来处理这些错误，保持命令的健壮性。
生命周期管理： 再次强调，务必使用 AddTo(this) 或 CompositeDisposable 来管理订阅的生命周期，避免内存泄漏。当 GameObject 被销毁时，所有通过 AddTo(this) 添加的订阅都会自动取消。