Version: 2023.2
言語: 日本語
Capture the pointer with a manipulator
Focus order of elements

Handle event callbacks and value changes

Events in UI Toolkit are similar to HTML events. When an event occurs, UI Toolkit sends it to the target visual element and all elements within the propagation path in the visual tree.

イベント処理の流れは以下の通りです。

  1. Execute event callbacks on elements from the root element down to the event target. This is the trickle-down phase of the dispatch process.
  2. Execute event callbacks on elements from the event target up to the root. This is the bubble-up phase of the dispatch process.

イベントが伝搬経路を移動すると、Event.currentTarget プロパティは、現在そのイベントを処理する要素に更新されます。イベントコールバック関数内では、以下の通りです。

  • Event.currentTarget は、コールバックが登録されるビジュアル要素です。
  • Event.target は、元のイベントが発生するビジュアル要素です。

詳しくは、イベントのディスパッチ を参照してください。

イベントコールバックを登録する

You can register an event callback to customize the behavior of an individual instance of an existing class, such as reacting to a mouse click on a text label. To register a callback for an event, use the RegisterCallback() method to register the callback directly on the element.

伝搬経路上の各要素 (ターゲットを除く) は、イベントを 2 回受け取ることができます。

  • 降下段階で 1 度。
  • 上昇段階で 1 度

デフォルトでは、登録されたコールバックは、ターゲットフェーズとバブルアップフェーズの間に実行されます。このデフォルトの動作により、親要素が子要素の後に反応するようになります。

However, if you want a parent element to react before its child, register your callback with the TrickleDown.TrickleDown option like this:

using UnityEngine;
using UnityEngine.UIElements;

...
VisualElement myElement = new VisualElement();

// Register a callback for the trickle-down phase.
myElement.RegisterCallback<PointerDownEvent>(MyCallback, TrickleDown.TrickleDown);
...

これは、ディスパッチャーに、ターゲット段階と降下段階でコールバックを実行するように通知します。

To add a custom behavior to a specific visual element, register an event callback on that element like this:

// Register a callback on a pointer down event
myElement.RegisterCallback<PointerDownEvent>(MyCallback);

コールバック関数のシグネチャは以下のようになります。

void MyCallback(PointerDownEvent evt) { /* ... */ }

For an element whose child elements handle the event, to register a callback, use the Q() method to find the child element and register the callback on it.

The following example registers a callback on a slider’s drag container element to handle the pointer up event for the slider. In this case, you must register the callback on the drag container element instead of the slider itself because the drag container captures the pointer during pointer down events, which makes it the only receiver for the next pointer up event.

var dragContainer = slider.Q("unity-drag-container");
dragContainer.RegisterCallback<PointerUpEvent> ( evt => Debug.Log("PointerUpEvent"));

Note: You can register multiple callbacks for an event. However, you can only register the same callback function on the same event and propagation phase once.

VisualElement からコールバックを削除するには、myElement.UnregisterCallback()メソッドを呼び出します。

カスタムデータをイベントコールバックに送信する

イベントのコールバックと一緒にカスタムデータを送ることができます。カスタムデータを添付するには、呼び出しを拡張してコールバックを登録する必要があります。

The following example registers a callback for PointerDownEvent and sends custom data to the callback function:

// Send user data along to the callback
myElement.RegisterCallback<PointerDownEvent, MyType>(MyCallbackWithData, myData);

コールバック関数のシグネチャは以下のようになります。

void MyCallbackWithData(PointerDownEvent evt, MyType data) { /* ... */ }

Manage the value of a control

UI controls use the value property to hold data for their internal state. For example:

  • ToggleToggle がオンまたはオフになると変化するブール値を格納します。
  • IntegerField は、フィールドの値を保持する整数を格納します。

To get the value of a control:

  • コントロールから直接値を取得します: int val = myIntegerField.value;

  • コントロールから送信される ChangeEvent をリッスンし、変更が発生したときに処理を行います。以下のように、イベントに対するコールバックを登録する必要があります。

    //RegisterValueChangedCallback is a shortcut for RegisterCallback<ChangeEvent>.
    //It constrains the right type of T for any VisualElement that implements an
    //INotifyValueChange interface.
    myIntegerField.RegisterValueChangedCallback(OnIntegerFieldChange);
    

    コールバック関数のシグネチャは以下のようになります。

    void OnIntegerFieldChange(ChangeEvent<int> evt) { /* ... */ }
    

To change the value of a control:

  • Directly change the value variable: myControl.value = myNewValue;. This triggers a new ChangeEvent.
  • Use myControl.SetValueWithoutNotify(myNewValue);. This doesn’t trigger a new ChangeEvent.

詳しくは、イベントの変更 を参照してください。

その他の参考資料

Capture the pointer with a manipulator
Focus order of elements