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). Jikafalse
, 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
. Jikanull
, 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")
}
}
✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i