Alt Çubuklar ve Kayan Eylem Düğmeleri
Gezinmeyi ve birincil eylemleri sabitleyin.
Alt Çubuklar ve Kayan Eylem Düğmeleri, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Jetpack Compose Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Anchoring the Bottom
The thumb-friendly zone of a phone is the bottom. Scaffold's bottomBar and floatingActionButton slots put your key controls right where fingers reach. 👍
The bottomBar Slot
Whatever you place in the bottomBar slot is pinned to the bottom, and Scaffold shrinks the content area so nothing slides behind it.
Scaffold(
bottomBar = { BottomAppBar { Text("Tools") } }
) { p -> }BottomAppBar
BottomAppBar is a Material container for actions tied to the current screen, like edit or share buttons. It is a RowScope, so children flow left to right.
Meet the FAB
A FloatingActionButton is the round, raised button for the single most important action on a screen, like Add or Compose. ➕
FloatingActionButton(onClick = { }) {
Icon(Icons.Default.Add, "Add")
}The FAB Slot
Put your FAB in Scaffold's floatingActionButton slot, not in your content. Scaffold then floats it correctly above the bottom edge.
Scaffold(
floatingActionButton = { FloatingActionButton(onClick = {}) {} }
) { p -> }One FAB Per Screen
A FAB signals the primary action, so use just one per screen. Two competing FABs leave users unsure which one really matters.
FAB Position
Control where the FAB sits with floatingActionButtonPosition. The default is the bottom-right corner, but Center pairs nicely with a bottom bar.
floatingActionButtonPosition = FabPosition.CenterFAB Sizes
Beyond the standard FAB, Material 3 adds SmallFloatingActionButton and LargeFloatingActionButton so you can match the button to the screen's weight.
The ExtendedFAB
An ExtendedFloatingActionButton shows an icon plus a text label. It works well when the action's name is not obvious from an icon alone.
ExtendedFloatingActionButton(
onClick = { },
icon = { Icon(Icons.Default.Add, "Add") },
text = { Text("New") }
)Bars and FAB Together
Scaffold understands when a bottomBar and a FAB coexist, lifting the FAB so it never overlaps the bar. You just fill both slots.
Describe the FAB
Like any icon button, give the FAB's Icon a contentDescription. A bare plus sign means nothing to a screen reader without it.
Quick Check
How many FloatingActionButtons should a single screen normally show?
Recap
Use the bottomBar slot for screen actions and the floatingActionButton slot for one primary action. Scaffold spaces them so they never collide. ✨
Sıkça Sorulan Sorular
“Alt Çubuklar ve Kayan Eylem Düğmeleri” dersi ücretsiz mi?
Evet — “Alt Çubuklar ve Kayan Eylem Düğmeleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Jetpack Compose Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.
“Alt Çubuklar ve Kayan Eylem Düğmeleri” dersinde ne öğreneceğim?
Gezinmeyi ve birincil eylemleri sabitleyin. Jetpack Compose Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Jetpack Compose Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Jetpack Compose Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Alt Çubuklar ve Kayan Eylem Düğmeleri” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Jetpack Compose Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Jetpack Compose Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Scaffold: Ekran İskeleti
- TopAppBar ve Eylem Simgeleri
- Alt Çubuklar ve Kayan Eylem Düğmeleri
- Snackbars ve SnackbarHostState