TabRow & Halaman yang Dapat Diusap
Tambahkan tab horizontal dengan penghalaman.
TabRow & Halaman yang Dapat Diusap adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 TabRow
Sementara NavigationBar berada di bagian bawah, TabRow menempatkan deretan tab di bagian atas, cocok untuk berpindah di antara tampilan terkait dalam satu layar. 🗂️
TabRow vs NavigationBar
Gunakan TabRow untuk bagian di dalam layar seperti Postingan dan Tentang; gunakan NavigationBar untuk tujuan utama aplikasi. Fungsinya berbeda, begitu pula bilahnya.
Tambahkan Tab di Dalamnya
TabRow menerima selectedTabIndex dan lambda konten yang menghasilkan satu Tab untuk setiap bagian.
TabRow(selectedTabIndex = index) {
Tab(/* ... */)
Tab(/* ... */)
}Setiap Tab Dapat Dipilih
Setiap Tab memiliki flag selected dan onClick sendiri, serta teks atau ikon, seperti NavigationBarItem.
Tab(
selected = index == 0,
onClick = { index = 0 },
text = { Text("Posts") }
)Buat Halaman yang Dapat Digulir
Untuk menggeser di antara halaman, pasangkan tab dengan HorizontalPager, yang menampilkan satu halaman selebar layar pada satu waktu.
val pagerState = rememberPagerState { 3 }
HorizontalPager(state = pagerState) { page -> }Satu State, Dua Tampilan
Triknya adalah berbagi pagerState. TabRow membaca halaman saat ini, dan pager mengubah halaman tersebut saat pengguna menggeser.
TabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }Ketukan Harus Menggulir Pager
Saat tab diketuk, panggil animateScrollToPage agar pager bergeser dengan mulus ke halaman tersebut.
scope.launch {
pagerState.animateScrollToPage(i)
}Jalankan dalam Scope
Karena animateScrollToPage adalah panggilan suspend, jalankan dari rememberCoroutineScope di dalam onClick Anda.
val scope = rememberCoroutineScope()Tab yang Dapat Digulir
Memiliki banyak tab? Gunakan ScrollableTabRow agar tab menggulir secara horizontal, bukan berdesakan memenuhi lebar layar.
ScrollableTabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }Atur Gaya Indikator
Garis bawah yang bergerak berada di slot indicator. Anda dapat mengubah warnanya atau ukurannya agar sesuai dengan tema dan merek Anda.
indicator = { tabPositions -> /* custom underline */ }Pola Pager dan Tab
Menggabungkan TabRow dan HorizontalPager dengan satu state bersama adalah pola Compose standar untuk layar bertab yang dapat digeser.
Pemeriksaan Singkat
Anda telah membuat halaman bertab yang dapat digeser. Pemeriksaan terakhir!
Rangkuman
Anda telah menguasai TabRow dengan HorizontalPager: pagerState bersama menghubungkan keduanya, animateScrollToPage menangani ketukan, dan ScrollableTabRow menampung banyak tab. Kursus selesai! 🚀
Belajar Kotlin dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “TabRow & Halaman yang Dapat Diusap” gratis?
Ya — teks lengkap “TabRow & Halaman yang Dapat Diusap” 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 “TabRow & Halaman yang Dapat Diusap”?
Tambahkan tab horizontal dengan penghalaman. 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 4 dari 4.
Berapa lama pelajaran “TabRow & Halaman yang Dapat Diusap” 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
- NavigationBar dengan Banyak Tab
- Menyorot Rute Terpilih
- Mempertahankan State Tab saat Beralih
- TabRow & Halaman yang Dapat Diusap