Scaffold: Kerangka Layar
Hubungkan slot layout app standar.
Scaffold: Kerangka Layar adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Kenali Kerangka Layar
Sebagian besar layar aplikasi memiliki kerangka yang sama: bilah di bagian atas, konten di tengah, dan mungkin tombol melayang di bawah. Kerangka layar menyediakan semuanya dalam satu komponen komposabel. 🏗️
Mengapa Tidak Menggunakan Column Saja?
Anda dapat membuat bilah sendiri dengan Column, tetapi setiap kali Anda harus menangani ulang inset, jarak, dan tumpang tindih. Kerangka layar merangkai bagian-bagian standar tersebut untuk Anda.
Konsep Slot
Kerangka layar bekerja dengan slot: tempat bernama untuk menempatkan komponen komposabel. Anda mengisi slot yang diperlukan dan membiarkan sisanya kosong.
Slot content
Slot yang hampir selalu Anda gunakan adalah content. Slot ini merupakan isi utama layar, dan kerangka layar memberikan padding yang tepat untuk digunakan.
Scaffold { innerPadding ->
Text("Hello", Modifier.padding(innerPadding))
}Gunakan innerPadding
innerPadding tersebut mencegah konten Anda tertutup oleh bilah. Selalu terapkan nilai ini pada konten tingkat teratas agar teks tidak terselip di bawah bilah aplikasi.
Slot topBar
Tempatkan bilah di slot topBar, dan kerangka layar akan memasangnya di bagian atas, lalu mengecilkan area konten agar tidak terjadi tumpang tindih.
Scaffold(
topBar = { TopAppBar(title = { Text("Home") }) }
) { padding -> }Slot Lainnya Tersedia
Kerangka layar juga menyediakan slot bottomBar, floatingActionButton, dan snackbarHost. Anda akan mempelajari masing-masing slot dalam kursus ini.
Biarkan Slot Tetap Kosong
Semua slot bersifat opsional. Kerangka layar yang hanya berisi konten sepenuhnya valid, sehingga Anda hanya menambahkan bilah saat layar memang memerlukannya.
Satu Kerangka Layar per Layar
Aturan umumnya adalah satu kerangka layar untuk setiap layar. Kerangka ini membingkai seluruh layar, sementara komponen komposabel yang lebih kecil mengisi slot kontennya.
Kerangka Layar adalah Material 3
Impor kerangka layar dari androidx.compose.material3 agar warna dan jaraknya sesuai dengan tema Material You lainnya.
import androidx.compose.material3.ScaffoldcontainerColor
Atur containerColor untuk mewarnai latar belakang layar di belakang setiap slot. Jika dilewati, kerangka layar akan menggunakan warna permukaan tema Anda secara bawaan.
Pemeriksaan Singkat
Apa tindakan paling aman terhadap nilai yang diteruskan kerangka layar ke lambda kontennya?
Ringkasan
Kerangka layar adalah kerangka layar Anda: isi slot bernama seperti content dan topBar, gunakan innerPadding, dan pakai satu kerangka untuk setiap layar. Berikutnya Anda akan menata bilah atas. 👍
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Scaffold: Kerangka Layar” gratis?
Ya — teks lengkap “Scaffold: Kerangka Layar” 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 “Scaffold: Kerangka Layar”?
Hubungkan slot layout app standar. 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 1 dari 4.
Berapa lama pelajaran “Scaffold: Kerangka Layar” 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
- Scaffold: Kerangka Layar
- TopAppBar & Ikon Tindakan
- Bilah Bawah & Floating Action Button
- Snackbar & SnackbarHostState