響應式編程入門教程第三節：ReactiveCommand 與 UI 交互

響應式編程入門教程第一節：揭秘 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) 添加的訂閱都會自動取消。