Przyciski tekstowe, obrysowane i ikonowe
Wybierz właściwy wariant przycisku do danego zadania
Przyciski tekstowe, obrysowane i ikonowe to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Jetpack Compose Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.
Przyciski mają swoje charaktery
Nie każde działanie zasługuje na wyrazisty, wypełniony przycisk. Compose oferuje kilka wariantów przycisków, z których każdy sygnalizuje inny poziom wyróżnienia. 🎨
Wypełniony przycisk
Standardowy Button jest wypełniony i mocno wyróżniony. Przyciąga wzrok, dlatego należy używać go dla jednego głównego działania na ekranie.
Button(onClick = { pay() }) {
Text("Pay now")
}OutlinedButton do działań drugorzędnych
OutlinedButton ma tylko obramowanie i nie ma wypełnienia. Jest wyraźną, ale drugorzędną opcją obok wypełnionego przycisku.
OutlinedButton(onClick = { cancel() }) {
Text("Cancel")
}TextButton do słabego wyróżnienia
TextButton wyświetla tylko etykietę, bez obramowania i wypełnienia. Doskonale nadaje się do dyskretnych działań, takich jak Learn more, oraz opcji w oknach dialogowych.
TextButton(onClick = { dismiss() }) {
Text("Not now")
}Wyróżnienie tworzy hierarchię
Można myśleć o tym jak o drabinie wyróżnienia: wypełnienie jest najbardziej wyraziste, obramowanie ma średnią siłę, a tekst jest najdelikatniejszy. Wariant należy dopasować do znaczenia działania.
Ikony w przyciskach
Każdy przycisk może zawierać Icon oraz etykietę w swoim wierszu content. Należy dodać niewielki odstęp, aby ikona i tekst się nie stykały.
Button(onClick = { add() }) {
Icon(Icons.Default.Add, null)
Spacer(Modifier.width(8.dp))
Text("Add")
}IconButton
IconButton to kompaktowy obszar dotykania bez etykiety, zawierający tylko jedną ikonę. Doskonale nadaje się do pasków narzędzi i działań na pasku aplikacji.
IconButton(onClick = { share() }) {
Icon(Icons.Default.Share, "Share")
}Zawsze opisuj ikonę
Przycisk zawierający tylko ikonę powinien otrzymać contentDescription, aby czytniki ekranu mogły ją odczytać. Wartość null ukrywa ikonę przed technologiami ułatwień dostępu.
IconButton(onClick = { favorite() }) {
Icon(Icons.Default.Favorite, "Favorite")
}FilledIconButton do mocnego wyróżnienia
Potrzebny jest wyróżniający się przycisk z ikoną? FilledIconButton dodaje jednolite tło, zwiększając jego wyróżnienie względem zwykłej wersji.
FilledIconButton(onClick = { record() }) {
Icon(Icons.Default.Mic, "Record")
}Wybierz właściwy wariant
Dobry wybór prowadzi użytkowników: wariant wypełniony służy do Confirm, obramowany do alternatywy, tekstowy do zamykania, a IconButton do ograniczonej przestrzeni.
Ten sam onClick, inny wygląd
Każdy wariant ma ten sam kontrakt onClick. Zmieniasz tylko siłę wizualnego wyróżnienia, nigdy sposób podłączania działania.
Szybkie sprawdzenie
Potrzebne jest dyskretne działanie o słabym wyróżnieniu, zawierające tylko etykietę, bez obramowania i wypełnienia.
Podsumowanie: właściwe narzędzie, właściwe dotknięcie
Masz teraz cały zestaw narzędzi: wypełniony Button, OutlinedButton, TextButton i IconButton. Dopasuj wyróżnienie do działania i opisuj ikony. ✨
Często zadawane pytania
Czy lekcja „Przyciski tekstowe, obrysowane i ikonowe” jest bezpłatna?
Tak — pełny tekst „Przyciski tekstowe, obrysowane i ikonowe” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Jetpack Compose Academy, przejdź na CoddyKit PRO. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Przyciski tekstowe, obrysowane i ikonowe”?
Wybierz właściwy wariant przycisku do danego zadania Ćwiczysz Jetpack Compose Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Jetpack Compose Academy?
Nie wymagamy żadnego doświadczenia. Jetpack Compose Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Przyciski tekstowe, obrysowane i ikonowe”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Jetpack Compose Academy?
Tak. Każda lekcja Jetpack Compose Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Button i onClick
- Przyciski tekstowe, obrysowane i ikonowe
- Stany aktywny, nieaktywny i wczytywania
- clickable w dowolnym Composable