13 【HarmonyOS NEXT】 仿uv-ui组件开发之Avatar组件进阶指南(四)

// 优化前
@State private props: AvatarProps

// 优化后
private props: AvatarProps = {
    shape: AvatarShape.CIRCLE,
    size: AvatarSize.MEDIUM,
    randomBgColor: false
}
@State private loadError: boolean = false
@State private bgColorValue: string = ''

// 优化前
Stack() {
    Circle().fill(this.getBackgroundColor())
    this.renderContent()
}

// 优化后
Stack({ alignContent: Alignment.Center }) {
    if (this.props.randomBgColor || this.props.bgColor) {
        Circle()
            .fill(this.props.bgColor ?? this.bgColorValue)
            .width('100%')
            .height('100%')
    }
    // 内容渲染
}

// 图片模式优化
Image(this.props.src)
    .width('100%')
    .height('100%')
    .objectFit(ImageFit.Cover)
    .onError(() => {
        this.loadError = true
        this.props.onError?.()
    })

// 颜色常量定义
const AVATAR_COLORS = {
    primary: '#1890ff',
    success: '#52c41a',
    warning: '#faad14',
    danger: '#f5222d'
}

// 随机颜色池
const RANDOM_COLORS = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']

@Component
export struct Avatar {
    // 1. 属性定义
    private props: AvatarProps
    @State private states: AvatarStates

    // 2. 生命周期
    aboutToAppear() { }

    // 3. 私有方法
    private getSize(): number { }
    private getRandomColor(): string { }

    // 4. 渲染方法
    private renderBackground() { }
    private renderContent() { }

    // 5. 主体构建
    build() { }
}

// 类型定义优化
type AvatarSize = 'mini' | 'small' | 'medium' | 'large'
type AvatarShape = 'circle' | 'square'

interface AvatarStates {
    loadError: boolean
    bgColorValue: string
}