Jetpack Compose, Android • 16 Mei 2024

Jetpack Compose - OutlinedTextField

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

OutlinedTextField adalah salah satu komponen UI yang disediakan oleh Jetpack Compose. Komponen ini digunakan untuk membuat input teks dengan tampilan yang lebih sederhana dan memiliki garis luar (outline) di sekelilingnya.

OutlinedTextField memiliki beberapa perbedaan dengan TextField biasa. Salah satu perbedaannya adalah tampilan visualnya. OutlinedTextField memiliki penekanan visual yang lebih sedikit daripada TextField biasa. Garis luar di sekelilingnya memberikan tampilan yang lebih ringan dan minimalis.

Selain itu, OutlinedTextField juga memiliki beberapa properti tambahan yang dapat dikonfigurasi, seperti label untuk menambahkan label di atas input teks, placeholder untuk menambahkan teks placeholder yang ditampilkan saat input teks kosong, dan leadingIcon serta trailingIcon untuk menambahkan ikon di sebelah kiri atau kanan input teks.

Parameter/Attribut

@Composable
fun OutlinedTextField(
    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 = OutlinedTextFieldDefaults.shape,
    colors: TextFieldColors = OutlinedTextFieldDefaults.colors()
)

value: String

Nilai teks yang saat ini ditampilkan dalam text field.

onValueChange: (String) -> Unit

Lambda yang dipanggil ketika teks berubah. Gunakan ini untuk memperbarui value.

modifier: Modifier = Modifier

Modifier untuk menyesuaikan tampilan dan perilaku dari OutlinedTextField.

enabled: Boolean = true

Mengaktifkan atau menonaktifkan input. Jika false, text field tidak dapat diubah.

readOnly: Boolean = false

Menandakan apakah text field hanya untuk dibaca atau bisa diubah.

textStyle: TextStyle = LocalTextStyle.current

Gaya teks yang digunakan untuk teks yang dimasukkan.

label: @Composable (() -> Unit)? = null

Label yang ditampilkan di atas text field ketika fokus atau ada teks yang dimasukkan.

placeholder: @Composable (() -> Unit)? = null

Placeholder yang ditampilkan ketika text field kosong.

leadingIcon: @Composable (() -> Unit)? = null

Ikon yang ditampilkan di awal text field.

trailingIcon: @Composable (() -> Unit)? = null

Ikon yang ditampilkan di akhir text field.

prefix: @Composable (() -> Unit)? = null

Konten yang ditampilkan di depan teks yang dimasukkan, tapi di dalam batas text field.

suffix: @Composable (() -> Unit)? = null

Konten yang ditampilkan di belakang teks yang dimasukkan, tapi di dalam batas text field.

supportingText: @Composable (() -> Unit)? = null

Teks pendukung yang ditampilkan di bawah text field.

isError: Boolean = false

Menandakan apakah ada error di text field. Jika true, akan menunjukkan tampilan error.

visualTransformation: VisualTransformation = VisualTransformation.None

Transformasi visual untuk teks yang ditampilkan (misalnya, untuk menyembunyikan password).

keyboardOptions: KeyboardOptions = KeyboardOptions.Default

Opsi untuk konfigurasi keyboard, seperti jenis keyboard yang muncul.

keyboardActions: KeyboardActions = KeyboardActions.Default

Aksi-aksi untuk kejadian keyboard, seperti tindakan ketika menekan tombol Enter.

singleLine: Boolean = false

Menentukan apakah text field hanya satu baris. Jika true, maxLines diabaikan.

maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE

Jumlah maksimum baris yang bisa ditampilkan di text field.

minLines: Int = 1

Jumlah minimum baris yang bisa ditampilkan di text field.

interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }

Mengelola interaksi pengguna dengan text field.

shape: Shape = OutlinedTextFieldDefaults.shape

Bentuk dari text field.

colors: TextFieldColors = OutlinedTextFieldDefaults.colors()

Warna-warna untuk berbagai komponen text field.

Contoh

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