📘 Giới Thiệu

Bạn có biết rằng việc hình dung tiến trình một cách rõ ràng và hiệu quả trên các màn hình nhỏ như smartwatch hoặc bảng điều khiển là rất quan trọng không? HarmonyOS đã cung cấp một giải pháp tuyệt vời: thành phần Gauge.

Dù bạn đang phát triển một ứng dụng thể dục để hiển thị số bước, đồng hồ pin, hay theo dõi mục tiêu, Gauge cho phép bạn trình bày các giá trị phần trăm theo định dạng vòng cung thanh lịch. Nó cũng hỗ trợ tùy chỉnh về màu sắc, hướng, kích thước và nội dung ở giữa.

Trong bài viết này, bạn sẽ tìm hiểu:

Cách Gauge hoạt động trong HarmonyOS Next
Cách cấu hình và tùy chỉnh nó với ArkTS
Ví dụ sử dụng thực tế
Mẹo để đảm bảo trải nghiệm người dùng tốt nhất

🧩 Gauge Là Gì?

Thành phần Gauge là một phần của ArkUI, được thiết kế để hình dung các giá trị bằng cách sử dụng một vòng cung. Nó rất lý tưởng cho các giao diện người dùng trên thiết bị đeo hoặc bảng điều khiển, nơi không gian hạn chế nhưng độ rõ ràng trực quan là rất quan trọng.

Khả Năng Chính:

Đại diện hình ảnh cho các giá trị dựa trên phần trăm
Góc bắt đầu và kết thúc tùy chỉnh
Vòng cung nền và vòng cung trước
Hỗ trợ màu sắc gradient
Tùy chỉnh bóng cho chiều sâu
Nội dung tùy chỉnh bên trong gauge (văn bản, biểu tượng, v.v.)

⚙️ Các Thuộc Tính và Tùy Chọn Chính

📍 Các Thuộc Tính Chính Của Gauge

value: Giá trị hiện tại của gauge (0-100).
min: Giá trị tối thiểu.
max: Giá trị tối đa.

⚙️ Các Trường GaugeOptions

startAngle: Góc bắt đầu của vòng cung.
endAngle: Góc kết thúc của vòng cung.
colors: Màu sắc của vòng cung.
strokeWidth: Độ dày của vòng cung.
padding: Khoảng cách giữa gauge và các cạnh.

🧪 Ví Dụ Sử Dụng

Dưới đây là một ví dụ đơn giản sử dụng Gauge để hiển thị giá trị 90%, được căn giữa với văn bản lớn và vòng cung gradient:

typescript Copy

@Entry
@Component
struct Index {
  build() {
    Column() {
      Gauge({ value: 90, min: 1, max: 100 }) {
        Column() {
          Text('90')
            .fontSize(60)
            .fontColor(Color.White)
            .fontWeight(FontWeight.Medium)
            .textAlign(TextAlign.Center)
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Center)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
        }
        .width('100%')
        .height('100%')
      }
      .startAngle(225)
      .endAngle(135)
      .colors(new LinearGradient([
        { color: "#e84026", offset: 0 },
        { color: "#f7ce00", offset: 0.6 },
        { color: "#64bb5c", offset: 1 }
      ]))
      .width('96%')
      .height('96%')
      .strokeWidth(18)
      .padding(10)
    }
    .width('100%')
    .height('100%')
  }
}

🧠 Mẹo và Thủ Thuật

1. Sử Dụng góc một cách khôn ngoan
Đối với thiết kế bán vòng tròn, hãy sử dụng startAngle: 225 và endAngle: 135.

2. Giữ nội dung trung tâm tối giản
Hãy giữ lại những con số ngắn hoặc biểu tượng để đảm bảo rõ ràng, đặc biệt trên các màn hình nhỏ.

3. Sử dụng màu gradient để cải thiện UX
Vòng cung gradient thu hút sự chú ý và truyền tải chuyển động hoặc hoàn thành một cách trực quan hơn.

4. Thêm bóng cho chiều sâu trực quan
Sử dụng .trackShadow() để tăng cường sự xuất hiện 3D.

5. Giữ trong phạm vi hợp lệ
value cần nằm trong khoảng từ 0 đến 100. Gauge được thiết kế cho dữ liệu dựa trên phần trăm.

6. Đừng quên hiệu suất
Tránh lạm dụng các hiệu ứng như gradient trên các thiết bị cấu hình thấp.

7. Điều chỉnh độ dày vòng cung dựa trên ngữ cảnh
Vòng cung mỏng mang lại cảm giác nhẹ nhàng, vòng cung dày tạo cảm giác mạnh mẽ. Cân bằng trọng lượng trực quan với nội dung.

📦 Ý Tưởng Sử Dụng

Thành phần Gauge phù hợp với nhiều kịch bản ứng dụng:

Theo Dõi Thể Dục → Hiển thị tiến trình mục tiêu số bước hoặc calo của người dùng
Ứng Dụng Học Tập → Hiển thị phần trăm hoàn thành khóa học hoặc bài học
Giám Sát Pin → Hiển thị mức pin hiện tại
Theo Dõi Mục Tiêu → Hình dung tiến trình hoàn thành nhiệm vụ
Theo Dõi Cung Cấp Nước → Theo dõi lượng nước hàng ngày
Giám Sát Hệ Thống → Hiển thị tải CPU hoặc bộ nhớ
Ứng Dụng Xe Thông Minh → Hình dung áp suất lốp hoặc trạng thái nhiên liệu

✅ Kết Luận

Gauge là một trong những công cụ UI hiệu quả nhất để hình dung tiến trình trong các ứng dụng HarmonyOS. Nó kết hợp tính linh hoạt, độ rõ ràng và thiết kế hiện đại — làm cho nó hoàn hảo cho các giao diện hình tròn trên smartwatch và bảng điều khiển.

Với ArkTS và Gauge, bạn có thể cung cấp phản hồi người dùng thanh lịch vừa chức năng vừa đẹp mắt.

👉 Trong bài viết tiếp theo, chúng ta sẽ kết hợp Gauge và ArcButton để xây dựng một Máy Tính BMI cho HarmonyOS — một ví dụ tuyệt vời về cách những thành phần này hoạt động cùng nhau trong các ứng dụng thực tế.

Hãy thử thêm Gauge vào dự án tiếp theo của bạn và để người dùng thấy tiến trình của họ — một cách hình ảnh.

📚 Tài Nguyên Tham Khảo

Gauge

Sử Dụng Gauge Để Xây Dựng Đồng Hồ Hiển Thị Trong HarmonyOS