Trong phát triển ứng dụng HarmonyOS Next, ArkTS cung cấp khả năng kiểm soát hiển thị mạnh mẽ thông qua cơ chế điều kiện (if/else). Dưới đây là hướng dẫn chi tiết về cách áp dụng tính năng này.

Quy tắc sử dụng

1. Hỗ trợ câu lệnh Có thể sử dụng if, else và else if để tạo logic điều kiện linh hoạt.

2. Loại biến Điều kiện sau if/else có thể dùng biến trạng thái (thay đổi giá trị sẽ cập nhật UI) hoặc biến thường (không cập nhật UI khi thay đổi).

3. Vị trí sử dụng Chỉ áp dụng được trong các container thành phần, cần tuân thủ quy định về thành phần con của container. Ví dụ: khi dùng điều kiện trong Grid, chỉ có thể đặt GridItem bên trong.

4. Mối quan hệ cha-con Câu lệnh điều kiện sẽ "trong suốt" trong mối quan hệ cha-con, cần tuân thủ quy tắc sử dụng thành phần con của cha.

5. Hàm xây dựng Mỗi nhánh trong điều kiện phải tạo ít nhất một thành phần, hàm trống sẽ gây lỗi cú pháp.

Cơ chế cập nhật

Khi giá trị biến trạng thái trong điều kiện thay đổi, quy trình cập nhật diễn ra như sau:

1. Đánh giá điều kiện, nếu không thay đổi nhánh thì dừng.
2. Nếu nhánh thay đổi, xóa toàn bộ thành phần con đã xây dựng trước đó.
3. Thực hiện hàm xây dựng nhánh mới, thêm thành phần vào container cha (nếu không có else sẽ không tạo nội dung). Lưu ý: biểu thức điều kiện không được thay đổi trạng thái ứng dụng.

Trường hợp sử dụng

1. Hiển thị điều kiện bằng if

@Entry
@Component
struct GiaoDienA {
  @State soLan: number = 0;
  build() {
    Column() {
      Text(`soLan=${this.soLan}`)
      if (this.soLan > 0) {
        Text(`soLan dương`)
         .fontColor(Color.Green)
      }
      Button('tăng soLan')
       .onClick(() => {
          this.soLan++;
        })
      Button('giảm soLan')
       .onClick(() => {
          this.soLan--;
        })
    }
  }
}

Nguyên lý: Khi trạng thái thay đổi, điều kiện sẽ đánh giá lại và xây dựng lại UI. Ví dụ: khi soLan từ 0 tăng lên 1, sẽ tạo mới Text và thêm vào; khi quay lại 0, Text sẽ bị xóa (không có else thì không xây dựng lại).

2. Câu lệnh if...else và trạng thái thành phần con

• Ví dụ không giữ trạng thái:

@Component
struct ThietBiDem {
  @State dem: number = 0;
  ten: string = 'chưa xác định';
  build() {
    Column({ space: 20 }) {
      Text(`${this.ten}`)
      Button(`dem ${this.dem} +1`)
       .onClick(() => {
          this.dem += 1;
        })
    }
   .margin(10)
   .padding(10)
   .border({ width: 1 })
  }
}

@Entry
@Component
struct TrangChu {
  @State chuyenDoi: boolean = true;
  build() {
    Column() {
      if (this.chuyenDoi) {
        ThietBiDem({ ten: 'ThietBiDem #duong' })
      } else {
        ThietBiDem({ ten: 'ThietBiDem #am' })
      }
      Button(`chuyển đổi ${this.chuyenDoi}`)
       .onClick(() => {
          this.chuyenDoi = !this.chuyenDoi;
        })
    }
   .width('100%')
   .justifyContent(FlexAlign.Center)
  }
}

Giải thích: Khi chuyenDoi thay đổi từ true sang false, thành phần ThietBiDem trước đó sẽ bị xóa và tạo mới với giá trị ban đầu là 0, không giữ trạng thái cũ.

• Ví dụ giữ trạng thái:

@Component
struct ThietBiDem {
  @Link dem: number;
  ten: string = 'chưa xác định';
  build() {
    Column({ space: 20 }) {
      Text(`${this.ten}`)
       .fontSize(20)
      Button(`dem ${this.dem} +1`)
       .onClick(() => {
          this.dem += 1;
        })
    }
   .margin(10)
   .padding(10)
   .border({ width: 1 })
  }
}

@Entry
@Component
struct TrangChu {
  @State chuyenDoi: boolean = true;
  @State dem: number = 0;
  build() {
    Column() {
      if (this.chuyenDoi) {
        ThietBiDem({ dem: $dem, ten: 'ThietBiDem #duong' })
      } else {
        ThietBiDem({ dem: $dem, ten: 'ThietBiDem #am' })
      }
      Button(`chuyển đổi ${this.chuyenDoi}`)
       .onClick(() => {
          this.chuyenDoi = !this.chuyenDoi;
        })
    }
   .width('100%')
   .justifyContent(FlexAlign.Center)
  }
}

Giải thích: Biến dem thuộc về thành phần cha, con dùng @Link để truy cập. Khi xóa ThietBiDem, biến sẽ không bị hủy, giữ giá trị khi chuyển đổi điều kiện.

3. If lồng nhau

@Entry
@Component
struct PhanTuA {
  @State chuyenDoi: boolean = false;
  @State chuyenDoiMau: boolean = false;
  build() {
    Column({ space: 20 }) {
      Text('Trước')
       .fontSize(15)
      if (this.chuyenDoi) {
        Text('Trên đúng, dương 1 trên')
         .backgroundColor('#aaffaa').fontSize(20)
        // if lồng nhau
        if (this.chuyenDoiMau) {
          Text('Trên đúng, Lồng đúng, dương MÀU Lồng ')
           .backgroundColor('#00aaaa').fontSize(15)
        } else {
          Text('Trên đúng, Lồng sai, Âm MÀU Lồng ')
           .backgroundColor('#aaaaff').fontSize(15)
        }
      } else {
        Text('Trên sai, âm cấp độ cao').fontSize(20)
         .backgroundColor('#ffaaaa')
        if (this.chuyenDoiMau) {
          Text('dương MÀU Lồng ')
           .backgroundColor('#00aaaa').fontSize(15)
        } else {
          Text('Âm MÀU Lồng ')
           .backgroundColor('#aaaaff').fontSize(15)
        }
      }
      Text('Sau')
       .fontSize(15)
      Button('Chuyển đổi Ngoài')
       .onClick(() => {
          this.chuyenDoi = !this.chuyenDoi;
        })
      Button('Chuyển đổi Trong')
       .onClick(() => {
          this.chuyenDoiMau = !this.chuyenDoiMau;
        })
    }
   .width('100%')
   .justifyContent(FlexAlign.Center)
  }
}

Nguyên lý: Câu lệnh điều kiện lồng nhau không ảnh hưởng đến quy tắc của thành phần cha, cho phép xây dựng logic điều kiện phức tạp theo nhu cầu, điều khiển hiển thị UI qua các trạng thái.