[经验]

【M-K1HSE开发板免费体验】跟随到老写应用之不完整版

2025-8-6 21:54:04

801 开发板试用

当把开发环境配置好之后就可以顺利的进行后面的开发了

可以直接在这个环境里面用preview的形式进行开发，当然这个里面不能调试，如果要调试的话，还是要下载一个虚拟环境，但是这个虚拟环境占用空间比较大，自己决定？
另外也可以直接在硬件端进行，就是直接下载到硬件里面调试。
开始上手的时候做了一个无聊的小游戏，熟悉一下相关语言和语法。

// 定义一个接口来描述每个格子的图形状态
interface ShapeInfo {
  id: number; // 用于ForEach的唯一标识
  type: 'Circle' | 'Ellipse'; // 图形类型
  color: ResourceColor; // 图形颜色
  width: string;
  height: string;
}

@Entry
@Component
struct Index {
  // 使用 @State 装饰器，当 shapes 数组变化时，UI会自动刷新
  @State shapes: ShapeInfo[] = [];

  // 支持的图形类型列表
  private shapeTypes: ('Circle' | 'Ellipse')[] = ['Circle', 'Ellipse'];

  // aboutToAppear是组件即将显示时的生命周期回调
  aboutToAppear() {
    this.generateRandomShapes();
  }

  // 生成随机图形数据的核心函数 (此函数保持不变)
  generateRandomShapes() {
    const newShapes: ShapeInfo[] = [];
    const totalGrids = 8;
    for (let i = 0; i < totalGrids; i++) {
      const randomTypeIndex = Math.floor(Math.random() * this.shapeTypes.length);
      const type = this.shapeTypes[randomTypeIndex];
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      const hexR = r.toString(16).padStart(2, '0');
      const hexG = g.toString(16).padStart(2, '0');
      const hexB = b.toString(16).padStart(2, '0');
      const color: ResourceColor = `#${hexR}${hexG}${hexB}`;
      const size = Math.floor(Math.random() * 40) + 40;
      newShapes.push({
        id: i,
        type: type,
        color: color,
        width: `${size}%`,
        height: `${size}%`
      });
    }
    this.shapes = newShapes;
  }

  // *** 新增：处理点击和交换逻辑的函数 ***
  swapRowItems(clickedIndex: number) {
    // 1. 计算同行另一个元素的索引
    // 如果点击的是偶数索引 (0, 2, 4, 6)，它的同伴是 clickedIndex + 1
    // 如果点击的是奇数索引 (1, 3, 5, 7)，它的同伴是 clickedIndex - 1
    const partnerIndex = (clickedIndex % 2 === 0) ? clickedIndex + 1 : clickedIndex - 1;

    // 2. 避免数组越界 (虽然在这个布局里不会发生，但这是个好习惯)
    if (partnerIndex < 0 || partnerIndex >= this.shapes.length) {
      return;
    }

    // 3. 交换数组中的两个元素
    // 这是触发UI自动更新的核心步骤！
    // 我们需要创建一个新的数组副本来修改，以符合 @State 的最佳实践
    const newShapes = [...this.shapes]; // 创建一个浅拷贝
    const temp = newShapes[clickedIndex];
    newShapes[clickedIndex] = newShapes[partnerIndex];
    newShapes[partnerIndex] = temp;

    // 4. 将新数组赋值给状态变量
    this.shapes = newShapes;
  }

  build() {
    Column() {
      Grid() {
        // *** 修改：ForEach 的第二个参数现在包含索引 ***
        ForEach(
          this.shapes,
          (item: ShapeInfo, index: number) => { // 获取当前项的索引 index
            GridItem() {
              if (item.type === 'Circle') {
                Circle()
                  .width(item.width)
                  .aspectRatio(1)
                  .fill(item.color)
              } else if (item.type === 'Ellipse') {
                Ellipse()
                  .width(item.width)
                  .height(item.height)
                  .fill(item.color)
              }
            }
            .padding(5)
            .backgroundColor(Color.White)
            .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 })
            .borderRadius(15)
            // *** 新增：为每个GridItem添加onClick事件 ***
            .onClick(() => {
              this.swapRowItems(index); // 点击时调用交换函数，并传入当前索引
            })
          },
          (item: ShapeInfo) => item.id.toString()
        )
      }
      .columnsTemplate('1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .padding(10)
      .layoutWeight(1)

      // 刷新按钮 (保持不变)
      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Text('Regenerate Shapes')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
      }
      .width('60%')
      .height(50)
      .margin({ top: 20, bottom: 20 })
      .onClick(() => {
        this.generateRandomShapes();
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
  }
}

将这段代码直接运行就可以看到效果了，我就不截图了。
第二个项目是跟着B站上面的视频，做了一个音乐播放器。
这里的代码就不放了？
只上一张听课的记录ppt。
当然这个代码也是开源的，如果大家感兴趣可以自己食用。
https://www.yuque.com/zhaoyanqiu-ofgdd/ghyvbg
最后，觉得还是对这个arkts语言比较不熟悉，所以还是又听了一个教学内容
https://www.bilibili.com/video/BV18Em8YFEBD/?spm_id_from=333.788.player.switch&vd_source=fdfefaca3fb114a432c0089566c60451&p=84