01. HarmonyOS应用开发实践与技术解析 原创

export default class EntryAbility extends UIAbility {
    onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
        // Ability创建时调用
    }

    onDestroy(): void {
        // Ability销毁时调用
    }

    onWindowStageCreate(windowStage: window.WindowStage): void {
        // 窗口创建时调用，在这里加载主页面
        windowStage.loadContent('pages/Index', (err) => {
            // 页面加载回调
        });
    }

    onWindowStageDestroy(): void {
        // 窗口销毁时调用
    }

    onForeground(): void {
        // Ability进入前台时调用
    }

    onBackground(): void {
        // Ability进入后台时调用
    }
}
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.

@Component
export struct Navbar {
    @Prop title: string = ''
    build() {
        // 组件UI构建
    }
}
1.
2.
3.
4.
5.
6.
7.

@State screenWidth: number = 0
@State dataCards: DashboardCardItem[] = [
    {title: '今日销售额', value: '8,846', unit: '元', trend: '+12.5%', color: '#2A9D8F'},
    // 其他数据...
]
1.
2.
3.
4.
5.

aboutToAppear() {
    // 获取屏幕宽度，用于响应式布局
    this.screenWidth = px2vp(AppStorage.Get<number>('windowWidth') || 720)
}

// 根据屏幕宽度决定每行显示的卡片数量
Flex({ wrap: FlexWrap.Wrap, justifyContent: this.screenWidth > 600 ? FlexAlign.Start : FlexAlign.SpaceAround }) {
    // 卡片布局
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

Text(card.value)
    .fontSize(28)
    .fontWeight(FontWeight.Bold)
    .fontColor(card.color)
1.
2.
3.
4.

.width(this.screenWidth > 600 ? '22%' : '45%')
.height(120)
.padding(16)
.margin(8)
.borderRadius(12)
.backgroundColor(Color.White)
// 添加卡片阴影效果
.shadow({radius: 4, color: '#1A000000', offsetY: 2})
1.
2.
3.
4.
5.
6.
7.
8.

router.pushUrl({
    url: item.path,
    params: {
        desc: item.desc,
        value: item.value
    }
})
1.
2.
3.
4.
5.
6.
7.

onPageShow(): void {
    // 获取传递过来的参数对象
    const params = router.getParams() as Record<string, string>;
    //   获取传递的值
    if (params) {
        this.desc = params.desc as string
        this.title = params.value as string
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

export interface DashboardCardItem {
    title: string;    // 卡片标题
    value: string;    // 数值内容
    unit: string;     // 数值单位
    trend: string;    // 趋势变化
    color: string;    // 卡片主题颜色
}
1.
2.
3.
4.
5.
6.
7.

ForEach(this.dataCards, (card: DashboardCardItem) => {
    // 数据卡片UI构建
})
1.
2.
3.

// 根据趋势是否为正值显示不同颜色
Text(card.trend)
    .fontSize(14)
    .fontColor(card.trend.includes('+') ? '#2A9D8F' : '#E76F51')
1.
2.
3.
4.

aboutToAppear() {
    // 初始化工作
    this.screenWidth = px2vp(AppStorage.Get<number>('windowWidth') || 720)
}

onPageShow(): void {
    // 页面显示时的处理
    const params = router.getParams() as Record<string, string>;
    // ...
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

@Component
export struct Navbar {
    @Prop title: string = ''
    build() {
        Row(){
            Image($r('app.media.tornLeft')).width(30)
                .onClick(()=>{
                    router.back()
                })
            Text(this.title).fontSize(20).fontWeight(800)
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .height('50')
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

.width(this.screenWidth > 600 ? '22%' : '45%')
1.