变体用于定义面板的特定视觉状态，使单个面板能够具有多种不同的视觉表示形式，例如打开或关闭状态。使用 XML 配置变体。在 <Panel> 元素中使用子标记。
每个 <Variant> 标记都有一个强制性 id 属性，用于唯一标识该标记。该标记还可以引用父变体以继承属性。借助此继承机制，您可以高效地定义多个变体的通用属性。
XML 属性
如需定义状态和过渡，请将这些属性与 <TaskPanel> 或 <DecorPanel> 标记搭配使用。
| 属性 | 状态 | 说明 |
|---|---|---|
id |
强制 | 变体的唯一标识符。此 ID 用于在过渡中引用变体，或用作面板的 defaultVariant。
|
parent |
可选 | 指定当前变体应从中继承属性的另一个变体的 ID。如果当前变体中未明确定义某个属性，则会回退到其父变体中定义的值。 |
XML 子元素
使用这些可选元素可指定面板处于相应变体状态时的视觉特征。
| 子元素 | 说明 |
|---|---|
<Visibility> |
指定面板是显示还是隐藏，并包含 isVisible 属性（布尔值）。 |
<Alpha> |
指定面板的透明度级别；包含 alpha 属性（浮点数，介于 0.0 到 1.0 之间）。 |
<Layer> |
设置面板相对于其他面板的 Z 顺序；包含一个 layer 属性（整数）。值较高的对象会绘制在顶部。 |
<Focus> |
指定面板在过渡期间是否可以获得焦点；包含 onTransition 属性（布尔值）。
|
<Bounds> |
定义屏幕上面板的矩形区域（位置和大小）。此区域由 left、top、bottom、width 和 height 等属性控制。
使用百分比时，您可以利用偏移属性对基于百分比的边界应用固定调整值 - 例如，如需指定某个面板占据 100% 的屏幕高度，同时排除底部的固定高度导航栏，请将高度设置为 100%，并将 |
<SafeBounds> |
指定面板边界内未被显示屏刘海或边衬区重叠的安全区域，以强调在其中绘制的应用的兼容性。其属性与 <Bounds> 类似。
|
<Corner> |
定义面板的边角半径，以实现圆角效果，并包含一个半径属性（整数）。尖角是默认值，无需定义。 |
<Insets> |
指定面板的边衬区（内边距）。它包含 left、top、right、bottom 属性。这些边衬区会报告给在面板内启动的应用。
|
<Background> |
引入了一个可选的背景装饰面板，以防止在切换应用时出现透视效果。它定义了此装饰层的颜色和 Alpha 等属性。如果尚未设置装饰层（例如边界和层）的属性，则默认使用变体的属性。 |
示例代码
<Variant id="@id/opened">
<Visibility isVisible="true"/>
<Bounds left="0dp"
top="0dp"
right="100%"
bottom="100%"
bottomOffset="100dp"/>
<Alpha value="1.0"/>
<Layer value="10"/>
<Focus onTransition="true"/>
<Corner radius="24dp"/>
<Insets left="16dp" top="0dp" right="16dp" bottom="48dp"/>
<Background color="@color/app_background" alpha="0.9"/>
</Variant>
插值视觉属性
使用 KeyFrameVariant 来插值视觉属性。variant 的这种专用扩展基于连续的分数值（0 到 1），可实现由连续输入（例如拖动操作）驱动的平滑动态过渡，当面板状态随拖动量动态变化时，这种过渡非常有用。
XML 属性
KeyFrameVariant 没有属性。<KeyFrameVariant> 标记包含定义 KeyFrameVariant 所需的信息。
XML 子元素
KeyFrameVariant 包含一个或多个 <KeyFrame> 子标记。每个 <KeyFrame> 都有一个 framePosition 属性（0-100），并引用一个变体属性（另一个变体的 ID）。这些 keyframes 定义了面板在连续过渡中特定点上的状态。
示例代码
<KeyFrameVariant id="@id/panel_resizing">
<KeyFrame framePosition="0" variant="@id/minimized"/>
<KeyFrame framePosition="75" variant="@id/opened"/>
<KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>