UI 特殊类型
UI 的特殊实体类型，包括下拉菜单和输入框。
有一些特殊的实体类型，可以实现某些特殊的交互。
下拉框
创建一个 下拉框 用于允许用户展开并从列表中选择项目的实体。
一个 下拉框 实体至少必须具有以下属性：
选项：下拉框展开时要显示哪些值。请为每个选项提供一个字符串值的数组。数组中的第一个值会显示为默认选项。onChange：每次在下拉框中选择某个值时都会执行的函数，使用
你还可以配置该 下拉框 实体的其他组件，例如一个 uiTransform，就像其他 UI 实体一样。
ui.tsx 文件：
import { UiEntity, Label, Dropdown, ReactEcs } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'
import { Color4Type } from '@dcl/sdk/ecs'
function selectOption(index: number) {
switch (index) {
case 0:
textColor = Color4.Red()
break
case 1:
textColor = Color4.Blue()
break
case 2:
textColor = Color4.Green()
break
}
}
let textColor: Color4Type = Color4.Red()
export const uiMenu = () => (
<UiEntity
uiTransform={{
width: '200px',
height: '100px',
alignContent: 'auto',
flexDirection: 'column',
alignSelf: 'center',
}}
>
<Label
value="选择一种颜色"
fontSize={18}
color={textColor}
uiTransform={{
width: '140px',
height: '40px',
}}
/>
<Dropdown
options={[`红色`, `蓝色`, `绿色`]}
onChange={selectOption}
uiTransform={{
width: '100px',
height: '40px',
}}
/>
</UiEntity>
)index.ts 文件：
📔 注意：本页中的以下所有代码片段均假定你有一个 .ts 与上文类似，并运行 ReactEcsRenderer.setUiRenderer() 函数。
输入文本
创建一个 输入框 实体，允许用户输入文本。玩家必须先单击这个框，然后才能在其中输入。
该 输入框 实体的行为通过以下属性进行管理：
onSubmit：当玩家按下 Return/Enter 时执行的函数，使用提供的文本作为输入。文本字段会 不是 在这种情况下自动清空，你需要自己清空它（见下方示例）。onChange：每当输入文本中的值发生变化时执行的函数。玩家在框中输入时，每增加或删除一个字符，就会执行一次该函数。已禁用：如果 真，玩家将无法与输入实体交互。
以下示例使用 onSubmit 将提供的文本记录到控制台。
最好同时提供一个提交按钮，并处理玩家按下 Enter/Return 键时的 onSubmit 事件。下面的示例展示了你可以如何做到这一点。
📔 注意：不要 不是 绑定该 值 属性从 输入框 直接绑定到玩家通过 onChange输入的内容。这会在场景和 Explorer 之间造成往返，从而在快速输入时导致字符被丢失。相反，请保持 值 为空字符串，并且只在你想清空输入字段时更改它。
要清空输入字段，请设置 值 为 ' ' （一个空格）。Explorer 会将其视为空，并重新激活占位符文本。由于 UI 函数每一帧都会运行，请使用一个标志只在一帧内应用清空。
以下属性也可用于自定义文本字段的外观，其中大多数与 Label 实体中的属性类似：
占位符：玩家开始输入任何内容之前显示的字符串。将这段文本作为提示，告诉他们应该输入什么会很有用。占位符颜色：用于占位符文本的颜色，作为一个 Color4.
字体大小：文本大小，以数字表示。注意：该
字体大小不受其实体或父实体大小的影响。颜色：玩家输入的文本颜色，作为一个 Color4.
📔 注意：请确保你使用的颜色不同于 占位符颜色.
字体：要使用的字体。支持的值有： -'sans-serif'（默认） -'serif'-'monospace'文本对齐：文本将如何与其父级对齐。其取值来自 `TextAlignType`。TextAlignType = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
你还可以配置该 输入框 实体的其他组件，例如一个 uiTransform, OnMouseDown ，就像其他 UI 实体一样。
最后更新于