Jetpack Compose - BasicTextField

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

BasicTextField adalah salah satu komponen input teks dalam toolkit UI Jetpack Compose. Berbeda dengan OutlinedTextField, BasicTextField tidak memiliki border atau label yang terlihat secara bawaan. Ini memberikan kontrol yang lebih langsung dan fleksibilitas dalam tampilan dan perilaku.

Anda harus mempertimbangkan menggunakan BasicTextField ketika Anda perlu:

1. Kustomisasi Tingkat Lanjut: Jika Anda memerlukan kendali penuh atas tampilan dan perilaku input teks, termasuk dalam hal styling dan efek visual, BasicTextField memberikan fleksibilitas yang lebih besar daripada OutlinedTextField.

2. Kinerja yang Lebih Tinggi: Karena BasicTextField lebih sederhana dalam tampilan dan tidak memiliki banyak tambahan seperti border dan label, itu dapat memiliki kinerja yang lebih baik, terutama jika Anda memiliki banyak instance input teks dalam layar yang sama.

3. Interaksi yang Khusus: Jika Anda menginginkan tampilan input teks yang spesifik atau interaksi yang tidak biasa, seperti efek animasi kustom atau tata letak yang unik, menggunakan BasicTextField memberi Anda kontrol penuh untuk mencapai hasil yang diinginkan.

Namun, perlu diingat bahwa karena BasicTextField lebih dasar, Anda juga bertanggung jawab untuk menangani banyak aspek yang disediakan secara otomatis oleh OutlinedTextField, seperti penanganan error, placeholder, dan label. Oleh karena itu, pastikan Anda siap untuk menangani semua fitur ini secara manual jika Anda memilih BasicTextField.

Jadi, singkatnya, gunakan BasicTextField ketika Anda membutuhkan kontrol tingkat lanjut atas tampilan dan perilaku input teks, dan siap untuk menangani lebih banyak detail secara manual.

Parameter/atribut

@Composable
fun BasicText(
    text: String,
    modifier: Modifier = Modifier,
    style: TextStyle = TextStyle.Default,
    onTextLayout: ((TextLayoutResult) -> Unit)? = null,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    minLines: Int = 1,
    color: ColorProducer? = null
)

text: String

• Teks yang ditampilkan di dalam text field. Ketika text field ini pertama kali ditampilkan, teks akan disesuaikan dengan nilai yang diberikan. Selain itu, ketika pengguna mengubah teks di dalam text field, nilai dari parameter ini akan diubah secara dinamis.

modifier: Modifier = Modifier

• Modifier untuk menyesuaikan tampilan dan perilaku dari BasicTextField. Dengan menggunakan modifier, Anda dapat mengontrol hal-hal seperti padding, ukuran, dan tata letak dari text field.

style: TextStyle = TextStyle.Default

• Gaya teks yang diterapkan pada teks di dalam text field. Ini mencakup properti seperti font, ukuran, dan warna teks. Dengan menentukan style, Anda dapat mengubah penampilan visual dari teks yang ditampilkan di dalam text field.

onTextLayout: ((TextLayoutResult) -> Unit)? = null

• Lambda yang dipanggil ketika layout teks di dalam text field berubah. Ini memungkinkan Anda untuk melakukan tindakan tertentu ketika layout dari teks berubah, misalnya untuk menyesuaikan tata letak atau ukuran text field.

overflow: TextOverflow = TextOverflow.Clip

• Menentukan bagaimana teks di dalam text field ditampilkan jika melebihi ruang yang tersedia. Jika teks lebih panjang dari text field, overflow akan menentukan apakah teks dipotong atau digulung.

softWrap: Boolean = true

• Menentukan apakah teks di dalam text field akan mematahkan baris secara otomatis jika melebihi lebar text field. Jika diset sebagai true, teks akan mematahkan baris secara otomatis, sedangkan jika false, teks akan tetap dalam satu baris dan overflow akan diterapkan.

maxLines: Int = Int.MAX_VALUE

• Jumlah maksimum baris yang diizinkan untuk ditampilkan di dalam text field. Ini berguna jika Anda ingin membatasi tinggi dari text field, misalnya dalam kasus di mana Anda memiliki text field yang perlu menampilkan konten yang panjang.

minLines: Int = 1

• Jumlah minimum baris yang harus ditampilkan di dalam text field. Ini memungkinkan Anda untuk menentukan tinggi minimum dari text field, meskipun tidak ada teks di dalamnya.

color: ColorProducer? = null

• Warna teks yang diterapkan pada teks di dalam text field. Jika diset, warna yang ditentukan akan digunakan untuk mewarnai teks. Jika tidak, warna default akan digunakan.

Contoh

@Composable
fun contohBasicTextField() {
    var text = ""
    BasicText(
        text = "The Ngoding",
        modifier = Modifier
            .background(
                color = Color.Gray,
                shape = RoundedCornerShape(8.dp)
            )
            .padding(12.dp),
        color = { Color.Blue },
        style = MaterialTheme.typography.bodyLarge,
        maxLines = 2,
        overflow = TextOverflow.Ellipsis,
        softWrap = true,
        minLines = 1,
    )
}

Video