Android Academy · Pelajaran

TextField dan Input Pengguna

Tangkap teks daripada pengguna dalam Compose.

Pelajaran 1 daripada 413 langkah

TextField dan Input Pengguna ialah pelajaran Android Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Android Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Android Academy merangkumi sejumlah 4 pelajaran.

Menangkap Input Pengguna

Hampir setiap aplikasi sebenar perlu meminta sesuatu daripada pengguna: nama, e-mel atau pertanyaan carian. Dalam Jetpack Compose, komponen asas untuk memasukkan teks ialah TextField.

Dalam pelajaran ini, Anda akan belajar cara memaparkan medan teks, membaca perkara yang ditaip pengguna dan memastikan medan tersebut selaras dengan keadaan aplikasi Anda. Inilah asas bagi setiap borang yang akan Anda bina.

TextField Pertama Anda

TextField memerlukan dua perkara: value (teks semasa yang hendak dipaparkan) dan panggilan balik onValueChange (tindakan apabila pengguna menaip).

Compose bersifat deklaratif, jadi medan tersebut tidak menyimpan teksnya sendiri. Anda menyimpan teks itu dalam keadaan dan memasukkannya semula. Corak ini dipanggil penaikan keadaan.

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

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

Cara Gelung Nilai Berfungsi

Idea yang paling penting: TextField memaparkan tepat perkara yang Anda hantarkan kepada value. Apabila pengguna menekan kekunci, Compose memanggil onValueChange dengan teks baharu.

Anda menyimpan teks baharu itu dalam keadaan.
Perubahan keadaan mencetuskan gubahan semula.
Medan dilukis semula dengan value yang dikemas kini.

Jika Anda terlupa mengemas kini keadaan dalam onValueChange, medan akan kelihatan beku kerana value tidak pernah berubah.

var name by remember { mutableStateOf("") }

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

Menambah Label dan Pemegang Tempat

Medan teks kosong tidak memberi petunjuk kepada pengguna tentang perkara yang perlu ditaip. Tambahkan label (terapung di atas medan) dan placeholder (petunjuk yang dipaparkan apabila kosong).

Sentuhan kecil ini menjadikan borang lebih mudah difahami.

var email by remember { mutableStateOf("") }

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

OutlinedTextField

Material Design menawarkan dua gaya utama. TextField mempunyai latar belakang berisi, manakala OutlinedTextField melukis sempadan di sekeliling medan. Kedua-duanya berkongsi API yang sama, jadi pertukarannya amat mudah.

Medan bersempadan popular dalam borang kerana kelihatan kemas apabila disusun secara menegak.

var username by remember { mutableStateOf("") }

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

Ikon Awalan dan Akhiran

Anda boleh menghias medan dengan ikon. leadingIcon muncul di bahagian awal (sesuai untuk glif carian atau e-mel), manakala trailingIcon muncul di bahagian akhir (biasanya butang kosongkan).

Ikon menjadikan tujuan medan jelas sekali imbas.

var query by remember { mutableStateOf("") }

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

Butang Kosongkan

Corak pengalaman pengguna yang biasa ialah tanda "x" kecil yang mengosongkan medan. Paparkannya hanya apabila terdapat teks, menggunakan slot trailingIcon dan IconButton.

Perhatikan bahawa mengosongkan medan hanya bermaksud menetapkan semula keadaan kepada rentetan kosong.

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")
            }
        }
    }
)

Satu Baris berbanding Berbilang Baris

Secara lalai, TextField boleh berkembang menjadi beberapa baris. Untuk perkara seperti nama atau e-mel, tetapkan singleLine = true supaya pengguna tidak boleh memasukkan baris baharu.

Untuk nota yang lebih panjang, biarkan medan berbilang baris dan hadkan ketinggiannya secara pilihan dengan maxLines.

var bio by remember { mutableStateOf("") }

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

Memberi Respons kepada Input Secara Langsung

Oleh sebab Anda memiliki keadaan teks, Anda boleh memberikan respons kepadanya serta-merta. Contoh klasik ialah memaparkan kiraan aksara secara langsung di bawah medan.

Setiap ketukan kekunci mengemas kini text, yang menggubah semula medan dan kiraan di bawahnya.

var text by remember { mutableStateOf("") }

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

Mengubah Input

Kadang-kadang Anda mahu menyeragamkan perkara yang ditaip pengguna sebelum menyimpannya. Dalam onValueChange, Anda boleh mengubah nilai baharu terlebih dahulu.

Di sini, kami menukar nama pengguna kepada huruf kecil dan membuang ruang. Oleh sebab Anda mengawal gelung tersebut, medan sentiasa memaparkan versi yang telah dibersihkan.

var handle by remember { mutableStateOf("") }

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

Kotlin Tulen: Membersihkan Handle

Logik pengubahan di atas hanyalah Kotlin biasa. Anda boleh mengujinya secara berasingan tanpa Android. Berikut ialah peraturan pembersihan yang sama dijalankan secara kendiri.

Mengekalkan logik seperti ini dalam fungsi tulen memudahkan ujian unit.

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

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

Semakan Pantas

Apakah yang berlaku jika panggilan balik onValueChange bagi TextField tidak pernah mengemas kini keadaan yang dihantarkan kepada value?

Jawab dalam pelajaran interaktif

Imbas Kembali

Kini Anda mengetahui asas input teks dalam Compose:

TextField dan OutlinedTextField menerima value serta panggilan balik onValueChange.
Anda menyimpan teks dalam remember { mutableStateOf(...) } dan mengemas kininya setiap kali berlaku perubahan (penaikan keadaan).
label, placeholder, ikon awalan/akhiran dan singleLine membentuk rupa serta tingkah laku.
Oleh sebab Anda memiliki keadaan, Anda boleh memberikan respons secara langsung atau mengubah input semasa pengguna menaip.

Seterusnya: mengurus keadaan keseluruhan borang, bukan hanya satu medan.

Percuma untuk bermula

Pelajari Kotlin dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 36
Pelajaran: 152

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “TextField dan Input Pengguna” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Android Academy, termasuk “TextField dan Input Pengguna”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Android Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “TextField dan Input Pengguna”?

Tangkap teks daripada pengguna dalam Compose. Anda berlatih Android Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Android Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Android Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “TextField dan Input Pengguna” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy