【跟着Want595学鸿蒙】CodeGenie代码生成：一键生成高质量代码

Want595

2275人浏览 · 2025-10-13 11:23:45

Want595 · 2025-10-13 11:23:45 发布

一、写在前面

大家好，我是阿伟！在上一篇文章中，我们探讨了通过 CodeGenie 的智能问答功能快速获取鸿蒙开发知识。今天，我将带大家解锁 CodeGenie 更强大的能力——用自然语言生成代码！

你是否曾为编写复杂的 UI 布局而翻遍文档？是否在实现动画逻辑时卡壳许久？现在，这些烦恼都有了解决方案！随着 CodeGenie 深度集成到 DevEco Studio，你只需用自然语言描述需求，AI 就能自动生成高质量的 ArkTS 代码，真正实现“说话即编码”。

无论你想从零开始构建完整项目，还是在现有代码中进行智能补全，CodeGenie 都能精准理解上下文，准确把握开发意图，一键生成高质量的代码。接下来，跟着阿伟一起走进 CodeGenie 的世界，掌握这些让开发效率倍增的黑科技吧！

二、自然语言代码生成

CodeGenie 最惊艳的能力之一，就是支持 通过自然语言描述直接生成代码，你不需要记住复杂的 API 接口，也不用反复查文档，只需要像和同事沟通一样，把需求说清楚，CodeGenie 就能帮你把想法变成可执行的 ArkTS 代码。

例如：使用ArkTs语言写一段代码，在页面中间部分插入一张图片，该图片要居中，自适应页面的宽度和高度。

CodeGenie 生成的代码如下：

@Entry
@Component
struct AdaptiveImageExample {
  build() {
    Column() {
      Blank()
      Image($r('app.media.demo_image')) // 使用资源管理器中的图片
        .objectFit(ImageFit.Contain)    // 保持宽高比自适应
        .width('100%')                  // 宽度充满容器
        .height('100%')                 // 高度充满剩余空间
      Blank()
    }
    .width('100%')                      // 父容器宽度充满屏幕
    .height('100%')                     // 父容器高度充满屏幕
    .justifyContent(FlexAlign.Center)   // 垂直居中
  }
}

生成完毕后，你可以：

点击“复制”按钮将代码粘贴到项目中；
点击“插入”按钮，代码将自动插入到当前编辑器光标位置；
点击“新建文件”按钮，新建一个文件保存生成的代码。

在这里，阿伟选则单击插入按钮，将生成的代码插入到项目中。

然后，将想要展示的图片上传到entry\src\main\resources\base\media路径下，再将代码中的Image($r('app.media.demo_image')) 改成图片名称，比如我的图片名称是logo.png，就改成Image($r('app.media.logo'))

最后执行程序，程序的运行结果如下：

整个过程非常便捷，极大提升了开发速度与准确性。

三、编辑区代码生成

除了全局对话式生成，CodeGenie 还提供了更沉浸式的代码生成方式 —— Inline Edit（内联编辑），让你在编写代码的过程中，随时召唤 AI 助手，生成局部代码片段。

3.1. 启动编辑区对话框

目前，有两种方式可以快速启动 Inline Edit 对话框：

右键菜单法：
- 在代码编辑区任意位置右键
- 选择 CodeGenie > 编辑区对话

快捷键触发法：
- Windows/Linux：Alt + I
- macOS：Command + I

⚠️ 若未看到浮窗提示，请检查设置：文件 > 设置 > CodeGenie > 代码生成 ，取消勾选 免打扰模式

3.2. 操作流程演示

例如，在刚才的图片下面添加一个放大/缩小按钮。

将光标定位在目标位置；
按下 Alt+I 唤醒 Inline Edit；
输入描述：给图片添加放大和缩小按钮，点击时可以放大/缩小图片的尺寸。

CodeGenie 将生成如下代码：

@Entry
@Component
struct AdaptiveImageExample {
  @State imageSize: number = 100

  build() {
    Column() {
      Blank()
      Image($r('app.media.logo'))
        .objectFit(ImageFit.Contain)
        .width(this.imageSize + '%')
        .height(this.imageSize + '%')
      Row() {
        Button('放大')
          .onClick(() => {
            this.imageSize = Math.min(this.imageSize + 10, 200)
          })
        Button('缩小')
          .onClick(() => {
            this.imageSize = Math.max(this.imageSize - 10, 50)
          })
      }
      .margin({ top: 20 })

      Blank()
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

生成结果将以颜色高亮显示差异：

🟩 绿色：新增代码
🔵 蓝色：修改现有代码
🔴 红色：删除代码（如有）

3.3. 采纳或拒绝修改

✅ Alt + Enter：接受全部生成内容
✅ Shift + Ctrl + Y（macOS: Shift + Command + Y）：逐段接受
❌ Shift + Ctrl + N（macOS: Shift + Command + N）：逐段拒绝
🔄 Ctrl + K（macOS: Command + K）：进入 Further Edit，继续追问优化
🔄 Alt + R（macOS: Option + R）：重新生成（最多5次）

采纳代码后，重启程序，可以在图片下面看到放大和缩小两个按钮。

四、编辑区代码续写

如果说 Inline Edit 是“主动提问”，那么 代码续写（Code Completion） 就是 CodeGenie 的“主动服务”，它能在你编码过程中，根据上下文自动预测并推荐后续代码，真正做到“你想到的，它已写下”。

4.1. 代码续写类型

CodeGenie 支持两种续写模式，可根据习惯自由切换：

模式	说明
Enable snippet generation（片段续写）	按回车后，AI 推荐下一段可能的代码块
Enable inline generation（行内续写）	编码停顿瞬间，AI 自动补全当前行

此外，还可设置 续写延迟时间，避免干扰编码节奏。

设置路径：文件 > 设置 > CodeGenie > 代码生成

4.2. 如何触发代码续写？

触发方式	快捷键（Windows）	快捷键（macOS）
多行续写	`Enter` 或 `Alt + C`	`Enter` 或 `Option + C`
单行续写	`Alt + X`	`Option + X`

例如，在刚才的代码后面按下Alt+C，CodeGenie 会自动推荐：

Text('图片大小：' + this.imageSize + '%')
    .fontSize(16)
    .margin({ top: 20 })

此时，可以选中按下键盘的Tab键接纳所有补全的代码，也可以按下Ctrl+↓接纳单行代码。

4.3. 如何采纳续写建议？

操作	快捷键（Windows）	快捷键（macOS）
采纳全部	`Tab`	`Tab`
逐行采纳	`Ctrl + ↓`	`Command + ↓`
逐单词采纳	`Ctrl + →`	`Option + →`
忽略建议	`Esc`	`Esc`
查看上一条建议	`Alt + [`	`Option + [`
查看下一条建议	`Alt + ]`	`Option + ]`
重新生成建议	`Alt + R`	`Option + R`
打开主面板	`Alt + U`	`Option + U`

💡 小技巧：如果你发现续写不出现，请检查当前上下文是否满足条件：

光标上方 10 行内有效代码 ≥ 5 行
排除空行、注释行、仅括号的无效行
建议先写一些基础结构再等待续写

五、真实应用场景：从0到1快速搭建页面

让我们通过一个实际案例，看看如何综合运用 CodeGenie 的三大代码生成能力，快速完成一个登录页面的搭建。

5.1. 场景描述

请使用ArkTs语言创建一个登录页面，包含：

背景渐变色
Logo 图标居中显示
用户名/密码输入框
登录按钮
“忘记密码”文字链接

5.2. 步骤演示

首先，将场景描述发送给CodeGenie，CodeGenie会生成登录页面的完整代码。

@Entry
@Component
struct LoginPage {
  @State username: string = ''
  @State password: string = ''

  build() {
    Column() {
      // Logo区域
      Image($r('app.media.logo'))
        .width(120)
        .height(120)
        .margin({ top: 60 })

      // 输入区域
      Column({ space: 20 }) {
        TextInput({ placeholder: '请输入用户名' })
          .onChange(value => this.username = value)
          .width('80%')
          .padding(12)
          .borderRadius(8)
          .backgroundColor(Color.White)

        TextInput({ placeholder: '请输入密码' })
          .onChange(value => this.password = value)
          .width('80%')
          .padding(12)
          .borderRadius(8)
          .backgroundColor(Color.White)
      }
      .margin({ top: 40 })

      // 登录按钮
      Button('登 录', { type: ButtonType.Capsule })
        .width('80%')
        .height(45)
        .margin({ top: 30 })
        .backgroundColor('#007DFF')
        .onClick(() => this.handleLogin())

      // 忘记密码
      Text('忘记密码？')
        .fontColor('#007DFF')
        .margin({ top: 20 })
        .onClick(() => this.handleForgotPassword())
    }
    .width('100%')
    .height('100%')
    .linearGradient({
      angle: 180,
      colors: [['#87CEEB', 0.0], ['#4682B4', 1.0]]
    })
  }

  private handleLogin() {
    // 登录逻辑实现
  }

  private handleForgotPassword() {
    // 忘记密码处理
  }
}

然后，将鼠标的光标移动到 登录逻辑实现 和 忘记密码处理 部分，按下 Alt+C 键，等待CodeGenie补全代码。

  private handleLogin() {
    // 登录逻辑实现
    AlertDialog.show({
      message: `尝试登录\n用户名: ${this.username}\n密码: ${this.password}`
    })
  }

  private handleForgotPassword() {
    // 忘记密码处理
    AlertDialog.show({
      message: '请通过注册邮箱重置密码'
    })
  }