Permukaan di Jetpack Compose Glimmer

Perangkat XR yang kompatibel
Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.
Mempelajari jenis perangkat XR →
Kacamata Display
Mempelajari jenis perangkat XR →

Di Jetpack Compose Glimmer, komponen surface adalah elemen penyusun fundamental yang mewakili area visual yang berbeda atau batas fisik untuk komponen seperti tombol dan kartu.

Surface bertanggung jawab atas properti visual dan fisik berikut:

  • Pemangkasan: Memangkas turunannya ke bentuk yang ditentukan.
  • Batas: Menggambar batas dalam untuk menekankan batas komponen. Saat difokuskan, batas akan digambar lebih lebar dengan sorotan fokus.
  • Latar Belakang: Menerapkan warna latar belakang ke area permukaan.
  • Efek kedalaman: Merender DepthEffect bayangan berdasarkan status komponen (seperti default versus fokus).
  • Warna Konten: Menyediakan warna untuk teks dan ikon di dalam permukaan, yang dihitung secara default dari warna latar belakang.
  • Status Interaksi: Menggambar overlay yang ditekan saat permukaan ditekan dan batas yang lebih lebar dengan sorotan saat difokuskan.

Contoh: Membuat permukaan

Kode berikut membuat permukaan dengan pemangkasan, latar belakang, dan batas default:

@Composable
fun SurfaceSample() {
    Box(Modifier.surface().padding(horizontal = 24.dp, vertical = 20.dp)) {
        Text("This is a surface")
    }
}

Interaksi dan fokus

Secara default, permukaan tidak dapat difokuskan, sehingga pengguna tidak dapat berinteraksi dengannya. Dalam sebagian besar kasus, permukaan harus interaktif agar pengguna dapat memindahkan fokus dan bernavigasi antar-komponen secara konsisten. Anda dapat menggunakan pengubah focusable Compose untuk permukaan yang hanya dimaksudkan agar dapat difokuskan. Demikian pula, Anda dapat membuat permukaan yang dapat diklik menggunakan pengubah clickableCompose. Anda juga dapat menggunakan pengubah lain untuk permukaan yang memerlukan tindakan.

Kode berikut menunjukkan contoh permukaan yang dapat difokuskan dan dapat diklik:

@Composable
fun FocusableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier = Modifier
            .size(100.dp)
            .surface(interactionSource = interactionSource)
            .focusable(interactionSource = interactionSource),
        contentAlignment = Alignment.Center
    ) {
        Text("Focusable")
    }
}

@Composable
fun ClickableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier = Modifier
            .size(100.dp)
            .surface(interactionSource = interactionSource)
            .focusable(interactionSource = interactionSource)
            .clickable(
                interactionSource = interactionSource,
                indication = null
            ) { /* Handle click action */ },
        contentAlignment = Alignment.Center
    ) {
        Text("Clickable")
    }
}

Poin-poin penting tentang kode

  • Sumber interaksi bersama untuk permukaan yang dapat difokuskan: .surface() dan .focusable() harus menggunakan interactionSource yang sama. Hal ini memungkinkan permukaan bereaksi terhadap perubahan fokus.

  • Sumber interaksi bersama untuk permukaan yang dapat diklik: .surface() dan .clickable() harus menggunakan interactionSource yang sama. Hal ini memastikan bahwa status visual (seperti tekan atau fokus) disinkronkan, sehingga permukaan dapat bereaksi secara visual terhadap input pengguna.

  • Pengurutan pengubah: Urutan pengubah sangat penting. Karena .surface() memangkas tata letak, menempatkannya sebelum .clickable() memastikan target sentuh dibatasi ke bentuk permukaan. Jika .clickable() muncul terlebih dahulu, area interaksi mungkin meluas di luar batas komponen yang terlihat dan dipangkas.

SurfaceDepthEffect

Class SurfaceDepthEffect mengelola transisi bayangan antar- status interaksi:

  • depthEffect: Efek bayangan yang digunakan saat permukaan berada dalam status default.
  • focusedDepthEffect: Efek bayangan yang digunakan saat permukaan difokuskan.