Android Academy · Lekcja

TextField i dane wprowadzane przez użytkownika

Pobieraj tekst od użytkownika w Compose

Lekcja 1 z 413 kroki

TextField i dane wprowadzane przez użytkownika to bezpłatna lekcja Android 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 Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 4 lekcji w sumie.

Wprowadzanie danych przez użytkownika

Niemal każda rzeczywista aplikacja musi poprosić użytkownika o jakąś informację: imię i nazwisko, adres e-mail albo wyszukiwane hasło. W Jetpack Compose podstawowym komponentem do wprowadzania tekstu jest TextField.

W tej lekcji dowie się Pan/Pani, jak wyświetlić pole tekstowe, odczytywać wpisywany tekst i utrzymywać pole w zgodności ze stanem aplikacji. To podstawa każdego formularza, który kiedykolwiek zostanie utworzony.

Pierwszy TextField

Element TextField potrzebuje dwóch rzeczy: właściwości value (bieżącego tekstu do wyświetlenia) oraz wywołania zwrotnego onValueChange (działania wykonywanego po wpisaniu tekstu przez użytkownika).

Compose jest deklaratywny, więc pole nie przechowuje własnego tekstu. To Pan/Pani przechowuje tekst w stanie i przekazuje go z powrotem do pola. Ten wzorzec nosi nazwę state hoisting.

@Composable
fun NameField() {
    var name by remember { mutableStateOf("") }

    TextField(
        value = name,
        onValueChange = { name = it }
    )
}

Jak działa pętla wartości

Najważniejsza zasada jest następująca: element TextField wyświetla dokładnie to, co przekaże się do value. Gdy użytkownik naciśnie klawisz, Compose wywołuje onValueChange z nowym tekstem.

Zapisz nowy tekst w stanie.
Zmiana stanu wywołuje rekompozycję.
Pole zostaje narysowane ponownie ze zaktualizowaną wartością value.

Jeśli stan nie zostanie zaktualizowany wewnątrz onValueChange, pole będzie wyglądać na zablokowane, ponieważ value nigdy się nie zmieni.

var name by remember { mutableStateOf("") }

TextField(
    value = name,
    onValueChange = { newText -> name = newText }
)

Dodawanie etykiety i tekstu zastępczego

Samodzielne pole tekstowe nie podpowiada użytkownikowi, co należy wpisać. Dodaj label (etykietę unoszącą się nad polem) oraz placeholder (podpowiedź wyświetlaną, gdy pole jest puste).

Te drobne elementy znacznie ułatwiają zrozumienie formularzy.

var email by remember { mutableStateOf("") }

TextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    placeholder = { Text("you@example.com") }
)

OutlinedTextField

Material Design oferuje dwa główne style. Element TextField ma wypełnione tło, natomiast OutlinedTextField rysuje obramowanie wokół pola. Oba komponenty mają ten sam interfejs API, więc przełączenie między nimi jest bardzo proste.

Pola z obramowaniem są popularne w formularzach, ponieważ dobrze prezentują się ustawione pionowo jedno pod drugim.

var username by remember { mutableStateOf("") }

OutlinedTextField(
    value = username,
    onValueChange = { username = it },
    label = { Text("Username") },
    singleLine = true
)

Ikony początkowe i końcowe

Pole można ozdobić ikonami. leadingIcon pojawia się na początku (świetnie nadaje się do ikony wyszukiwania lub wiadomości e-mail), a trailingIcon na końcu (często jest to przycisk czyszczenia).

Ikony pozwalają od razu zrozumieć przeznaczenie pola.

var query by remember { mutableStateOf("") }

OutlinedTextField(
    value = query,
    onValueChange = { query = it },
    label = { Text("Search") },
    leadingIcon = {
        Icon(Icons.Default.Search, contentDescription = null)
    }
)

Przycisk czyszczenia

Popularnym wzorcem UX jest mały znak „x” czyszczący pole. Wyświetlaj go tylko wtedy, gdy pole zawiera tekst, korzystając z gniazda trailingIcon oraz elementu IconButton.

Zauważ, że wyczyszczenie pola polega jedynie na ponownym ustawieniu stanu na pusty ciąg znaków.

var text by remember { mutableStateOf("") }

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Note") },
    trailingIcon = {
        if (text.isNotEmpty()) {
            IconButton(onClick = { text = "" }) {
                Icon(Icons.Default.Clear, contentDescription = "Clear")
            }
        }
    }
)

Jeden wiersz a wiele wierszy

Domyślnie element TextField może rozrastać się do wielu wierszy. W przypadku takich danych jak imię i nazwisko lub adres e-mail ustaw singleLine = true, aby użytkownik nie mógł wstawić znaku nowego wiersza.

W przypadku dłuższych notatek pozostaw tryb wielowierszowy i opcjonalnie ogranicz wysokość za pomocą maxLines.

var bio by remember { mutableStateOf("") }

OutlinedTextField(
    value = bio,
    onValueChange = { bio = it },
    label = { Text("Bio") },
    maxLines = 4
)

Reagowanie na dane wejściowe na bieżąco

Ponieważ to Pan/Pani zarządza stanem tekstu, można reagować na niego natychmiast. Klasycznym przykładem jest wyświetlanie pod polem bieżącej liczby znaków.

Każde naciśnięcie klawisza aktualizuje text, co wywołuje rekompozycję zarówno pola, jak i znajdującego się pod nim licznika.

var text by remember { mutableStateOf("") }

Column {
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Tweet") }
    )
    Text("${text.length} / 280")
}

Przekształcanie danych wejściowych

Czasami warto znormalizować tekst wpisywany przez użytkownika przed zapisaniem go. Wewnątrz onValueChange można najpierw przekształcić nową wartość.

W tym przykładzie nazwa użytkownika jest zamieniana na małe litery, a spacje są usuwane. Ponieważ to Pan/Pani kontroluje tę pętlę, pole zawsze wyświetla oczyszczoną wersję tekstu.

var handle by remember { mutableStateOf("") }

OutlinedTextField(
    value = handle,
    onValueChange = { input ->
        handle = input.lowercase().filterNot { it.isWhitespace() }
    },
    label = { Text("Handle") },
    singleLine = true
)

Czysty Kotlin: czyszczenie identyfikatora

Pokazana wcześniej logika przekształcania to zwykły kod Kotlin. Można ją testować niezależnie, bez Androida. Oto ta sama reguła czyszczenia działająca samodzielnie.

Umieszczenie takiej logiki w czystych funkcjach ułatwia testowanie jednostkowe.

fun cleanHandle(input: String): String =
    input.lowercase().filterNot { it.isWhitespace() }

fun main() {
    println(cleanHandle("  John Doe "))
    println(cleanHandle("ADA Lovelace"))
}

Szybkie sprawdzenie

Co się stanie, jeśli wywołanie zwrotne onValueChange elementu TextField nigdy nie zaktualizuje stanu przekazanego do value?

Odpowiedz w interaktywnej lekcji

Podsumowanie

Zna już Pan/Pani podstawy wprowadzania tekstu w Compose:

Elementy TextField i OutlinedTextField przyjmują właściwość value oraz wywołanie zwrotne onValueChange.
Tekst jest przechowywany w remember { mutableStateOf(...) } i aktualizowany przy każdej zmianie (state hoisting).
Właściwości label, placeholder, ikony początkowe i końcowe oraz singleLine wpływają na wygląd i działanie pola.
Ponieważ stan jest pod kontrolą aplikacji, można reagować na dane na bieżąco lub przekształcać je podczas pisania.

Dalej: zarządzanie stanem całego formularza, a nie tylko jednego pola.

Bezpłatny start

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: 36
Lekcje: 152

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „TextField i dane wprowadzane przez użytkownika” jest bezpłatna?

Tak — pełny tekst „TextField i dane wprowadzane przez użytkownika” 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 Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „TextField i dane wprowadzane przez użytkownika”?

Pobieraj tekst od użytkownika w Compose Ćwiczysz Android 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ąć Android Academy?

Nie wymagamy żadnego doświadczenia. Android 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 dane wprowadzane przez użytkownika”?

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 Android Academy?

Tak. Każda lekcja Android 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 dane wprowadzane przez użytkownika
Zarządzanie stanem formularza
Walidacja danych wejściowych
Opcje i działania klawiatury

← Powrót do Android Academy