Jetpack Compose - Surface

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

Surface di Jetpack Compose

Surface adalah komponen dalam Jetpack Compose yang digunakan sebagai kontainer untuk memberikan latar belakang, bayangan (elevation), bentuk (shape), dan klik interaksi pada elemen UI lainnya. Ini adalah elemen dasar yang sering digunakan untuk membungkus komponen UI lainnya untuk memberikan berbagai efek visual dan interaksi.

Kapan Harus Menggunakan Surface?

• Menyediakan Latar Belakang: Gunakan Surface untuk menetapkan warna latar belakang pada komponen UI.

• Menambahkan Bayangan: Surface memungkinkan Anda menambahkan bayangan (elevation) untuk memberikan kedalaman visual pada komponen UI.

• Menerapkan Bentuk: Gunakan Surface untuk memberikan bentuk tertentu pada komponen UI, seperti sudut membulat atau sudut terpotong.

• Konsistensi Desain: Surface membantu menciptakan konsistensi dalam desain dengan memungkinkan penggunaan kembali parameter visual seperti warna, bentuk, dan bayangan di seluruh aplikasi.

Parameter/Atribut

@Composable
@NonRestartableComposable
fun Surface(
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colorScheme.surface,
    contentColor: Color = contentColorFor(color),
    tonalElevation: Dp = 0.dp,
    shadowElevation: Dp = 0.dp,
    border: BorderStroke? = null,
    content: @Composable () -> Unit
) 

Parameter pada Surface di Jetpack Compose

• modifier: Modifier

  • Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual dari Surface.

• shape: Shape

  • Bentuk dari Surface. Nilai defaultnya adalah RectangleShape. Anda bisa mengubahnya menjadi bentuk lain seperti RoundedCornerShape atau CutCornerShape.

• color: Color

  • Warna latar belakang dari Surface. Nilai defaultnya adalah MaterialTheme.colorScheme.surface.

• contentColor: Color

  • Warna konten yang berada di dalam Surface. Nilai defaultnya dihasilkan oleh fungsi contentColorFor berdasarkan warna latar belakang (color).

• tonalElevation: Dp

  • Elevasi tonal dari Surface, yang digunakan untuk memberikan kedalaman visual berdasarkan warna latar belakang yang ditingkatkan. Nilai defaultnya adalah 0.dp.

• shadowElevation: Dp

  • Elevasi bayangan dari Surface, yang digunakan untuk menambahkan bayangan dan memberikan ilusi kedalaman. Nilai defaultnya adalah 0.dp.

• border: BorderStroke?

  • Batas atau garis pinggir dari Surface. Nilai defaultnya adalah null, yang berarti tidak ada garis pinggir. Anda dapat menetapkan nilai ini untuk menambahkan border dengan ketebalan dan warna tertentu.

• content: @Composable () -> Unit

  • Komposisi untuk menentukan konten yang akan ditampilkan di dalam Surface. Anda dapat menempatkan elemen UI lainnya di dalam Surface.

Penjelasan Tambahan

• @NonRestartableComposable: Anotasi ini menunjukkan bahwa komposisi Surface tidak akan dimulai ulang ketika nilai-nilai tertentu diubah. Ini meningkatkan kinerja dengan menghindari komposisi ulang yang tidak perlu.

Contoh

@Composable
fun DemoSurface(modifier: Modifier = Modifier) {
    Surface(
        modifier = Modifier.padding(16.dp),
        color = MaterialTheme.colorScheme.primary,
        shape = RoundedCornerShape(8.dp),
    ) {
        Text(
            text = "Hello, The Ngoding!",
            modifier = Modifier.padding(16.dp),
            color = Color.White
        )
    }
}

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

Video