AutoDev Sample

AutoDev 场景分析

• ArkUI 生成：Auto ArkUI
• ArkTS 代码补全
• Android/微信小程序代码迁移：Auto ArkUI
• 测试代码生成：Test ArkUI

Auto ArkUI Sample

Counter

Highlight.js support

// 生成一个经典的前端 counter

Column({}) {
  Text('Blog Title').fontSize(24).fontWeight(FontWeight.Bold)
  Text('Author: John Doe').fontSize(18).fontColor(Color.Blue)
  Text('Published Date: July 1, 2022').fontSize(18).fontColor(Color.Blue)
  Image('blog_image.jpg').width('100%').height(300)
  Text('Blog Content goes here...').fontSize(18)
  Button('Like', { type: ButtonType.Normal, stateEffect: true })
    .borderRadius(8)
    .backgroundColor(0xFF0000)
    .width(100)
    .height(40)
}.width('100%').margin(20).padding({ left: 20, right: 20 })

MusicPlayer

Official: https://gitee.com/harmonyos/samples/tree/master/MultiDeviceAppDev/MusicAlbum

// 音乐专辑主页
// 头部返回栏: 因元素单一、位置固定在顶部，因此适合采用自适应拉伸，充分利用顶部区域。
// 专辑封面: 使用栅格组件控制占比，在小尺寸屏幕下封面图与歌单描述在同一行。
// 歌曲列表: 使用栅格组件控制宽度，在小尺寸屏幕下宽度为屏幕的100%，中尺寸屏幕下宽度为屏幕的50%，大尺寸屏幕下宽度为屏幕的75%。
// 播放器: 采用自适应拉伸，充分使用底部区域。

Result:

官方示例：

Healthy Diet

// 生成一个：健康饮食详细页。
// 要求：使用滑动组件展示食物的详细信息，包括使用画布组件展示单位重量的食物各个营养元素的的占比,使用进度条组件展示当前食物是否为高热食物，
以及展示单位重量的食物所包含的热量、脂肪、蛋白质、碳水以及维他命C值；并且点击记录按钮可以弹出记录饮食的弹窗，包括记录食物的种类、重量以及用餐时间，
可以通过点击完成添加饮食，同时添加的饮食信息会在“记录”Tab页签做展示。

Result:

官方示例：