> ## Documentation Index
> Fetch the complete documentation index at: https://devdocs.xbox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Control cluster

> Control cluster

# Control cluster

最多包含四个控件的数组，可用于占用轮盘外部的两个位置。

## 备注

控件簇可用于更精细地控制触控控件在[`wheel`](https://devdocs.xbox.com/zh-CN/reference/system/touchadaptationkit/layout/game-streaming-touch-wheel) 的 `outer` 部分的显示位置。

常见用途包括：

* 让一个控件占用[`wheel`](https://devdocs.xbox.com/zh-CN/reference/system/touchadaptationkit/layout/game-streaming-touch-wheel) 的两个 `outer` 位置。当你希望在 `outer` 部分为按钮设置更大的点击区域时通常使用此方法。
* 通过在 `outer` 位置创建三个或四个控件的三角形或方形分组，扩展 `outer` 位置的布局选项。

> [!WARNING]
>
> 可以使用控件簇创建可能超出 `wheel` 预期边界的控件分组。使用多个控件时，请验证在小屏幕设备上的行为是否符合预期。

***

**`outer wheel` 区域内的控件簇模式**

> 图像显示了在 inner 位置具有操纵杆并以指定 `outer` 布局的轮盘完整渲染。

#### 模式 1. 一个控件跨越两个 outer 位置

![一个控件跨越两个 outer 位置](https://mintcdn.com/microsoft-4404708b/gzrdvT5kpqAXKEQt/images/gdk/reference/game-streaming-touch-control-images-wheel-outer-span-two-slots.gif?s=578fa354436743f76172825454a4e17c)

在此示例中，注意按钮的点击目标区域。

```JSON theme={null}
{
    "outer": [
        [
            {
                "type": "button",
                "action": "gamepadA"
            },
            null
        ]
    ]
}
```

#### 模式 2. 一个控件对齐到轮盘的 12 点方向

![一个控件对齐到轮盘的 12 点方向](https://mintcdn.com/microsoft-4404708b/gzrdvT5kpqAXKEQt/images/gdk/reference/game-streaming-touch-control-images-wheel-outer-12-oclock.png?fit=max\&auto=format\&n=gzrdvT5kpqAXKEQt\&q=85\&s=d5088941bc9b17782fca865b3fefdc52)

```JSON theme={null}
{
   "outer": [
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        [
            null,
            {
                "type": "button",
                "action": "gamepadA"
            },
            null
        ]
    ]
}
```

#### 模式 3：簇中的三个控件

在所有外部位置都已使用后，通过簇中包含三个控件是添加额外控件的好方法。在右手的第五个位置效果最好。

![簇中的三个控件](https://mintcdn.com/microsoft-4404708b/gzrdvT5kpqAXKEQt/images/gdk/reference/game-streaming-touch-control-images-wheel-outer-three-cluster.png?fit=max\&auto=format\&n=gzrdvT5kpqAXKEQt\&q=85\&s=f0ffb47c716e73d3e67e9951d2edbfc3)

```JSON theme={null}
{
    "outer": [
        null,
        null,
        null,
        null,
        [
            {
                "type": "button",
                "action": "gamepadA"
            },
            {
                "type": "button",
                "action": "gamepadB"
            },
            {
                "type": "button",
                "action": "gamepadX"
            }
        ]
    ]
}
```

#### 模式 4. 簇中的四个控件

如果需要在三控件簇中额外增加一个控件，请在该位置使用四个控件。在右手的第五个位置效果最好。

![簇中的四个控件](https://mintcdn.com/microsoft-4404708b/gzrdvT5kpqAXKEQt/images/gdk/reference/game-streaming-touch-control-images-wheel-outer-four-cluster.png?fit=max\&auto=format\&n=gzrdvT5kpqAXKEQt\&q=85\&s=f20d54b951451e3e041db9fc06118784)

```JSON theme={null}
{
    "outer": [
        [
            null,
            null,
            null,
            null,
            ,
            {
                "type": "button",
                "action": "gamepadA"
            },
            {
                "type": "button",
                "action": "gamepadB"
            },
            {
                "type": "button",
                "action": "gamepadX"
            },
            {
                "type": "button",
                "action": "gamepadY"
            }
        ]
    ]
}
```


## Related topics

- [A designer's guide to building touch controls](https://devdocs.xbox.com/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-designers-guide.md)
- [Touch Adaptation Kit (TAK) Reference](https://devdocs.xbox.com/build/core-features/common/game-streaming/game-streaming-touch-touch-adaptation-kit-overview.md)
- [Touch Adaptation Kit](https://devdocs.xbox.com/reference/system/touchadaptationkit/touchadaptationkit-reference.md)
- [Guia do designer para criar controles por toque](https://devdocs.xbox.com/pt-BR/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-designers-guide.md)
- [Guía del diseñador para crear controles táctiles](https://devdocs.xbox.com/es/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-designers-guide.md)