开关控件: switch#

1"ui";
2// 以下为各种形状的开关示例
3ui.layout(
4    <vertical gravity="center">
5        <horizontal gravity="center" margin="16">
6            <switch id="switch" checked="false" thumbShape="168|88,66,88,66" trackShape="100|40,70,40,70" thumbTint="#A895FF" trackTint="#6D61A6" marginEnd="16" />
7            <switch checked="true" thumbShape="140|70,70,40,40" trackShape="|70,70,40,40" thumbTint="#A895FF" trackTint="#6D61A6" />
8        </horizontal>
9        <horizontal gravity="center" margin="16">
10            <switch checked="false" thumbShape="100|50" thumbTint="#A895FF" trackTint="#cfcfcf|#6D61A6" marginEnd="16" />
11            <switch checked="true" thumbShape="120|50" thumbTint="#A895FF" />
12        </horizontal>
13        <horizontal gravity="center" margin="16">
14            <switch checked="false" thumbShape="100|20" trackShape="|20" thumbTint="#888888|#A895FF" trackTint="#cfcfcf" marginEnd="16" />
15            <switch checked="true" thumbShape="100|20" thumbTint="#888888|#A895FF" trackTint="#cfcfcf" />
16        </horizontal>
17        <horizontal gravity="center" margin="16">
18            <switch checked="false" thumbShape="168|88" thumbTint="#888888|#A895FF" trackShape="168|168" trackTint="#cfcfcf|#6D61A6" marginEnd="16" />
19            <switch checked="true" trackShape="200|500" thumbTint="#ff6666|#ff0000" trackTint="#cfcfcf|#6D61A6" />
20        </horizontal>
21        <button id="btn">点我</button>
22    </vertical>
23);
24// 动态改变开关的按钮和滑块的色调
25ui.btn.click(() => {
26    ui.switch.setThumbTint("#ff6666|#ff0000");
27    ui.switch.setTrackTint("#aaffaa|#00ffff");
28});