states 语句允许你声明状态并一次性设置多个元素的属性：

export component Example inherits Window {    preferred-width: 100px;    preferred-height: 100px;    default-font-size: 24px;
    label := Text { }    ta := TouchArea {        clicked => {            active = !active;        }    }    property <bool> active: true;    states [        active when active && !ta.has-hover: {            label.text: "Active";            root.background: blue;        }        active-hover when active && ta.has-hover: {            label.text: "Active\nHover";            root.background: green;        }        inactive when !active: {            label.text: "Inactive";            root.background: gray;        }    ]}

在此示例中，active 和 active-hovered 状态是根据 active 布尔属性以及 TouchArea 的 has-hover 的值来定义的。当用户用鼠标悬停在该示例上时，它将在蓝色和绿色背景之间切换，并相应调整文本标签。单击会切换 active 属性，从而进入 inactive 状态。

过渡

过渡将动画绑定到状态变化。

下面的示例定义了两个过渡。首先使用 out 关键字，在离开 disabled 状态时对所有属性进行 800 毫秒的动画。第二个过渡使用 in 关键字，在进入 down 状态时对背景进行动画。

export component Example inherits Window {    preferred-width: 100px;    preferred-height: 100px;
    text := Text { text: "hello"; }    in-out property<bool> pressed;    in-out property<bool> is-enabled;
    states [        disabled when !root.is-enabled : {            background: gray; // same as root.background: gray;            text.color: white;            out {                animate * { duration: 800ms; }            }        }        down when pressed : {            background: blue;            in {                animate background { duration: 300ms; }            }        }    ]}

过渡类型

你可以定义三种类型的过渡：

• in：在进入状态时为属性添加动画
• out：在离开状态时为属性添加动画
• in-out：在进入和离开状态时都为属性添加动画

当你想让进入和退出状态时播放相同的动画时，in-out 过渡非常有用，可以避免重复定义动画。