Tema UI - ApsaraVideo VOD - Alibaba Cloud Documentation Center

AliPlayerWidget menyediakan spesifikasi desain UI terpadu, termasuk manajemen aset ikon dan token gaya. Sistem tema UI memungkinkan Anda mengganti skin pemutar secara cepat untuk kustomisasi merek.

Desain UI bawaan

AliPlayerWidget mencakup desain UI lengkap yang sudah terpasang dan siap digunakan:

AliPlayerWidget(controller)

Desain bawaan mencakup:

Aset ikon: Konstanta nama file ikon terpadu (PlayerIcons).
Spesifikasi gaya: Token gaya terpadu untuk warna, ukuran font, dimensi, dan jarak (PlayerStyles).

Skin kustom

Untuk mengganti seluruh kumpulan aset ikon, berikan parameter assetsPath.

Langkah 1: Buat direktori aset

Buat folder aset di direktori root aplikasi Anda:

your_app/
└── assets/
    └── player_icons/      # Nama direktori kustom
        ├── ic_back.svg
        ├── ic_settings.svg
        └── ...

Langkah 2: Daftarkan aset

Daftarkan direktori tersebut dalam file pubspec.yaml aplikasi Anda:

flutter:
  assets:
    - assets/player_icons/

Langkah 3: Berikan path-nya

Berikan path kustom saat menginisialisasi widget:

AliPlayerWidget(
  controller,
  assetsPath: 'assets/player_icons',
)

Spesifikasi aset ikon

Pemilihan format

Format	Kasus penggunaan	Deskripsi
SVG (Direkomendasikan)	Ikon vektor berwarna solid atau monokrom	Satu file mendukung semua resolusi, sehingga tidak perlu slicing aset multi-resolusi.
PNG	Ikon dengan gradien atau beberapa warna	Memerlukan varian resolusi 1x, 2x, dan 3x.

Konvensi penamaan

ic_<deskripsi>[_<status>].svg

Awalan: Awalan ic_ menunjukkan aset ikon.
Penamaan: Gunakan snake_case untuk menghindari masalah lintas platform.
Akhiran status: Gunakan akhiran seperti _on/_off, _done, dan _exit. Jangan gunakan angka untuk menunjukkan status.

Contoh:

Nama file	Deskripsi
`ic_back.svg`	Tombol Back
`ic_settings.svg`	Tombol Settings
`ic_play.svg`	Tombol Play
`ic_pause.svg`	Tombol Pause
`ic_download.svg`	Tombol Download (belum diunduh)
`ic_download_done.svg`	Download selesai

Spesifikasi multi-resolusi PNG

Jika Anda menggunakan format PNG, Anda harus menyediakan aset untuk tiga resolusi dengan struktur direktori berikut:

assets/player_icons/
├── ic_back.png          # 1x (garis dasar)
├── 2.0x/
│   └── ic_back.png      # 2x
└── 3.0x/
    └── ic_back.png      # 3x

Catatan

Letakkan file 1x di direktori root, bukan di subdirektori 1.0x/. Flutter secara otomatis mengenali direktori 2.0x/ dan 3.0x/ sebagai varian resolusi.

Kontrol UI lanjutan

Sistem slot menyediakan kontrol UI detail halus, memungkinkan Anda menyembunyikan tombol tertentu atau mengganti seluruh bilah kontrol.

Sistem saluran memungkinkan Anda:

Menyesuaikan modul UI apa pun, seperti bilah atas, bilah bawah, atau panel pengaturan.
Menyembunyikan elemen individual dalam suatu saluran.
Mengganti sepenuhnya komponen suatu saluran.

Untuk detailnya, lihat sistem saluran.

Referensi API

Parameter

Parameter	Tipe	Bawaan	Deskripsi
`assetsPath`	`String`	Path ke aset dalam paket	Path ke direktori aset ikon

Contoh penggunaan

import 'package:aliplayer_widget/theme/player_theme.dart';

// Ikon
SvgPicture.asset(
  PlayerAssetsScope.iconPath(context, PlayerIcons.back),
  width: PlayerStyles.iconSizeTopBar,
)

// Teks
Text(
  'Title',
  style: TextStyle(
    fontSize: PlayerStyles.fontSizeTitle,
    color: PlayerStyles.colorOnPrimary,
  ),
)

Catatan

File SVG hanya boleh berisi atribut viewBox. Jangan hardcode lebar dan tinggi, karena ukuran rendering dikendalikan oleh kode.
Saat membuat skin kustom, nama file ikon Anda harus sesuai dengan nama bawaan.
Setelah mendaftarkan direktori, Anda dapat menambahkan ikon baru tanpa mengubah file pubspec.yaml.