Grid List Box ノードを使用する¶

格子状に配置され、スクロール可能なアイテムのリストを作成するには、Grid List Box ノードを使用します。

Grid List Box ノードの使い方を学ぶには、チュートリアルを完了してください。チュートリアル: Grid List Box を使用して連絡先リストを作成するを参照してください。

Grid List Box ノードにアイテムを追加すると、Grid List Box ノードはそれらを最初の行または列に配置します。

Grid List Box ノード内のアイテムが Grid List Box ノードの設定された幅または高さに達すると、Grid List Box ノードはアイテムを次の行または列に配置します。
グリッドリストボックスに設定した幅と高さに収まらないアイテムがある場合、Grid List Box ノードをスクロールするとアイテムが表示されます。

Grid List Box ノード内のアイテムを選択するには、そのアイテムをクリックします。

Grid List Box ノードは、Layout Direction プロパティで設定した内容に基づいてアイテムを配置します。

Right はアイテムを x 軸に沿って配置します。

アイテムを追加する際、Grid List Box ノードは各新しいアイテムをその前のアイテムの右側に配置します。アイテムが Grid List Box ノードの幅に達するかそれを超えると、Grid List Box ノードはそのアイテムを新しい行に配置します。

ユーザーは、Grid List Box ノードをy軸でスクロールできます。
Down はアイテムを y 軸に沿って配置します。

アイテムを追加する際、Grid List Box ノードは各新しいアイテムをその前のアイテムの下に配置します。アイテムが Grid List Box ノードの高さに達するかそれを超えると、Grid List Box ノードはそのアイテムを新しい列に配置します。

ユーザーは、Grid List Box ノードをx軸でスクロールできます。

Grid List Box > Reversed Scrolling プロパティを使用して、スクロールの方向を逆にすることができます。

Kanzi Studio で作成する Grid List Box ノードはフォーカススコープであり、デフォルトでキーのフォーカスとキー入力を処理します。List Box ノードでのキー入力フォーカスの処理を参照してください。

注釈

すべてのリストボックスノード（Grid List Box ノードおよび Trajectory List Box 3D ノード）のアイテムは、その子ノードではありませんが、Kanzi Studio ではリストボックスにアイテムを追加するときにそのように見えます。リストボックスアイテムはリストボックスの子ノードではないため、パスやエイリアスを使用してリストボックスの外部からこれらのアイテムを参照することはできません。リストボックスアイテムからリストボックスの外部のオブジェクトを参照する必要がある場合は、バインディングとエイリアスを使用してください。Grid List Box ノードの外部のプロパティにバインドするおよび Trajectory List Box 3D ノードから Page ノードへのナビゲーションを参照してください。

Grid List Box ノードの作成¶

Grid List Box ノードを作成するには：

Node Tree Alt を押しながら右クリックで、Grid List Box ノードを作成したいノードを選択し、Grid List Box 3D または Grid List Box 2D のいずれかを選択します。

3Dノードは、Scene ノードのような3Dノード内でのみ作成でき、2Dノードは2Dノード内でのみ作成できます。
Node Tree にアイテムを追加して、Grid List Box ノードに追加します。

データソースを使用して、アイテムを List Box ノードに追加します。データソースを使用するを参照してください。

例えば、連絡先リストを作成するには、リスト内の連絡先を表すいくつかのノードを追加します。List Box Item Container プレハブを使用するを参照してください。

アイテムを追加すると、Grid List Box ノードは、Grid List Box ノードの左上から右下に向かってそれらをグリッドに配置します。Grid List Box ノードがそのアイテムをどのように配置するかを設定するを参照してください。

Grid List Box ノード内のアイテムを閲覧するには、Preview で Grid List Box ノード内のアイテムをクリックしてドラッグします。
（オプション） Grid List Box ノードに追加したコンテンツが表示されない場合や、コンテンツが完全に収まらない場合は、Cell Height プロパティと Cell Width プロパティを追加して設定してください。

リストボックス内の各要素に予約された領域を設定します。セルサイズは、アイテムがセルに収まらない場合にアイテムをクリップします。
Node Tree で Grid List Box ノードを選択し、Properties で Layout Height と Layout Width プロパティを設定します。

Grid List Box ノード内のアイテムが表示される領域を設定します。Grid List Box ノード内のすべてのアイテムがその領域に収まらない場合、Kanzi は収まらないアイテムをクリップします。ユーザーは Grid List Box ノードをスクロールしてすべてのアイテムにアクセスできます。
（オプション） Preview でをクリックして Analyze モードに入り、を右クリックして Debug objects を選択します。

この方法で、Grid List Box ノードの境界と Grid List Box ノード内のアイテムを視覚化します。

Grid List Box ノードがそのアイテムをどのように配置するかを設定する¶

Grid List Box ノードを設定して、アイテムをx軸またはy軸に沿って配置することができます。

Grid List Box がそのアイテムをどのように配置するかを設定するには:

Grid List Box ノードを作成し、アイテムを追加します。Grid List Box ノードの作成を参照してください。
Properties で、Layout Direction プロパティを次のいずれかに設定します。
- Right はアイテムを x 軸に沿って配置します。
  
  アイテムを追加する際、Grid List Box ノードは各新しいアイテムをその前のアイテムの右側に配置します。アイテムが Grid List Box ノードの幅に達するかそれを超えると、Grid List Box ノードはそのアイテムを新しい行に配置します。
  
  Layout Width プロパティと Layout Height プロパティを使用して、Grid List Box ノードエリアのサイズを設定します。
  
  ユーザーは、Grid List Box ノードをy軸でスクロールできます。
- Down はアイテムを y 軸に沿って配置します。
  
  アイテムを追加する際、Grid List Box ノードは各新しいアイテムをその前のアイテムの下に配置します。アイテムが Grid List Box ノードの高さに達するかそれを超えると、Grid List Box ノードはそのアイテムを新しい列に配置します。Layout Width および Layout Height プロパティを使用して、Grid List Box ノードエリアのサイズを設定します。
  
  ユーザーは、Grid List Box ノードをx軸でスクロールできます。

選択したアイテムを Grid List Box の中心に持ってくる¶

ユーザーがそのアイテムをクリックしたときに、アイテムをリストボックスエリアの中央に持ってくるように、Grid List Box ノードを設定できます。

ユーザーがそれらを選択したときに Grid List Box ノード内のアイテムを中央に配置するには：

Grid List Box ノードを作成し、アイテムを追加します。Grid List Box ノードの作成を参照してください。
Properties に Selection Behavior プロパティを追加し、それを Bring Center に設定します。

ユーザーがそのアイテムを選択したときに、Grid List Box ノードがアイテムをノードエリアの中央にスクロールするように設定します。Grid List Box ノードは、Layout Direction プロパティに設定した値に基づいてアイテムを中央に配置します。Grid List Box ノードがそのアイテムをどのように配置するかを設定するを参照してください。
Properties に追加して設定します。
- Item Area Begin を、Grid List Box ノード内のアイテムの領域を開始したいオフセットに設定します。
  
  たとえば、それを0.4に設定します。
- Item Area End を、Grid List Box ノード内のアイテムの領域を終了させたいオフセットに設定します。
  
  たとえば、0.6に設定します。
Item Area Begin プロパティと Item Area End プロパティを使用して、次のことを行います。
- Grid List Box 2D。ユーザーがリストの最初または最後のアイテムを選択したときに、それらのアイテムもリストの中央に揃うように設定します。例えば、Grid List Box ノードには一度に5つのアイテムが表示され、それぞれのアイテムが Grid List Box ノードの総面積の0.2を占めます。最も中央にあるアイテムは、その上に0.1、その下に0.1のスペースを占めます。
- Grid List Box 3D。Visible Amount In Parent プロパティの値を設定します。Visible Amount In Parent プロパティを使用して、リストボックス内のオブジェクトの位置に基づいてアイテムの外観を変更するシェーダーを設定します。例えば、Visible Amount In Parent プロパティを使用してアイテムの可視性を徐々に変更する場合、Item Area Begin プロパティを大きな値に設定し、Item Area End プロパティを小さな値に設定します。こうすることで、そのアイテムが表示される領域を制限します。

Grid List Box ノードのネスト¶

Grid List Box ノードをネストして、Grid List Box ノード内に Grid List Box ノードを作成することができ、それぞれを独立してスクロールできます。例えば、次のように作成できます:

アルバムのリストには、アルバムカテゴリの垂直スクロール可能な Grid List Box ノードがあり、その中に各カテゴリを横にスクロールして閲覧できるネストされた Grid List Box ノードが含まれています。
連絡先のリストには、縦にスクロール可能な連絡先の Grid List Box ノードがあり、その中にネストされた Grid List Box ノードが含まれています。このノードを横にスクロールして連絡先を編集または削除できます。

Grid List Box ノードでは、Layout Direction プロパティを使用して、Grid List Box ノードがそのアイテムをどのように配置するか、およびユーザーがスクロールできる軸を設定します。Layout Direction を次のように設定します:

Right は、リストアイテムを y 軸にスクロールします。
Down はリストアイテムを x 軸にスクロールします。

Grid List Box ノードをネストするには:

Grid List Box ノードを作成します。Grid List Box ノードの作成を参照してください。

デフォルトで、Layout Direction プロパティの値は Right であり、y 軸でリストアイテムをスクロールできます。x 軸でリストアイテムをスクロールするには、Layout Direction プロパティを Down に設定します。
前のステップで作成した Grid List Box ノードの各リストアイテムの構造を作成します。

例えば、アルバムを含む複数の入れ子になった Grid List Box ノードを作成したい場合、Prefabs 内に Stack Layout 2D ノードを作成し、その中に Text Block 2D ノードを作成します。

Stack Layout 2D ノードを使用して、各ネストされた Grid List Box とアルバムカテゴリのタイトルを配置し、Text Block 2D ノードを使用してカテゴリタイトルを表示します。Stack Layout ノードを使用するを参照してください。
最初のステップで作成した Grid List Box にネストしたい Grid List Box ノードを作成し、親の Grid List Box ノードとは異なる軸でスクロールするように設定します。親の Grid List Box ノードに対して Layout Direction プロパティを Right に設定した場合、ネストされた Grid List Box ノードに対してそのプロパティを Down に設定し、Grid List Box をx軸でスクロールさせます。

例えば、前のステップで Stack Layout 2D プレハブを作成した場合、その Stack Layout 2D で Grid List Box ノードを作成し、そのプレハブのインスタンスをいくつか Node Tree から Grid List Box ノードにドラッグします。
各ネストされた Grid List Box ノードにアイテムを追加します。

例えば、縦にスクロール可能な Grid List Box を作成し、その中にアルバムの横にスクロール可能な Grid List Box を含めるには、Prefabs で各アルバムを表現するための Image ノードを作成し、そのプレハブのインスタンスを各ネストされた Grid List Box にドラッグします。

データソースを使用して Grid List Box にアイテムを追加できます。データソースを使用するを参照してください。

Grid List Box ノードの外部のプロパティにバインドする¶

リストボックスのアイテムのプロパティをリストボックスの外にあるノードのプロパティにバインドしたい場合は、エイリアスを使用します。

例えば、Grid List Box 3D または Trajectory List Box 3D ノードに Text Block 3D ノードアイテムがあり、Text Block 3D ノードの Text プロパティ値をリストボックスにない Empty Node 3D ノードプロパティの値に設定したい場合は、

../../_images/binding-outside-a-list-box---structure.png

Node Tree Alt を押しながら右クリックで、バインドしたいプロパティを含むノードを選択し、Alias を選択します。エイリアスの使用を参照してください。

例えば、Empty Node 3D ノードのエイリアスを作成します。
Dictionaries で作成したエイリアスが、リストボックスノードがアクセスできるリソースディクショナリにあることを確認してください。

例えば、すべてのエイリアスを Screen ノードのリソースディクショナリに配置するか、リストボックスノードにリソースディクショナリを作成し、そのリソースディクショナリにエイリアスを配置します。リソースディクショナリの使用を参照してください。
バインディングを作成します:
1. Node Tree で、リストボックスノードの外部にバインドしたいノードを、リストボックスノード内から選択します。
2. Properties で + Add Binding をクリックし、エイリアスを使用してバインディングを作成し、リストボックスノードの外にあるノードのプロパティにバインドします。
  
  例えば、Text Block 3D ノードで、最初のステップで作成したエイリアスを使用して Empty Node 3D ノードへのバインディングを作成します。バインディング式リファレンスを参照してください。
  
  たとえば、このバインディング式を使用します:
```
{#Empty Node 3D/TextConcept.Text}
```
  Text Block 3D ノードの Text プロパティは、Empty Node 3D ノードの Text プロパティの値を取得します。
3. Save をクリックします。

Grid List Box ノードから Page ノードへのナビゲーション¶

注釈

Page ノードと Page Host ノードは非推奨です。アプリケーションのナビゲーション可能な UI を構築するには、Activity ノードと Activity Host ノードを使用してください。アクティビティを参照してください。

リストボックスノード内にあるノードから Page ノードに移動したい場合は、エイリアスを使用します。例えば、Grid List Box ノードや Trajectory List Box 3D ノードを使用してアドレス帳を作成し、アドレス帳エントリの内容を Page ノードに表示したい場合です。

リストボックスノードから Page ノードに移動するには：

Node Tree Alt を押しながら右クリックで、ナビゲートして Alias を選択したい各 Page ノードを選択します。Kanzi Studio は、作成元のノードを指すエイリアスを作成し、そのエイリアスを最も近いリソース辞書に配置します。
Dictionaries で作成したエイリアスが、リストボックスノードがアクセスできるリソースディクショナリにあることを確認してください。

例えば、すべてのエイリアスを Screen ノードのリソースディクショナリに配置するか、リストボックスノードにリソースディクショナリを作成し、そのリソースディクショナリにエイリアスを配置します。リソースディクショナリの使用を参照してください。
Navigate to Page アクションを追加して設定します。
1. リストボックスノードの Node Tree で、最初のステップでエイリアスを作成した Page ノードの1つにナビゲートするために使用したいトリガーを含むノードを選択します。
2. Node Components > Triggers Alt を押しながら右クリックで、Page ノードに移動するために使用したいトリガーを選択し、Navigate to Page アクションを作成します。
3. Navigate to Page アクションで、Target Item プロパティを移動したい Page ノードのエイリアスに設定します。
  
  すべてのエイリアスは # 記号で始まります。

Preview で、Navigate to Page アクションを含むノードをクリックすると、アクションで選択された Page ノードがアクティブになります。

ユーザーが Grid List Box ノードと対話したときの反応¶

List Box トリガーを使用して、ユーザーが Grid List Box ノードと対話したときに反応します。たとえば、ユーザーがそのノードをスクロールしたときに、Grid List Box ノードの外観を設定できます。

これらの List Box トリガーを Grid List Box ノードで使用できます。

ネーム (Name)	ディスクリプション (Description)
List Box: Item Loaded	List Box: Item Loaded トリガーは、リストボックス内のアイテムが作成され、ワーキングメモリにロードされたときに発動します。表示されているアイテムの周囲で、一度にいくつのアイテムをワーキングメモリにロードしたままにするかを設定するには、Keep Alive Item Count プロパティを使用します。
List Box: Item Selected	List Box: Item Selected トリガーは、ユーザーがリストボックス内のアイテムを選択したときに発動します。
List Box: Item Unloaded	List Box: Item Unloaded トリガーは、リストボックス内のアイテムがワーキングメモリからアンロードされたときに発動します。表示されているアイテムの周囲で、一度にいくつのアイテムをワーキングメモリにロードしたままにするかを設定するには、Keep Alive Item Count プロパティを使用します。
List Box: Scroll Finished	List Box: Scroll Finished トリガーは、リストボックスのスクロールが終了したときに発動されます。
List Box: Scroll Started	List Box: Scroll Started トリガーは、リストボックスのスクロールが開始されると発動します。
List Box: Scrolled	List Box: Scrolled トリガーは、リストボックスがスクロールするたびに設定されます。
List Box: Target Changed	List Box: Target Changed トリガーは、リストボックスのスクロールターゲットが変更されたときに発動します。例えば、ユーザーがリストボックスアイテムを選択するとスクロールターゲットが変わり、リストボックスがそのアイテムをリストボックスエリアの中央に持ってくるようにスクロールします。
List Box: User Scroll Finished	List Box: User Scroll Finished トリガーは、ユーザーがリストボックスのスクロールを停止したときに発動します。
List Box: User Scroll Started	List Box: User Scroll Started トリガーは、ユーザーがリストボックスのスクロールを開始したときに発動されます。

List Box トリガーを Grid List Box ノードで使用するには、

Grid List Box ノードを作成し、アイテムを追加します。Grid List Box ノードの作成を参照してください。

例えば、Grid List Box 2D ノードを作成します。
List Box トリガーで設定したい動作を定義します。

例えば、Scroll Started と Scroll Finished トリガーが発動したときに Grid List Box 2D ノードの外観を設定する状態を定義するステートマネージャーを作成します。ステートマネージャーの作成を参照してください。
List Box トリガーを追加して設定します。
1. Node Tree で、トリガーを追加したい List Box ノードを選択し、Node Components > Triggers で List Box トリガーの1つを追加します。
  
  例えば、Node Tree でこの手順の最初に作成した Grid List Box ノードを選択し、Node Components Alt を押しながら右クリック Triggers で、Message Trigger > List Box > Scroll Started を選択します。
2. Node Components Alt を押しながら右クリックで、前のステップで作成したトリガーを選択し、アクションを選択して設定します。
  
  例えば、State Manager: Go to State アクションを選択し、そのアクションで State プロパティを、List Box: Scroll Started トリガーがオフになったときに Grid List Box ノードの外観を設定する状態に設定します。
前の手順を繰り返して、さらに多くの List Box トリガーを追加および構成します。

例えば、List Box: Scroll Finished トリガーを追加します。トリガーの State Manager: Go to State アクションで、State をそのトリガーが発動されたときにノードの外観を設定する状態に設定します。

Preview で作成した Grid List Box ノードをスクロールすると、追加したトリガーが発動します。

Grid List Box アイテムのダブルクリックジェスチャーを有効にする¶

List Box ノードにダブルクリックジェスチャをサポートするアイテムを追加する場合、List Box Item Container プレハブでそれらのアイテムに対してダブルクリックジェスチャを有効にする必要があります。

ノードに対してダブルクリックジェスチャーを有効にする方法を学ぶには、ノードにマルチクリックジェスチャーを有効にするを参照してください。

List Box アイテムにダブルクリックジェスチャーを有効にするには：

List Box Item Container プレハブを作成し、それを List Box ノードの Item Container Template として設定します。List Box Item Container プレハブの作成を参照してください。
Prefabs で、List Box Item Container プレハブを選択します。Properties で、Input > Double-Click Enabled プロパティを追加して有効にします。

Double-Click Enabled プロパティを有効にすると、Kanzi は List Box Item Container プレハブにダブルクリックメッセージを生成するマルチクリックマニピュレータをインストールします。

スライダーで Grid List Box ノードをスクロールする¶

Slider ノードを使用して、Grid List Box ノードをスクロールできます。この例では、スライダーを使用して縦方向の連絡先リストをスクロールします。

Grid List Box ノードをスクロールするためにスライダーを使用するには：

スクロールしたい Grid List Box ノードを作成します。

例：
1. Node Tree で Stack Layout 2D ノードを作成します。
2. Asset Packages > Factory Content から Contact List を Node Tree にドラッグし、Stack Layout 2D ノードにドロップします。Factory Content アセットを参照してください。
Grid List Box ノードをスクロールするために使用する Slider ノードを作成し、Slider ノードのサイズと向きを Grid List Box ノードに合わせて設定します。

例：
1. Asset Packages > Factory Content から Slider を Node Tree にドラッグし、Stack Layout 2D ノードにドロップします。
2. Node Tree で Slider ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
  - Property から Layout Width へ
  - Expression へ
    {@../Contact List/Node.Height}
  この方法で、スライダーのレールの長さを Contact List ノードの高さに合わせることができます。
  
  ヒント
  
  プロパティを右クリックして Create Binding を選択すると、そのプロパティのバインディングの作成を開始できます。
  
  この方法では、プロパティが自動的に Binding Editor に追加されます。
3. Properties で、Transform 2D > Layout Transformation プロパティを追加し、Rotation プロパティフィールドを90に設定します。
  
  この方法で、スライダーを縦にします。
4. Properties で + Add Binding をクリックし、Binding Editor で設定します。
  - Property から Maximum Value へ
  - Expression へ
    # Get the number of items in the Contact List node. itemCount = {@../Contact List/ListBoxConcept.ItemCount} # Get the height of a cell that hosts a contact item in the Contact List node. itemHeight = {@../Contact List/GridListBoxConcept.CellHeight} # Get the height of the Contact List node. listBoxHeight = {@../Contact List/Node.Height} # Return the height of the invisible area of the Contact List node. itemCount * itemHeight - listBoxHeight
  Slider ノードの最大値を Contact List ノードの不可視領域の高さにバインドします。Slider ノードの最小値はデフォルトで 0 です。このようにして、スライダーの値の範囲を連絡先リストの長さに合わせて設定します。
Node Tree で Slider ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
- Binding Mode から Two way へ
- Property から Value へ
- スクロールしたい Grid List Box ノードの Scroll Position プロパティ X または Y プロパティフィールドに Source を設定します。
  
  たとえば、次のように設定します:
```
{@../Contact List/GridListBoxConcept.ScrollPosition}.Y
```
Slider ノードの Value プロパティを、Contact List ノードの Scroll Position プロパティ Y プロパティフィールドにバインドします。この方法で、スライダーノブの位置とリストボックスの垂直スクロール位置の間に双方向の接続を作成します。

Preview では、スライダーノブを動かすと連絡先リストがスクロールし、連絡先リストをスクロールするとスライダーノブが動きます。

../../_images/slider-scroll-list-box.gif

Grid List Box ノードが使用中かどうかを制御する¶

Grid List Box ノードが使用中かどうかを制御するには、Input > Enabled プロパティを使用します。無効化された Grid List Box ノードはユーザー入力に反応しません。Grid List Box ノードを無効化すると、Kanzi は進行中のジェスチャーを停止し、その Grid List Box ノードの選択されたアイテムとスクロール位置を保持します。

ノードの Enabled プロパティを無効にすると、そのノードとその子孫ノードが同じオーバーレイフォーカススコープ内で実質的に無効になります。

ノードが効果的に有効になっているかどうかを確認するには、ステートマネージャーまたはバインディングで Input > Effectively Enabled プロパティを使用します。たとえば、ノードが使用中であるかどうかをユーザーに視覚的に示すために、ステートマネージャーを作成し、そのコントローラープロパティとして Effectively Enabled プロパティを使用します。

ノードが入力にどのように反応するかを制御するを参照してください。

Grid List Box 2D ノードの外観を設定する¶

2D ノードの外観を設定するには:

2Dノードを単色、テクスチャ、またはマテリアルで塗りつぶすことができます。2Dノードの外観の調整を参照してください。
2Dノードにポストプロセッシングエフェクトを適用できます。2Dノードのエフェクトを参照してください。
2Dノードを3つの軸すべてで回転させて、3Dのパースペクティブ効果を作成できます。2Dノードに3Dパースペクティブ効果を作成するを参照してください。
2Dノードにカスタムレンダリングを適用して、ポストプロセッシングエフェクトを作成できます。2Dノードにカスタムレンダリングを適用するを参照してください。
2Dノードをピクセルパーフェクトとしてレンダリングできます。ピクセルパーフェクトな2Dノードのレンダリングを参照してください。

APIで Grid List Box 3D ノードを使用する¶

Grid List Box 3D ノードを作成するには：

// Create a Grid List Box 3D named MyListBox.
GridListBox3DSharedPtr gridListBox = GridListBox3D::create(domain, "MyListBox");

グリッドエリアを構成するには:

// Make each grid cell be a 1x1x1 cube.
gridListBox->setCellWidth(1.0f);
gridListBox->setCellHeight(1.0f);
gridListBox->setDepth(1.0f);
// Make the grid contain three rows that are filled column by column.
gridListBox->setHeight(3.0f);
gridListBox->setDirection(GridListBoxConcept::GridDirectionDown);
// Make the grid contain 10 columns. Items that are dragged beyond these columns are made invisible.
gridListBox->setWidth(10.0f);
// Change the resting position when the list is scrolled to the beginning or end, so that items are not right at the grid edge.
gridListBox->setItemAreaBegin(0.2f);
gridListBox->setItemAreaEnd(0.8f);

リストボックスにアイテムを追加するには：

// Create cube meshes and add them as items of the list box.
// Items on the grid appear in the order you add them to the list.
Model3DSharedPtr item1 = Model3D::createCube(domain, "item1", 1.0f, ThemeRed);
Model3DSharedPtr item2 = Model3D::createCube(domain, "item2", 1.0f, ThemeGreen);
Model3DSharedPtr item3 = Model3D::createCube(domain, "item3", 1.0f, ThemeBlue);
Model3DSharedPtr item4 = Model3D::createCube(domain, "item4", 1.0f, ThemeOrange);
Model3DSharedPtr item5 = Model3D::createCube(domain, "item5", 1.0f, ThemeYellow);
gridListBox->addItem(item1);
gridListBox->addItem(item2);
gridListBox->addItem(item3);
gridListBox->addItem(item4);
gridListBox->addItem(item5);

詳細については、GridListBox3D クラスを参照してください。

APIで Grid List Box 2D ノードを使用する¶

Grid List Box 2D ノードを作成するには：

// Create a Grid List Box 2D named MyListBox.
GridListBox2DSharedPtr gridListBox = GridListBox2D::create(domain, "MyListBox");