Tutorial Jetpack compose: Modifier

Tutorial Jetpack compose: Modifier

#tutorial

#jetpackcompose

https://placeimg.com/640/480/any

Hai temen - temen semua, pada kesempatan kali ini, saya akan membagikan tutorial menggunakan Modifier di Jetpack Compose. Sebelum itu itu lebih baik kita pahami dulu apa itu Modifier.

Apa itu Modifier ?

Semua komponen UI memiliki parameter Modifier. Modifier memungkinkan kita untuk mengubah cara Composable disajikan, beberapa yang bisa Modifier lakukan diantaranya:

  • Ubah perilaku dan tampilan Composable
  • Tambahkan deskripsi seperti label aksesibilitas
  • Proses user input
  • Menambahkan interaksi pengguna seperti membuat elemen clickable(), scrollable(), draggable(), atau zoomable().

Jika kalian pernah mengembangkan aplikasi Flutter, untuk membuat padding atau click, kalian perlu Widget tambahan untuk mendukung hal tersebut. Dengan menggunakan Modifier, semua tersedia dalam satu metode dari tampilan hingga interaksi user. So, langsung saja kita ke percobaannya.

Layout Modifier

Bagian ini merupakan elemen Modifier yang dapat mengubah tampilan dari Composable seperti size dan padding.

  • Modifier.width() untuk mengatur lebar Composable.
    @Composable
    fun ModifierWidht(){
      Spacer(modifier = Modifier.width(100.dp))
    }
    
  • Modifier.height() untuk mengatur ketinggian / height Composable.
@Composable
fun ModifierHeight(){
    Spacer(modifier = Modifier.height(100.dp))
}
  • Modifier.size() untuk mengatur lebar dan tinggi dari Composable.
    @Composable
    fun ModifierSize(){
      Spacer(modifier = Modifier.width(100.dp))
    }
    
  • Modifier.fillMaxHeight() Ini akan mengatur height pada Composable ke ketinggian max yang tersedia. Ini mirip dengan MATCH_PARENT di xml layout.
    @Composable
    fun ModifierFillMax(){
      Spacer(modifier = Modifier.fillMaxHeight())
    }
    
  • Modifier.fillMaxWidth() Ini akan mengatur lebar Composable ke lebar maksimum yang tersedia. Ini hampir sama dengan MATCH_PARENT di xml layout.
    @Composable
    fun ModifierFillMax(){
      Spacer(modifier = Modifier.fillMaxWidth())
    }
    
  • Modifier.fillMaxSize() mengatur tinggi/lebar Composable ke tinggi/lebar maksimum yang tersedia
@Composable
fun ModifierFillMax(){
    Spacer(modifier = Modifier.fillMaxSize())
}
  • Modifier.padding() Anda dapat menggunakan Modifier.padding untuk menyetel padding ke Composables, ada varian all, simetris, atau satu persatu dari tiap arah (top, left, right, bottom). Kalau penggunaan secara simetri seperti berikut Modifier.padding(horizontal = 8.dp, vertical = 16.dp)
@Composable
fun ModifierPadding(){
    Spacer(
        modifier = Modifier.padding(
            start = 4.dp,
            top = 4.dp,
            bottom = 4.dp,
            end = 4.dp
        )
    )
}

Draw Modifier

  • Modifier.background() Dengan modifier ini kalian dapat mengatur warna/bentuk dari background Composable
  • Modifier.border() Menambahkan border pada Composable, border berisi ketebalan border, warna, shape, dan brush.
  • Modifier.clip() Fungsi ini dapat membuat bentuk atau shape dari element Composable.

Penutup

Nah itu dia penerapan Modifier, sebenarnya masih banyak lagi fitur dari Modifier, kalian bisa lihat sendiri di dokumentasi resminya https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier. Untuk tutorial gesture modifier saya akan buatkan sendiri artikelnya. sekian

We'll never share your email with anyone else.