พื้นผิวใน Jetpack Compose Glimmer

อุปกรณ์ XR ที่รองรับ

คำแนะนำนี้จะช่วยคุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทต่างๆ

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ใน Jetpack Compose Glimmer คอมโพเนนต์ surface เป็นองค์ประกอบที่ใช้สร้างสรรค์พื้นฐาน ที่แสดงถึงพื้นที่ภาพที่แยกจากกันหรือขอบเขตทางกายภาพสำหรับ คอมโพเนนต์ต่างๆ เช่น ปุ่มและการ์ด

พื้นผิวมีหน้าที่รับผิดชอบคุณสมบัติทางภาพและทางกายภาพต่อไปนี้

• การตัด: ตัดองค์ประกอบย่อยให้มีรูปร่างที่ระบุ
• เส้นขอบ: วาดเส้นขอบด้านในเพื่อเน้นขอบเขตของคอมโพเนนต์ เมื่อโฟกัส ระบบจะวาดเส้นขอบที่กว้างขึ้นพร้อมไฮไลต์ที่โฟกัส
• พื้นหลัง: ใช้สีพื้นหลังกับพื้นที่พื้นผิว
• เอฟเฟกต์ความลึก: แสดงผลเงา DepthEffect ตาม สถานะของคอมโพเนนต์ (เช่น ค่าเริ่มต้นเทียบกับโฟกัส)
• สีเนื้อหา: ระบุสีสำหรับข้อความและไอคอนภายในพื้นผิว ซึ่งระบบจะคำนวณจากสีพื้นหลังโดยค่าเริ่มต้น
• สถานะการโต้ตอบ: วาดภาพซ้อนทับที่กดเมื่อกดพื้นผิว และวาดเส้นขอบที่กว้างขึ้นพร้อมไฮไลต์เมื่อโฟกัส

ตัวอย่าง: สร้างพื้นผิว

โค้ดต่อไปนี้จะสร้างพื้นผิวที่มีการตัด พื้นหลัง และเส้นขอบเริ่มต้น

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

การโต้ตอบและการโฟกัส

พื้นผิวจะโฟกัสไม่ได้โดยค่าเริ่มต้น ผู้ใช้จึงโต้ตอบกับพื้นผิวไม่ได้ ในกรณีส่วนใหญ่ พื้นผิวควรโต้ตอบได้เพื่อให้ผู้ใช้ย้ายโฟกัสและไปยังส่วนต่างๆ ระหว่างคอมโพเนนต์ได้อย่างสม่ำเสมอ คุณสามารถใช้ตัวปรับแต่ง focusable ของ Compose สำหรับพื้นผิวที่ต้องการให้โฟกัสได้เท่านั้น ในทำนองเดียวกัน คุณสามารถสร้างพื้นผิวที่คลิกได้โดยใช้ตัวปรับแต่ง clickable ของ Compose นอกจากนี้ คุณยังใช้ตัวปรับแต่งอื่นๆ สำหรับพื้นผิวที่ต้องมีการดำเนินการได้ด้วย

โค้ดต่อไปนี้แสดงตัวอย่างของพื้นผิวที่โฟกัสได้และคลิกได้

@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")
    }
}
SurfaceSamples.kt

ประเด็นสำคัญเกี่ยวกับโค้ด

• แหล่งที่มาของการโต้ตอบที่แชร์สำหรับพื้นผิวที่โฟกัสได้: ทั้ง .surface() และ .focusable() ต้องแชร์ interactionSource เดียวกัน ซึ่งจะช่วยให้พื้นผิวตอบสนองต่อการเปลี่ยนแปลงโฟกัสได้

• แหล่งที่มาของการโต้ตอบที่แชร์สำหรับพื้นผิวที่คลิกได้: ทั้ง .surface() และ .clickable() ต้องแชร์ interactionSource เดียวกัน ซึ่งจะช่วยให้มั่นใจได้ว่าสถานะภาพ (เช่น การกดหรือการโฟกัส) จะซิงค์กัน ทำให้พื้นผิวตอบสนองต่อข้อมูลจากผู้ใช้ในเชิงภาพได้

• การจัดลำดับตัวปรับแต่ง: ลำดับของตัวปรับแต่งมีความสำคัญ เนื่องจาก .surface() จะตัดเลย์เอาต์ การวางไว้ ก่อน .clickable() จะช่วยจำกัดเป้าหมายการสัมผัสให้มีรูปร่างของพื้นผิว หาก .clickable() มาก่อน พื้นที่การโต้ตอบอาจขยายออกไปนอกขอบเขตที่มองเห็นได้และถูกตัดของคอมโพเนนต์

SurfaceDepthEffect

คลาส SurfaceDepthEffect จะจัดการการเปลี่ยนเงาระหว่าง สถานะการโต้ตอบ

• depthEffect: เอฟเฟกต์เงาที่ใช้เมื่อพื้นผิวอยู่ในสถานะเริ่มต้น
• focusedDepthEffect: เอฟเฟกต์เงาที่ใช้เมื่อพื้นผิวโฟกัส