Pratinjau Langsung dengan @Preview
Kembangkan UI tanpa membangun ulang seluruh app.
Pratinjau Langsung dengan @Preview adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.
Lihat UI Tanpa Menjalankannya
Membangun ulang seluruh aplikasi hanya untuk memeriksa satu tombol itu lambat. Anotasi @Preview merender Composable Anda langsung di dalam Android Studio. ⚡
Tambahkan Anotasi
Letakkan @Preview di atas Composable yang tidak memerlukan parameter. Android Studio kemudian menampilkannya di panel desain di samping kode Anda.
@Preview
@Composable
fun GreetingPreview() {
Greeting("Compose")
}Pratinjau Tidak Memerlukan Argumen
Composable yang dipratinjau harus dapat dipanggil tanpa argumen. Karena itu, biasanya Anda membuat pembungkus kecil yang menyediakan data contoh.
Bungkus Composable Asli Anda
Biarkan Composable asli Anda memiliki parameter, lalu tulis pembungkus pratinjau kecil yang memanggilnya dengan nilai tetap untuk panel desain.
@Preview
@Composable
fun CardPreview() {
ProfileCard(name = "Ada")
}Beri Nama dengan Judul
Tambahkan name untuk memberi label pada pratinjau di panel. Ini membantu ketika satu file menampilkan beberapa pratinjau sekaligus.
@Preview(name = "Dark card")
@Composable
fun DarkPreview() { /* ... */ }Tampilkan Dekorasi Sistem
Atur showSystemUi ke true untuk merender bilah status dan bingkai perangkat secara lengkap, sehingga Anda melihat Composable dalam tampilan ponsel yang realistis.
@Preview(showSystemUi = true)
@Composable
fun ScreenPreview() { /* ... */ }Hanya Latar Belakang
Jika Anda hanya menginginkan permukaan di belakang UI, gunakan showBackground. Ini menambahkan latar belakang sederhana tanpa seluruh tampilan perangkat.
@Preview(showBackground = true)
@Composable
fun ItemPreview() { /* ... */ }Banyak Pratinjau Sekaligus
Susun beberapa anotasi @Preview pada satu fungsi untuk membandingkan keadaan secara berdampingan, seperti mode terang dan gelap atau font kecil dan besar.
Pratinjau dalam Ukuran Berbeda
Berikan widthDp dan heightDp untuk menguji tampilan Composable Anda pada layar sempit atau lebar tanpa menjalankan emulator.
@Preview(widthDp = 320, heightDp = 200)
@Composable
fun NarrowPreview() { /* ... */ }Pratinjau Interaktif
Klik ikon mode interaktif di panel pratinjau untuk mengetuk dan menggulir UI tanpa menjalankan aplikasi sepenuhnya. Cocok untuk pemeriksaan cepat.
Pratinjau Tidak Masuk ke Aplikasi
Kode di bawah @Preview hanya digunakan oleh alat bantu. Kode tersebut tidak pernah disertakan dalam aplikasi yang dirilis, jadi tambahkan pratinjau sebanyak yang Anda perlukan.
Pemeriksaan Cepat
Pemeriksaan singkat tentang cara kerja pratinjau.
Rangkuman
Sekarang Anda dapat melakukan iterasi dengan cepat: tambahkan @Preview, sediakan data contoh dalam pembungkus, lalu sesuaikan nama, ukuran, dan latar belakang untuk melihat UI secara langsung. 🎨
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pratinjau Langsung dengan @Preview” gratis?
Ya — teks lengkap “Pratinjau Langsung dengan @Preview” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pratinjau Langsung dengan @Preview”?
Kembangkan UI tanpa membangun ulang seluruh app. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?
Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Pratinjau Langsung dengan @Preview” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?
Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Menulis Fungsi @Composable
- Pratinjau Langsung dengan @Preview
- Memanggil Composable dari Composable
- setContent: Tempat UI Anda Dimulai