Jetpack Compose - TextField

Penting

Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE

Pengertian

TextField pada Jetpack Compose adalah salah satu komponen UI yang digunakan untuk memasukkan dan menampilkan teks yang dapat diedit oleh pengguna. Dengan menggunakan TextField, pengguna dapat memasukkan teks melalui keyboard dan melihat teks yang telah dimasukkan.

Pendekatan deklaratif dalam Jetpack Compose memungkinkan kita untuk membuat TextField dengan mudah. Kita dapat mendeskripsikan TextField menggunakan fungsi TextField dan mengatur properti seperti teks awal, tampilan, dan perilaku saat teks berubah.

Atribut/parameter

@Composable
fun TextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: @Composable (() -> Unit)? = null,
    placeholder: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    prefix: @Composable (() -> Unit)? = null,
    suffix: @Composable (() -> Unit)? = null,
    supportingText: @Composable (() -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
    minLines: Int = 1,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = TextFieldDefaults.shape,
    colors: TextFieldColors = TextFieldDefaults.colors()
)

value: String: Parameter ini digunakan untuk menentukan teks yang ditampilkan dalam TextField. Ini adalah teks yang dapat diedit oleh pengguna.

onValueChange: (String) -> Unit: Parameter ini adalah fungsi yang dipanggil ketika teks dalam TextField berubah. Fungsi ini menerima teks baru sebagai argumen.

modifier: Modifier: Parameter ini digunakan untuk mengubah tampilan dan perilaku TextField dengan menggunakan modifikasi seperti padding, ukuran, dan lainnya.

enabled: Boolean: Parameter ini menentukan apakah TextField dapat diinteraksi atau tidak. Jika diatur sebagai false, TextField akan menjadi tidak dapat diubah.

readOnly: Boolean: Parameter ini menentukan apakah TextField hanya dapat dibaca atau tidak dapat diubah. Jika diatur sebagai true, pengguna tidak dapat mengubah teks dalam TextField.

textStyle: TextStyle: Parameter ini digunakan untuk mengatur gaya teks dalam TextField, seperti warna, ukuran, dan jenis huruf.

label: @Composable (() -> Unit)?: Parameter ini digunakan untuk menambahkan label ke TextField. Label ini biasanya memberikan petunjuk tentang jenis teks yang diharapkan dari pengguna.

placeholder: @Composable (() -> Unit)?: Parameter ini digunakan untuk menambahkan teks placeholder ke TextField. Placeholder ini adalah teks yang ditampilkan ketika TextField kosong dan tidak memiliki fokus.

leadingIcon: @Composable (() -> Unit)?: Parameter ini digunakan untuk menambahkan ikon di sebelah kiri TextField. Ikon ini dapat memberikan konteks visual atau tindakan yang terkait dengan teks yang dimasukkan.

trailingIcon: @Composable (() -> Unit)?: Parameter ini digunakan untuk menambahkan ikon di sebelah kanan TextField. Ikon ini dapat memberikan konteks visual atau tindakan yang terkait dengan teks yang dimasukkan.

prefix: @Composable (() -> Unit)?: Parameter ini digunakan untuk menambahkan konten di sebelah kiri TextField. Konten ini dapat berupa teks atau komponen lain yang ingin ditampilkan sebelum teks yang dimasukkan.

suffix: @Composable (() -> Unit)?: Parameter ini digunakan untuk menambahkan konten di sebelah kanan TextField. Konten ini dapat berupa teks atau komponen lain yang ingin ditampilkan setelah teks yang dimasukkan.

supportingText: @Composable (() -> Unit)?: Parameter ini digunakan untuk menambahkan teks pendukung di bawah TextField. Teks ini dapat memberikan informasi tambahan atau pesan kesalahan terkait dengan teks yang dimasukkan.

isError: Boolean: Parameter ini menentukan apakah TextField sedang dalam keadaan error atau tidak. Jika diatur sebagai true, TextField akan menampilkan tampilan yang menunjukkan adanya kesalahan.

visualTransformation: VisualTransformation: Parameter ini digunakan untuk mengubah tampilan visual dari teks yang dimasukkan. Misalnya, untuk mengubah teks menjadi tanda bintang saat dimasukkan sebagai kata sandi.

keyboardOptions: KeyboardOptions: Parameter ini digunakan untuk mengatur opsi keyboard yang ditampilkan saat TextField mendapatkan fokus.

keyboardActions: KeyboardActions: Parameter ini digunakan untuk mengatur tindakan yang dilakukan saat pengguna berinteraksi dengan keyboard dalam TextField.

singleLine: Boolean: Parameter ini menentukan apakah TextField hanya dapat menampilkan satu baris teks atau dapat memperluas ke beberapa baris jika diperlukan.

maxLines: Int: Parameter ini menentukan jumlah maksimum baris yang dapat ditampilkan dalam TextField. Jika singleLine diatur sebagai true, maka maxLines akan diabaikan.

minLines: Int: Parameter ini menentukan jumlah minimum baris yang ditampilkan dalam TextField. Jika singleLine diatur sebagai true, maka minLines akan diabaikan.

interactionSource: MutableInteractionSource: Parameter ini digunakan untuk mengatur sumber interaksi TextField. Ini memungkinkan untuk melacak interaksi pengguna dengan TextField, seperti sentuhan atau klik.

shape: Shape: Parameter ini digunakan untuk mengatur bentuk TextField, seperti sudut melengkung atau bentuk khusus lainnya.

colors: TextFieldColors: Parameter ini digunakan untuk mengatur warna yang digunakan dalam TextField, seperti warna latar belakang, warna kursor, dan warna indikator.

Contoh Penggunaan

@Composable
fun contohTextField() {
    var text = ""
    TextField(
        value = text,
        onValueChange = { newText ->
            text = newText
        },
        label = { Text("Enter your name") }
    )
}

Dalam contoh di atas, value adalah teks yang ditampilkan dalam TextField, onValueChange adalah fungsi yang dipanggil ketika teks berubah, dan label adalah teks yang ditampilkan sebagai label untuk TextField.

TextField juga mendukung berbagai properti lainnya, seperti pengaturan keyboard yang digunakan, aksi yang dilakukan saat tombol "Enter" ditekan, dan validasi teks yang dimasukkan.

Dengan menggunakan TextField dalam Jetpack Compose, pengembangan UI menjadi lebih mudah dan intuitif. Kita dapat dengan cepat membuat komponen input teks yang interaktif dan responsif tanpa perlu menulis kode yang rumit.

✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i

Video