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 đặc tính vật lý và hình ảnh sau:

  • 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 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")
    }
}

Tương tác và tiêu điểm

Theo mặc định, các thành phần không thể lấy tiêu điểm, nên người dùng không thể tương tác với chúng. Trong hầu hết các trường hợp, các thành phần phải có tính tương tác để người dùng có thể di chuyển tiêu điểm và điều hướng giữa các thành phần một cách nhất quán. Bạn có thể sử dụng đối tượng sửa đổi focusable của Compose cho những thành phần chỉ có thể lấy tiêu điểm. Tương tự, bạn có thể tạo một bề mặt có thể nhấp bằng cách sử dụng đối tượng sửa đổi clickable của Compose. Bạn cũng có thể sử dụng các đối tượng sửa đổi khác cho những bề mặt cần có hành động.

Đoạn mã sau đây cho thấy ví dụ về cả bề mặt có thể lấy tiêu điểm và có thể nhấp:

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

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

  • Nguồn tương tác dùng chung cho các nền tảng có thể lấy tiêu điểm: Cả .surface() và .focusable() đều phải dùng chung interactionSource. Điều này cho phép thành phần phản ứng với các thay đổi về tiêu điểm.

  • Nguồn tương tác được chia sẻ cho các nền tảng có thể nhấp: Cả .surface() và .clickable() đều phải dùng chung 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 hoạt động đầ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, nên việc đặt bố cục này trước .clickable() sẽ đả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 đường biên 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 bề mặt ở 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.