Jetpack Compose - Button

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

Button pada Jetpack Compose

Button pada Jetpack Compose adalah sebuah komponen UI yang digunakan untuk menanggapi interaksi pengguna. Button dapat ditekan untuk memicu suatu aksi atau perubahan dalam aplikasi.

Kapan Harus Menggunakan Button:

• Menanggapi Aksi Pengguna: Gunakan Button ketika Anda memerlukan pengguna untuk melakukan suatu aksi, seperti mengirim formulir, memulai proses, atau navigasi.
• Memulai Transisi: Gunakan Button untuk memulai transisi ke layar atau bagian baru dari aplikasi.
• Mengonfirmasi Aksi: Gunakan Button untuk mengonfirmasi suatu aksi yang penting, seperti menyimpan perubahan atau menghapus data.

Button di Jetpack Compose memiliki berbagai macam jenis, seperti Button, TextButton, OutlinedButton, dan IconButton, yang dapat dipilih sesuai dengan kebutuhan desain dan fungsionalitas aplikasi.

Parameter/Atribut

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    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.shape

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

colors: ButtonColors = ButtonDefaults.buttonColors()

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

elevation: ButtonElevation? = ButtonDefaults.buttonElevation()

• Elevasi dari button ketika ditekan. Elevasi menentukan seberapa jauh button akan "melayang" di atas permukaan. Anda dapat menggunakan nilai bawaan ButtonDefaults.buttonElevation() atau menyediakan nilai elevasi kustom.

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.ContentPadding

• Padding (jarak dalam) dari konten di dalam button. Anda dapat menggunakan nilai bawaan ButtonDefaults.ContentPadding 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 DemoButton(modifier: Modifier = Modifier) {
    Button(onClick = {
        Log.d("Tag", "DemoButton: The Ngoding")
    }) {
        Text(text = "Click Me")
    }
}

Video