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

@toc

1. 前言

自从上次发贴ArkUI eTS上实现"流光按钮"效果 后，觉得效果有了，但不能以后每个项目用到此类型按钮，都要复制代码来修改，这时组件的优点就显示出来了，此贴来说说，如何把上篇流光按钮做成一个组件。

2. 效果

3. 项目结构

4. 组件介绍

组件包含了UI布局，组件属性定义，组件默认值，组件代码有详细说明，可以直接看代码

@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;
    }
}

5. 使用组件

如何使用自定义组件，首先引用自定义组件文件，如下：

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

使用如下：

StreamerButton()

具体使用自定义组件，提供参数，请看代码详情

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%')
    }
}

6. 总结

使用组件后，主界面简洁明了，不用在关注组件里的具体实现，简单引用就可以得到一个漂亮的流光按钮.

备注：思路参考来自 #夏日挑战赛# HarmonyOS - 方舟开发框架ArkUI 流光按钮效果