Jetpack Compose - TextButton

The Ngoding

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

Row


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

Video

The Ngoding

13 Alasan Jetpack Compose Lebih Baik untuk Pengembangan Aplikasi Android

Cong Fandi

Jetpack Compose - Surface

Cong Fandi

Jetpack Compose - CutCornerShape

Cong Fandi

Jetpack Compose - RoundedCornerShape

Cong Fandi

Jetpack Compose - CircleShape

Cong Fandi

Jetpack Compose - ConstraintSet

Cong Fandi

Jetpack Compose - BadgeBox

Cong Fandi

Video

The Ngoding

Tags