Giới thiệu

Ví dụ này trình bày cách sử dụng thành phần FolderStack trong ArkUI để triển khai trình phát nhạc trên thiết bị gập.

Hiệu ứng minh họa

Hướng dẫn sử dụng:

1. Trình phát nhạc đã tải sẵn bài hát, hỗ trợ phát, tạm dừng và phát lại
2. Trên thiết bị gập, hỗ trợ tự động điều chỉnh thành phần khi ở chế độ ngang và treo

Cách triển khai

1. Sử dụng kiến trúc MVVM, phân tách tầng hiển thị, tầng mô hình và tầng điều khiển. Tầng hiển thị giao tiếp với tầng mô hình thông qua tầng điều khiển, dữ liệu trạng thái tầng hiển thị được liên kết hai chiều với tầng điều khiển. Thay đổi từ tầng mô hình được thông báo cho tầng điều khiển qua callback và cuối cùng tác động lên tầng hiển thị.
2. Trên thiết bị gập, sử dụng thành phần FolderStack làm thành phần chứa, chứa tất cả các thành chức năng của trình phát. Khi ở trạng thái gập một nửa, các thành phần con cần di chuyển lên màn hình trên sẽ tạo hiệu ứng động tương ứng.

    // TODO: Kiến thức: FolderStack kế thừa từ Stack, thông qua trường upperItems nhận diện thành phần có id chỉ định, tự động né vùng nếp gập màn hình gập và di chuyển lên nửa màn hình trên
    FolderStack({ upperItems: [CommonConstants.FOLDER_STACK_UP_COMP_ID] }) {
        MusicPlayerInfoComp({ musicModel: this.musicModel, curFoldStatus: this.curFoldStatus })
            .id(CommonConstants.FOLDER_STACK_UP_COMP_ID)
        MusicPlayerCtrlComp({ musicModel: this.musicModel })
    }
    

3. Thêm hiệu ứng thuộc tính vào các thành phần con cần di chuyển lên màn hình trên. Khi thuộc tính thành phần thay đổi, đạt được hiệu ứng hiển thị động.

    Image(this.musicModel.cover)
      .width(this.curImgSize)
      .height(this.curImgSize)
      .margin(20)
      .animation(this.attrAniCfg)
      .interpolation(ImageInterpolation.High)
      .draggable(false)
    

4. Trên thiết bị gập, dựa vào sự kiện trạng thái màn hình display, theo dõi sự thay đổi trạng thái gập màn hình, cập nhật thuộc tính UI thông qua phân tích trạng thái gập.

    display.on('foldStatusChange', (curFoldStatus: display.FoldStatus) => {
        this.curFoldStatus = curFoldStatus;
        this.windowModel.updateMainWinPreferredOrientation(curFoldStatus);
    })
    

Cấu trúc dự án & Loại mô-đun

    foldablescreencases                  // loại har
    |---common
    |   |---constants
    |   |    |---CommonConstants.ets     // Hằng số chung
    |   |    |---SysCapConstants.ets     // Hằng số năng lực hệ thống
    |---components
    |   |---MusicPlayerCtrlComp.ets      // Thành phần tùy chỉnh - Thanh điều khiển trình phát nhạc
    |   |---MusicPlayerInfoComp.ets      // Thành phần tùy chỉnh - Thông tin bài hát trình phát nhạc
    |---model
    |   |---AVPlayerModel.ets            // Tầng mô hình - Quản lý phát âm thanh 
    |   |---MusicModel.ets               // Tầng mô hình - Dữ liệu bài hát nhạc 
    |   |---SysCapModel.ets              // Tầng mô hình - Quản lý năng lực hệ thống 
    |   |---WindowModel.ets              // Tầng mô hình - Quản lý cửa sổ 
    |---pages
    |   |---MusicPlayerPage.ets          // Tầng hiển thị - Trình phát nhạc 
    |---viewmodel
    |   |---MusicPlayerViewModel.ets     // Tầng điều khiển - Bộ điều khiển trình phát nhạc
    

Phụ thuộc mô-đun

Phụ thuộc vào mô-đun utils cục bộ