鴻蒙開發案例：直尺

zhongcx發表於2024-11-03
鴻蒙

【1】引言（完整程式碼在最後面）

本文將透過一個具體的案例——建立一個橫屏顯示的直尺應用，來引導讀者瞭解鴻蒙應用開發的基本流程和技術要點。

【2】環境準備

電腦系統：windows 10

開發工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806

工程版本：API 12

真機：Mate 60 Pro

語言：ArkTS、ArkUI

【3】功能分析

1. 刻度線生成

生成直尺上的刻度線是直尺應用的基礎。不同的刻度線有不同的高度，這有助於使用者更準確地讀取長度。

  for (let i = 0; i <= 15 * 10; i++) {
    let lineHeight: number = (i % 10 === 0) ? 90 : (i % 5 === 0) ? 60 : 45;
    this.rulerLines.push(new RulerLine(i, lineHeight));
  }

2. 刻度線編號顯示

為了便於使用者讀取刻度，每隔一定數量的刻度線顯示一個編號。這樣可以減少視覺上的混亂，提高可讀性。

class RulerLine {
  index: number;
  height: number;

  constructor(index: number, height: number) {
    this.index = index;
    this.height = height;
  }

  showNumber(): string {
    return this.index % 10 === 0 ? `${Math.floor(this.index / 10)}` : '';
  }
}

3. 螢幕方向設定

確保應用在橫屏模式下顯示，因為直尺更適合橫向使用。

  window.getLastWindow(getContext()).then((windowClass) => {
    windowClass.setPreferredOrientation(window.Orientation.LANDSCAPE);
  });

4. 容器高度和寬度計算

動態計算容器的高度和寬度，以適應不同裝置的螢幕尺寸。

onCellWidthChanged() {
  this.maxRulerHeight = vp2px(this.containerWidth) / this.cellWidthInPixels / 10;
}

onContainerHeightChanged() {
  this.containerHeight = Math.max(this.containerHeight, 53);
}

5. 拖動手勢處理

透過手勢操作，使用者可以更直觀地調整直尺的位置和高度，提高使用者體驗。

Stack() {
  Circle({ height: 30, width: 30 })
    .fill("#019dfe")
    .stroke(Color.Transparent)
    .strokeWidth(3);

  Circle({ height: 40, width: 40 })
    .fill(Color.Transparent)
    .stroke("#019dfe")
    .strokeWidth(3);
}
.hitTestBehavior(HitTestMode.Block)
.padding(20)
.alignRules({
  center: { anchor: "__container__", align: VerticalAlign.Center },
  middle: { anchor: "__container__", align: HorizontalAlign.Start }
})
.gesture(PanGesture({
  fingers: 1,
  direction: PanDirection.Horizontal,
  distance: 1
}).onActionUpdate((event: GestureEvent) => {
  this.leftOffsetX = this.currentPositionX + event.offsetX / 2;
  this.containerHeight = this.originalContainerHeight - event.offsetX;
}).onActionEnd(() => {
  this.currentPositionX = this.leftOffsetX;
  this.originalContainerHeight = this.containerHeight;
}));

Stack() {
  Circle({ height: 30, width: 30 })
    .fill("#019dfe")
    .stroke(Color.Transparent)
    .strokeWidth(3);

  Circle({ height: 40, width: 40 })
    .fill(Color.Transparent)
    .stroke("#019dfe")
    .strokeWidth(3);
}
.hitTestBehavior(HitTestMode.Block)
.padding(20)
.alignRules({
  center: { anchor: "__container__", align: VerticalAlign.Center },
  middle: { anchor: "__container__", align: HorizontalAlign.End }
})
.gesture(PanGesture({
  fingers: 1,
  direction: PanDirection.Horizontal,
  distance: 1
}).onActionUpdate((event: GestureEvent) => {
  this.leftOffsetX = this.currentPositionX + event.offsetX / 2;
  this.containerHeight = this.originalContainerHeight + event.offsetX;
}).onActionEnd(() => {
  this.currentPositionX = this.leftOffsetX;
  this.originalContainerHeight = this.containerHeight;
}));

6. 計數器調整

透過計數器，使用者可以微調每毫米對應的畫素值和選中區的距離，從而更精確地使用直尺。

Counter() {
  Text(`選中區距離：${this.maxRulerHeight.toFixed(2)}釐米`).fancy();
}
.foregroundColor(Color.White)
.width(300)
.onInc(() => {
  this.containerHeight = px2vp(vp2px(this.containerHeight) + this.cellWidthInPixels / 10);
})
.onDec(() => {
  this.containerHeight = px2vp(vp2px(this.containerHeight) - this.cellWidthInPixels / 10);
});

Counter() {
  Text(`每毫米間距：${this.cellWidthInPixels.toFixed(2)}px`).fancy();
}
.foregroundColor(Color.White)
.width(300)
.onInc(() => {
  this.cellWidthInPixels += 0.01;
})
.onDec(() => {
  this.cellWidthInPixels = Math.max(0.01, this.cellWidthInPixels - 0.01);
});

7. 區域變化監聽

當容器的區域發生變化時，需要及時更新容器的寬度，以確保直尺的顯示正確。

RelativeContainer() {
  Rect()
    .fill("#80019dfe")
    .borderColor("#019dfe")
    .borderWidth({ left: 1, right: 1 })
    .clip(true)
    .width("100%")
    .height("100%")
    .onAreaChange((oldArea: Area, newArea: Area) => {
      this.containerWidth = newArea.width as number;
    });
}

【完整程式碼】

import { window } from '@kit.ArkUI'; // 匯入視窗相關的API
import { deviceInfo } from '@kit.BasicServicesKit'; // 匯入裝置資訊相關的API

// 定義直尺線類
class RulerLine {
  index: number; // 線的索引
  height: number; // 線的高度

  constructor(index: number, height: number) {
    this.index = index; // 初始化索引
    this.height = height; // 初始化高度
  }

  // 顯示線的編號
  showNumber(): string {
    return this.index % 10 === 0 ? `${Math.floor(this.index / 10)}` : ''; // 每10個線顯示一個編號
  }
}

// 擴充套件文字樣式
@Extend(Text)
function fancy() {
  .fontColor("#019dfe") // 設定字型顏色
  .fontSize(20); // 設定字型大小
}

// 定義直尺元件
@Entry
@Component
struct RulerComponent {
  @State maxRulerHeight: number = 0; // 最大直尺高度
  @State @Watch('onCellWidthChanged') cellWidthInPixels: number = 17.28; // 每毫米對應的畫素
  @State textWidth: number = 80; // 文字寬度
  @State rulerLines: RulerLine[] = []; // 直尺線陣列
  @State leftOffsetX: number = -300; // 左側偏移
  @State currentPositionX: number = -300; // 當前X位置
  @State @Watch('onContainerHeightChanged') containerHeight: number = 53; // 容器高度
  @State originalContainerHeight: number = 53; // 原始容器高度
  @State @Watch('onCellWidthChanged') containerWidth: number = 0; // 容器寬度

  // 處理單元格寬度變化
  onCellWidthChanged() {
    this.maxRulerHeight = vp2px(this.containerWidth) / this.cellWidthInPixels / 10; // 更新最大直尺高度
  }

  // 處理容器高度變化
  onContainerHeightChanged() {
    this.containerHeight = Math.max(this.containerHeight, 53); // 確保容器高度不小於53
  }

  // 元件即將出現時
  aboutToAppear(): void {
    // 設定當前應用為橫屏顯示
    window.getLastWindow(getContext()).then((windowClass) => {
      windowClass.setPreferredOrientation(window.Orientation.LANDSCAPE); // 設定為橫屏
    });

    // 初始化直尺線
    for (let i = 0; i <= 15 * 10; i++) {
      let lineHeight: number = (i % 10 === 0) ? 90 : (i % 5 === 0) ? 60 : 45; // 根據索引設定線的高度
      this.rulerLines.push(new RulerLine(i, lineHeight)); // 將新線新增到陣列中
    }
  }

  // 構建UI
  build() {
    Column() { // 建立一個列布局
      Stack() { // 建立一個堆疊佈局
        Stack() { // 建立另一個堆疊佈局
          ForEach(this.rulerLines, (line: RulerLine, index: number) => { // 遍歷直尺線陣列
            Line()// 建立一條線
              .width(1)// 設定線寬
              .height(`${line.height}px`)// 設定線高
              .backgroundColor(Color.White)// 設定線的背景顏色
              .margin({ left: `${this.cellWidthInPixels * index}px` }); // 設定線的左邊距
            Text(line.showNumber())// 顯示線的編號
              .fontColor(Color.White)// 設定字型顏色
              .fontSize(18)// 設定字型大小
              .width(`${this.textWidth}px`)// 設定文字寬度
              .height(`${this.textWidth}px`)// 設定文字高度
              .textAlign(TextAlign.Center)// 設定文字對齊方式
              .margin({
                left: `${this.cellWidthInPixels * index - this.textWidth / 2}px`,
                top: `${line.height}px`
              }); // 設定文字位置
          });
        }.width('100%').height('100%').align(Alignment.TopStart); // 設定堆疊佈局的寬高和對齊方式

        Column({ space: 15 }) { // 建立一個列布局，設定間距
          Text(`當前裝置：${deviceInfo.marketName}`).fancy(); // 顯示當前裝置名稱
          Counter() { // 建立一個計數器
            Text(`選中區距離：${this.maxRulerHeight.toFixed(2)}釐米`).fancy(); // 顯示選中區距離
          }
          .foregroundColor(Color.White) // 設定計數器字型顏色
          .width(300) // 設定計數器寬度
          .onInc(() => { // 增加計數器時的處理
            this.containerHeight = px2vp(vp2px(this.containerHeight) + this.cellWidthInPixels / 10); // 更新容器高度
          })
          .onDec(() => { // 減少計數器時的處理
            this.containerHeight = px2vp(vp2px(this.containerHeight) - this.cellWidthInPixels / 10); // 更新容器高度
          });

          Counter() { // 建立另一個計數器
            Text(`每毫米間距：${this.cellWidthInPixels.toFixed(2)}px`).fancy(); // 顯示每毫米間距
          }
          .foregroundColor(Color.White) // 設定計數器字型顏色
          .width(300) // 設定計數器寬度
          .onInc(() => { // 增加計數器時的處理
            this.cellWidthInPixels += 0.01; // 增加每毫米間距
          })
          .onDec(() => { // 減少計數器時的處理
            this.cellWidthInPixels = Math.max(0.01, this.cellWidthInPixels - 0.01); // 減少每毫米間距，確保不小於0.01
          });
        }

        RelativeContainer() { // 建立一個相對佈局容器
          Rect()// 建立一個矩形
            .fill("#80019dfe")// 設定填充顏色
            .borderColor("#019dfe")// 設定邊框顏色
            .borderWidth({ left: 1, right: 1 })// 設定邊框寬度
            .clip(true)// 啟用裁剪
            .width("100%")// 設定寬度為100%
            .height("100%")// 設定高度為100%
            .onAreaChange((oldArea: Area, newArea: Area) => { // 處理區域變化
              this.containerWidth = newArea.width as number; // 更新容器寬度
            });

          Stack() { // 建立一個堆疊佈局
            Circle({ height: 30, width: 30 })// 建立一個圓形
              .fill("#019dfe")// 設定填充顏色
              .stroke(Color.Transparent)// 設定邊框顏色為透明
              .strokeWidth(3); // 設定邊框寬度
            Circle({ height: 40, width: 40 })// 建立另一個圓形
              .fill(Color.Transparent)// 設定填充顏色為透明
              .stroke("#019dfe")// 設定邊框顏色
              .strokeWidth(3); // 設定邊框寬度
          }
          .hitTestBehavior(HitTestMode.Block) // 設定碰撞檢測行為
          .padding(20) // 設定內邊距
          .alignRules({
            // 設定對齊規則
            center: { anchor: "__container__", align: VerticalAlign.Center }, // 垂直居中
            middle: { anchor: "__container__", align: HorizontalAlign.Start } // 左對齊
          })
          .gesture(PanGesture({
            // 左側拖動手勢
            fingers: 1, // 單指拖動
            direction: PanDirection.Horizontal, // 水平拖動
            distance: 1 // 最小拖動距離
          }).onActionUpdate((event: GestureEvent) => { // 拖動更新時的處理
            this.leftOffsetX = this.currentPositionX + event.offsetX / 2; // 更新左側偏移
            this.containerHeight = this.originalContainerHeight - event.offsetX; // 更新容器高度
          }).onActionEnd(() => { // 拖動結束時的處理
            this.currentPositionX = this.leftOffsetX; // 更新位置
            this.originalContainerHeight = this.containerHeight; // 更新原始高度
          }));

          Stack() { // 建立另一個堆疊佈局
            Circle({ height: 30, width: 30 })// 建立一個圓形
              .fill("#019dfe")// 設定填充顏色
              .stroke(Color.Transparent)// 設定邊框顏色為透明
              .strokeWidth(3); // 設定邊框寬度
            Circle({ height: 40, width: 40 })// 建立另一個圓
              .fill(Color.Transparent)// 設定填充顏色為透明
              .stroke("#019dfe")// 設定邊框顏色
              .strokeWidth(3); // 設定邊框寬度
          }
          .hitTestBehavior(HitTestMode.Block) // 設定碰撞檢測行為
          .padding(20) // 設定內邊距
          .alignRules({
            // 設定對齊規則
            center: { anchor: "__container__", align: VerticalAlign.Center }, // 垂直居中
            middle: { anchor: "__container__", align: HorizontalAlign.End } // 右對齊
          })
          .gesture(PanGesture({
            // 右側拖動手勢
            fingers: 1, // 單指拖動
            direction: PanDirection.Horizontal, // 水平拖動
            distance: 1 // 最小拖動距離
          }).onActionUpdate((event: GestureEvent) => { // 拖動更新時的處理
            this.leftOffsetX = this.currentPositionX + event.offsetX / 2; // 更新左側偏移
            this.containerHeight = this.originalContainerHeight + event.offsetX; // 更新容器高度
          }).onActionEnd(() => { // 拖動結束時的處理
            this.currentPositionX = this.leftOffsetX; // 更新位置
            this.originalContainerHeight = this.containerHeight; // 更新原始高度
          }));
        }
        .width(this.containerHeight) // 設定寬度
        .height("100%") // 設定高度
        .translate({ x: this.leftOffsetX }) // 使用左側偏移
        .gesture(PanGesture({
          // 左側拖動手勢
          fingers: 1, // 單指拖動
          direction: PanDirection.Horizontal, // 水平拖動
          distance: 1 // 最小拖動距離
        }).onActionUpdate((event: GestureEvent) => { // 拖動更新時的處理
          if (event) {
            this.leftOffsetX = this.currentPositionX + event.offsetX; // 更新左側偏移
          }
        }).onActionEnd(() => { // 拖動結束時的處理
          this.currentPositionX = this.leftOffsetX; // 更新位置
        }));
      }
    }.height('100%').width('100%') // 設定高度和寬度
    .padding({ left: 30, right: 10 }) // 設定內邊距
    .backgroundColor("#181b22"); // 設定背景顏色
  }
}

　　

相關文章