Jetpack Compose, Android • 17 Mei 2024

Jetpack Compose - TextButton

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

TextButton pada Jetpack Compose

TextButton pada Jetpack Compose adalah sebuah komponen UI yang menampilkan teks yang dapat ditekan untuk menanggapi interaksi pengguna. TextButton biasanya digunakan untuk aksi atau navigasi yang tidak memerlukan penonjolan visual yang besar.

Kapan Harus Menggunakan TextButton:

Aksi atau Navigasi Sekunder: TextButton cocok digunakan untuk aksi atau navigasi yang tidak menjadi fokus utama dari halaman.
Tampilan yang Sederhana: Cocok digunakan untuk menjaga tampilan yang bersih dan sederhana.
Pemilihan Terkait: Bisa digunakan sebagai alternatif dari Button atau OutlinedButton untuk menonjolkan pilihan atau navigasi.

Perbedaan dengan Button, Text, dan OutlinedButton:

Button: Memiliki latar belakang berwarna dan biasanya digunakan untuk aksi utama dalam aplikasi.
Text: Teks yang tidak dapat ditekan secara langsung tanpa adanya aksi.
OutlinedButton: Memiliki border luar tanpa latar belakang.
TextButton: Teks yang dapat ditekan dengan latar belakang yang transparan atau tidak ada.

Anda dapat menggunakan TextButton untuk menambahkan aksi interaktif dalam aplikasi Anda tanpa mengganggu desain visual yang ada.

Parameter/Atribut

@Composable
fun TextButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.textShape,
    colors: ButtonColors = ButtonDefaults.textButtonColors(),
    elevation: ButtonElevation? = null,
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit
)

onClick: () -> Unit

Sebuah lambda yang akan dipanggil ketika pengguna mengklik button. Anda harus menentukan aksi atau fungsi yang akan dijalankan ketika button ditekan.

modifier: Modifier = Modifier

Modifier untuk menyesuaikan tampilan dan perilaku dari button. Dengan menggunakan modifier, Anda dapat mengatur hal-hal seperti padding, margin, ukuran, warna latar belakang, dan tata letak dari button.

enabled: Boolean = true

Menentukan apakah button dapat digunakan atau tidak. Jika true, button dapat ditekan (aktif). Jika false, button tidak dapat ditekan (non-aktif).

shape: Shape = ButtonDefaults.textShape

Bentuk dari button. Anda dapat menggunakan nilai bawaan ButtonDefaults.textShape atau menyediakan bentuk kustom sesuai kebutuhan desain aplikasi Anda.

colors: ButtonColors = ButtonDefaults.textButtonColors()

Warna dari button dalam berbagai keadaan, seperti warna teks dan efek hover. Anda dapat menggunakan nilai bawaan ButtonDefaults.textButtonColors() atau menyediakan warna kustom sesuai kebutuhan desain aplikasi Anda.

elevation: ButtonElevation? = null

Elevasi dari button ketika ditekan. Elevasi menentukan seberapa jauh button akan "melayang" di atas permukaan. Jika null, button tidak akan memiliki elevasi.

border: BorderStroke? = null

Garis tepi (border) dari button. Anda dapat menentukan ketebalan garis dan warna dari border menggunakan objek BorderStroke. Jika null, button tidak akan memiliki border.

contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding

Padding (jarak dalam) dari konten di dalam button. Anda dapat menggunakan nilai bawaan ButtonDefaults.TextButtonContentPadding atau menyesuaikan padding sesuai kebutuhan desain aplikasi Anda.

interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }

Objek untuk menangani interaksi pengguna seperti sentuhan, klik, dan hover. Anda dapat menggunakan nilai bawaan MutableInteractionSource() atau menyediakan objek interaksi kustom.

content: @Composable RowScope.() -> Unit

Lambda untuk mendefinisikan konten dari button. Ini memungkinkan Anda untuk menambahkan komponen-komponen ke dalam button, seperti teks, ikon, atau elemen UI lainnya, dan mengatur tata letak serta perilaku mereka dalam button.

Contoh

@Composable
fun DemoTextButton(modifier: Modifier = Modifier) {
    TextButton(onClick = {
        Log.d("Tag", "DemoButton: The Ngoding")
    }) {
        Text(text = "Click Me")
    }
}