ArkUI eTS上实现"流光按钮"组件 原创 精华

@Component
export struct StreamerButton {
    // 旋转角度
    @State private angle:number = 0;
    // 旋转速度
    private speed:number = 5;
    // 定时器Id
    private interval:number = 0;
    // 切换按钮前景色状态
    @State private isActive:boolean = false;

    // 定义按钮属性
    public streamerButtonAttribute: StreamerButtonAttribute = null;

    aboutToAppear() {
        // 初始化流光按钮属性对象
        this.streamerButtonAttribute = StreamerButtonAttribute.filter(this.streamerButtonAttribute)

        // 流光按钮旋转
        this.speedChange()
    }

    aboutToDisappear() {
        clearInterval(this.interval)
    }

    build() {
        // 外部堆叠容器
        Stack({ alignContent: Alignment.Center}) {
            // 绘制旋转青色矩形
            Rect().width(this.streamerButtonAttribute.width * 2)
                .height(this.streamerButtonAttribute.height - this.streamerButtonAttribute.border * 2)
                .fill(this.streamerButtonAttribute.streamerColor)
                .rotate({ x: 0, y: 0, z: 1, angle: this.angle })
            // 蒙住青色矩形多余部分
            Stack({ alignContent: Alignment.Center}) {
                // 按钮文本
                Text(this.streamerButtonAttribute.text)
                    .fontSize(this.streamerButtonAttribute.fontSize)
                    .fontColor(this.streamerButtonAttribute.fontColor)
            }
            .width(this.streamerButtonAttribute.width - this.streamerButtonAttribute.border)
            .height(this.streamerButtonAttribute.height - this.streamerButtonAttribute.border)
            .backgroundColor(this.isActive ? this.streamerButtonAttribute.backgroundColor : this.streamerButtonAttribute.foregroundColor)
            .onTouch(() => {
                this.isActive = !this.isActive
            })
            .onClick(() => {
                this.streamerButtonAttribute.clickCallback?.call(this)
            })
            .borderRadius(10)

        }.width(this.streamerButtonAttribute.width)
        .height(this.streamerButtonAttribute.height)
        .backgroundColor(this.streamerButtonAttribute.backgroundColor)
        // 裁剪超出外部堆叠容器内部
        .clip(new Rect({width: this.streamerButtonAttribute.width, height: this.streamerButtonAttribute.height}))
        .borderRadius(10)
    }

    /**
     * 流光旋转函数
     */
    speedChange() {
        var that = this
        that.angle = 0
        this.interval = setInterval(function(){
            that.angle += that.speed
        }, 15)
    }
}

/**
 * 流光按钮属性对象
 * @param streamerButtonAttribute
 */
class StreamerButtonAttribute {
    // 按钮文本
    public text:string = '按钮';
    // 按钮文本大小
    public fontSize:number = 30;
    // 字体颜色
    public fontColor:Color | number | string | Resource = '#FFFFFF';
    // 按钮宽度
    public width:number = 150;
    // 按钮高度
    public height:number = 80;
    // 边框粗细
    public border:number = 6;
    // 按钮前景色
    public foregroundColor:Color | number | string | Resource = '#5a5a5a';
    // 按钮背景色
    public backgroundColor:Color | number | string | Resource = '#ef437f';
    // 流光色
    public streamerColor:Color | number | string | Resource = '#00FFFF';

    // 单击回调函数
    public clickCallback: () => void;

    /**
     * 对非法参数进行过滤
     * @param streamerButtonAttribute
     */
    public static filter(streamerButtonAttribute: StreamerButtonAttribute): StreamerButtonAttribute {
        if (null == streamerButtonAttribute || undefined == streamerButtonAttribute) {
            // 初始化流光按钮属性对象
            streamerButtonAttribute = new StreamerButtonAttribute();
        } else {
            // 初始化流光按钮默认属性对象
            var defaultAttribute: StreamerButtonAttribute = new StreamerButtonAttribute();
            // 如果用户不指定按钮文本，使用默认按钮文本
            if (undefined == streamerButtonAttribute.text) {
                streamerButtonAttribute.text = defaultAttribute.text;
            }
            // 如果用户不指定字体大小，使用默认字体大小
            if (undefined == streamerButtonAttribute.fontSize) {
                streamerButtonAttribute.fontSize = defaultAttribute.fontSize;
            }
            // 如果用户不指定字体颜色，使用默认字体颜色
            if (undefined == streamerButtonAttribute.fontColor) {
                streamerButtonAttribute.fontColor = defaultAttribute.fontColor;
            }
            // 如果用户不指定边框粗细，使用默认边框粗细
            if (undefined == streamerButtonAttribute.border) {
                streamerButtonAttribute.border = defaultAttribute.border;
            }
            // 如果用户不指定宽度，使用默认宽度
            if (undefined == streamerButtonAttribute.width) {
                streamerButtonAttribute.width = defaultAttribute.width;
            }
            // 如果用户不指定高度，使用默认高度
            if (undefined == streamerButtonAttribute.height) {
                streamerButtonAttribute.height = defaultAttribute.height;
            }
            // 如果用户不指定前景色，使用默认前景色
            if (undefined == streamerButtonAttribute.foregroundColor) {
                streamerButtonAttribute.foregroundColor = defaultAttribute.foregroundColor;
            }
            // 如果用户不指定背景色，使用默认背景色
            if (undefined == streamerButtonAttribute.backgroundColor) {
                streamerButtonAttribute.backgroundColor = defaultAttribute.backgroundColor;
            }
            // 如果用户不指定流光色，使用默认流光色
            if (undefined == streamerButtonAttribute.streamerColor) {
                streamerButtonAttribute.streamerColor = defaultAttribute.streamerColor;
            }
        }
        // 返回属性对象
        return streamerButtonAttribute;
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.

import {StreamerButton} from '../common/StreamerButton.ets'
1.

StreamerButton()
1.

import {StreamerButton} from '../common/StreamerButton.ets'

@Entry
@Component
struct Sample {

    build() {
        Flex({direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceAround,
            alignContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {

            // 默认按钮
            StreamerButton()
            // 修改按钮字体颜色
            StreamerButton({
                streamerButtonAttribute: {
                    fontColor: '#FF0000',
                    text: '确定',
                    foregroundColor: Color.Orange
                }
            })
            // 自定义按钮
            StreamerButton({
                streamerButtonAttribute: {
                    text: '自定义',
                    fontSize: 40,
                    fontColor: '#00ff00',
                    border: 10,
                    width: 200,
                    height: 100,
                    foregroundColor: '#03a9f4',
                    backgroundColor: '#f441a5',
                    streamerColor: '#ffeb3b',
                    clickCallback: () => {
                        AlertDialog.show({
                            message: '您点击自定义按钮',
                            autoCancel: true
                        })
                    }
                }
            })

        }
        .width('100%')
        .height('100%')
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.