DevEco Studio中Ai插件DevEco CodeGenie使用过程

DevEco Studio中Ai插件DevEco CodeGenie使用过程 才知道有Ai插件，迫不及待的安装好，那么试试效果吧。

生成的代码报的错有点多啊。以下是生成代码：

cke_132.png

// XLogin.ets
import router from '@kit.ArkUI';
import promptAction from '@kit.ArkUI';
import { preferences } from '@kit.ArkData';

struct XLogin {
  @State account: string = '';
  @State password: string = '';
  @State rememberPassword: boolean = false;
  private dataPreference: preferences.Preferences | null = null;

  aboutToAppear() {
    preferences.getPreferences(this.context, 'userInfo').then((pref) => {
      this.dataPreference = pref;
      this.loadSavedCredentials();
    });
  }

  build() {
    Column() {
      // 顶部图标
      Image($r('app.media.login_icon'))
        .width(120)
        .height(120)
        .margin({ top: 40, bottom: 60 })

      // 账号输入框
      TextInput({ placeholder: '请输入账号' })
        .width('90%')
        .height(50)
        .onChange((value: string) => {
          this.account = value;
        })

      // 密码输入框
      TextInput({ placeholder: '请输入密码' })
        .type(InputType.Password)
        .width('90%')
        .height(50)
        .margin({ top: 20 })
        .onChange((value: string) => {
          this.password = value;
        })

      // 记住密码选项
      Row()
        .width('90%')
        .justifyContent(FlexAlign.Start)
        .margin({ top: 10 })
        .Toggle({ type: ToggleType.Checkbox })
        .onChange((isOn: boolean) => {
          this.rememberPassword = isOn;
        })
        .Text('记住密码')
          .fontSize(14)
          .margin({ left: 8 })

      // 登录按钮
      Button('登录', { type: ButtonType.Capsule })
        .width('90%')
        .height(45)
        .margin({ top: 40 })
        .onClick(() => {
          this.handleLogin();
        })
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
  }

  // 处理登录逻辑
  private handleLogin() {
    if (!this.account || !this.password) {
      promptAction.showToast({ message: '账号或密码不能为空' });
      return;
    }

    // 模拟登录成功
    if (this.rememberPassword) {
      this.saveCredentials();
    }
    router.pushUrl({ url: 'pages/HomePage' });
  }

  // 保存凭证到本地
  private async saveCredentials() {
    if (this.dataPreference) {
      await this.dataPreference.put('account', this.account);
      await this.dataPreference.put('password', this.password);
      await this.dataPreference.flush();
    }
  }

  // 加载已保存的凭证
  private async loadSavedCredentials() {
    if (this.dataPreference) {
      this.account = await this.dataPreference.get('account', '');
      this.password = await this.dataPreference.get('password', '');
    }
  }
}

2 回复

DevEco CodeGenie是DevEco Studio的AI辅助插件，支持ArkTS/TS/JS代码智能生成。安装后通过右侧CodeGenie面板交互，输入自然语言描述需求（如"页面跳转"），插件自动生成对应代码片段。支持上下文感知，能基于当前项目结构补全逻辑。典型应用场景包括UI布局生成、业务逻辑编写、API调用模板创建等。代码生成后需手动验证功能完整性，部分复杂场景可能需要调整生成结果。插件会随IDE版本更新迭代能力。


从代码来看，主要存在几个问题需要修正：

  1. 导入路径错误：
  • @kit.ArkUI 应该改为 @ohos.router 和 @ohos.promptAction
  • @kit.ArkData 不存在，应使用 @ohos.data.preferences
  1. 组件使用问题：
  • Toggle组件使用方式不正确，应该作为Row的子组件而非链式调用
  • InputType和ToggleType需要从@ohos.arkui导入
  1. 类型定义问题：
  • preferences.Preferences需要正确定义类型

修正建议：

  1. 更新导入语句：
import router from '@ohos.router';
import promptAction from '@ohos.promptAction';
import { preferences } from '@ohos.data.preferences';
import { InputType, ToggleType } from '@ohos.arkui';
  1. 修正Toggle组件使用方式：
Row() {
  Toggle({ type: ToggleType.Checkbox })
    .onChange((isOn: boolean) => {
      this.rememberPassword = isOn;
    })
  Text('记住密码')
    .fontSize(14)
    .margin({ left: 8 })
}
  1. 更新Preferences类型定义：
private dataPreference: preferences.Preferences | null = null;

这些修改应该能解决大部分报错问题。AI生成的代码需要人工校验和调整，特别是API路径和组件使用方式。

回到顶部