Nền tảng trong Jetpack Compose Glimmer

Các thiết bị XR được hỗ trợ
Hướng dẫn này giúp bạn xây dựng các trải nghiệm cho những loại thiết bị XR sau.
Tìm hiểu về các loại thiết bị XR →
Kính hiển thị
Tìm hiểu về các loại thiết bị XR →

Trong Jetpack Compose Glimmer, thành phần surface là một khối xây dựng cơ bản, đại diện cho một vùng trực quan riêng biệt hoặc ranh giới vật lý cho các thành phần như nút và thẻ.

Một bề mặt chịu trách nhiệm về các thuộc tính vật lý và hình ảnh sau đây:

  • Cắt: Cắt các phần tử con theo một hình dạng cụ thể.
  • Đường viền: Vẽ một đường viền bên trong để nhấn mạnh ranh giới của thành phần. Khi được lấy tiêu điểm, thành phần này sẽ vẽ một đường viền rộng hơn với điểm nổi bật được lấy tiêu điểm.
  • Nền: Áp dụng màu nền cho vùng bề mặt.
  • Hiệu ứng chiều sâu: Kết xuất bóng DepthEffect dựa trên trạng thái của thành phần (chẳng hạn như mặc định so với được lấy tiêu điểm).
  • Màu nội dung: Cung cấp màu cho văn bản và biểu tượng bên trong giao diện, được tính theo mặc định từ màu nền.
  • Trạng thái tương tác: Vẽ một lớp phủ được nhấn khi bề mặt được nhấn và một đường viền rộng hơn có điểm đánh dấu khi được lấy tiêu điểm.

Ví dụ: Tạo một bề mặt

Đoạn mã sau đây sẽ tạo một vùng có đường viền, nền và đường viền mặc định:

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

Interaction and Focus

Surfaces aren't focusable by default, so users can't interact with them. In most cases, surfaces should be interactive to let users consistently move focus and navigate between components. You can use the Compose focusable modifer for surfaces that are only intended to be focusable, or the Compose clickable modifer and other modifiers for surfaces that require actions.

You can create a focusable surface by combining a surface modifier with the focusable modifier:

@Composable
fun FocusableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier.surface(
                // Provide the same interaction source here and to focusable to make sure that
                // surface appears focused when interacted with.
                interactionSource = interactionSource
            )
            .focusable(interactionSource = interactionSource)
            .padding(horizontal = 24.dp, vertical = 20.dp)
    ) {
        Text("This is a focusable surface")
    }
}

Key points about the code

  • Shared interaction source: Both .surface() and .focusable() must share the same interactionSource. This lets the surface react to focus changes.

Similarly, you can create a clickable surface:

@Composable
fun ClickableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier.surface(
                // Provide the same interaction source here and to clickable to make sure that
                // surface appears focused and pressed when interacted with
                interactionSource = interactionSource
            )
            .clickable(interactionSource = interactionSource, onClick = {})
            .padding(horizontal = 24.dp, vertical = 20.dp)
    ) {
        Text("This is a clickable surface")
    }
}

Các điểm chính về mã

  • Nguồn tương tác được chia sẻ: Cả hai .surface() và .clickable() phải có cùng interactionSource. Điều này đảm bảo rằng các trạng thái trực quan (chẳng hạn như nhấn hoặc lấy tiêu điểm) được đồng bộ hoá, cho phép thành phần phản ứng trực quan với thông tin đầu vào của người dùng.

  • Thứ tự của đối tượng sửa đổi: Trình tự của các đối tượng sửa đổi là rất quan trọng. Vì .surface() cắt một bố cục, đặt bố cục đó trước .clickable() đảm bảo đích chạm bị giới hạn trong hình dạng của bề mặt. Nếu .clickable() xuất hiện trước, vùng tương tác có thể mở rộng ra ngoài ranh giới bị cắt, có thể nhìn thấy của thành phần.

SurfaceDepthEffect

Lớp SurfaceDepthEffect quản lý quá trình chuyển đổi bóng giữa các trạng thái tương tác:

  • depthEffect: Hiệu ứng đổ bóng được dùng khi thành phần ở trạng thái mặc định.
  • focusedDepthEffect: Hiệu ứng đổ bóng được dùng khi bề mặt được lấy tiêu điểm.