171.HarmonyOS NEXT系列教程之列表交换组件属性修改器详解

export class ListItemModifier implements AttributeModifier<ListItemAttribute> {
    // UI属性
    public hasShadow: boolean = false;
    public scale: number = 1;
    public offsetY: number = 0;
    public offsetX: number = 0;
    public opacity: number = 1;
    public isDeleted: boolean = false;
}

export class ListItemModifier {
    // 控制阴影效果
    public hasShadow: boolean = false;
    
    // 控制缩放比例
    public scale: number = 1;
    
    // 控制透明度
    public opacity: number = 1;
}

export class ListItemModifier {
    // 垂直方向偏移
    public offsetY: number = 0;
    
    // 水平方向偏移
    public offsetX: number = 0;
}

export class ListItemModifier {
    // 单例实例
    public static instance: ListItemModifier | null = null;

    // 获取实例方法
    public static getInstance(): ListItemModifier {
        if (!ListItemModifier.instance) {
            ListItemModifier.instance = new ListItemModifier();
        }
        return ListItemModifier.instance;
    }
}

// 获取修改器实例
const modifier = ListItemModifier.getInstance();

// 修改属性
modifier.scale = 1.04;
modifier.opacity = 0.8;

export class ListItemModifier implements AttributeModifier<ListItemAttribute> {
    /**
     * 定义组件普通状态时的样式
     * @param instance: ListItem属性
     */
    applyNormalAttribute(instance: ListItemAttribute): void {
        // 设置阴影
        if (this.hasShadow) {
            instance.shadow({
                radius: $r('app.integer.list_exchange_shadow_radius'),
                color: $r('app.color.list_exchange_box_shadow')
            });
            instance.zIndex(1);
            instance.opacity(0.5);
        } else {
            instance.opacity(this.opacity);
        }

        // 设置位置和缩放
        instance.translate({ x: this.offsetX, y: this.offsetY });
        instance.scale({ x: this.scale, y: this.scale });
    }
}

// 创建属性实例
const attribute = new ListItemAttribute();

// 应用属性
modifier.applyNormalAttribute(attribute);

// 缩放动画
modifier.scale = 1.04;  // 放大效果

// 透明度动画
modifier.opacity = 0.5;  // 半透明效果

// 位置动画
modifier.offsetY = 100;  // 向下移动

// 拖拽效果组合
modifier.hasShadow = true;
modifier.scale = 1.04;
modifier.opacity = 0.8;

export class ListItemModifier {
    // 缓存上一次的属性值
    private lastScale: number = 1;
    private lastOpacity: number = 1;

    // 只在值变化时更新
    applyNormalAttribute(instance: ListItemAttribute): void {
        if (this.scale !== this.lastScale) {
            instance.scale({ x: this.scale, y: this.scale });
            this.lastScale = this.scale;
        }
    }
}

// 批量更新属性
applyBatchUpdate(updates: Partial<ListItemModifier>): void {
    Object.assign(this, updates);
    this.notifyUpdate();
}