TextField i OutlinedTextField
Odczytuj tekst wpisywany przez użytkownika
TextField i OutlinedTextField to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 1 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.
Dlaczego pola tekstowe są ważne
Niemal każda aplikacja prosi użytkownika o wpisanie czegoś. W Compose element TextField umożliwia odczytywanie tych danych. ✏️
Element Composable TextField
TextField wyświetla edytowalne pole. Potrzebuje bieżącej wartości oraz wywołania zwrotnego uruchamianego za każdym razem, gdy tekst się zmienia.
TextField(
value = name,
onValueChange = { name = it }
)Stan steruje wartością
Pole nie przechowuje tekstu samodzielnie. Przechowujesz go w stanie i przekazujesz z powrotem, dzięki czemu interfejs zawsze wyświetla najnowszą wartość.
var name by remember { mutableStateOf("") }onValueChange zamyka pętlę
Każde naciśnięcie klawisza wywołuje onValueChange z nowym tekstem. Zapisujesz go w stanie, Compose przerysowuje interfejs, a pole odzwierciedla wpisany tekst.
onValueChange = { newText -> name = newText }Poznaj OutlinedTextField
OutlinedTextField działa dokładnie tak samo, ale zamiast wypełnionego tła rysuje wokół pola prostą ramkę.
OutlinedTextField(
value = name,
onValueChange = { name = it }
)Wypełnione czy z obramowaniem
Wypełniony element TextField ma zacieniowane pole i podkreślenie. Wersja z obramowaniem jest lżejsza i bardziej przestronna. Oba zachowują się identycznie, więc wybierz wersję zgodną ze stylem.
Dodaj etykietę
Etykieta informuje użytkownika, do czego służy pole. Unosi się nad tekstem, gdy pole jest aktywne lub zawiera tekst.
OutlinedTextField(
value = name,
onValueChange = { name = it },
label = { Text("Name") }
)Domyślnie jeden wiersz
Ustaw singleLine na true, aby tekst pozostał w jednym wierszu. Klawiatura wyświetli wtedy przycisk Done zamiast klawisza nowego wiersza.
TextField(
value = name,
onValueChange = { name = it },
singleLine = true
)Odczytuj wartość w dowolnym miejscu
Ponieważ tekst znajduje się w stanie, każdy inny element Composable może go odczytać. Przywitaj użytkownika, gdy tylko skończy wpisywać swoje imię. 👋
Text("Hello, " + name)To pole sterowane
Pola Compose są sterowane: wyświetlana wartość jest dokładnie tą, którą przekażesz jako value. Jeśli zapomnisz zaktualizować stan, pole będzie wyglądać na zablokowane.
Zacznij prosto, rozbuduj później
Wartość i onValueChange to wszystko, czego naprawdę potrzebujesz. Etykiety, ikony i walidacja to dodatki, które możesz dodać później.
Szybkie sprawdzenie
Który parametr otrzymuje nowy tekst użytkownika przy każdym naciśnięciu klawisza?
Podsumowanie
Poznałeś elementy TextField i OutlinedTextField: powiąż wartość ze stanem, aktualizuj ją w onValueChange i dodaj etykietę. Tak właśnie obsługuje się tekst w Compose. 🎉
Ucz się Kotlin dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „TextField i OutlinedTextField” jest bezpłatna?
Tak — pełny tekst „TextField i OutlinedTextField” 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 „TextField i OutlinedTextField”?
Odczytuj tekst wpisywany przez użytkownika Ć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 1 z 4.
Ile czasu zajmuje lekcja „TextField i OutlinedTextField”?
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
- TextField i OutlinedTextField
- Etykiety, symbole zastępcze i ikony wiodące
- Typy klawiatury i akcje IME
- Walidacja w miejscu i stany błędów