Các danh sách có Compose cho Wear OS

Danh sách cho phép người dùng chọn một mục trong một tập hợp các lựa chọn trên thiết bị Wear OS.

Nhiều thiết bị Wear OS sử dụng màn hình tròn, điều này khiến bạn khó xem được các mục trong danh sách xuất hiện ở gần đầu và cuối màn hình. Vì lý do này, Compose cho Wear OS thêm một phiên bản của lớp LazyColumn có tên là TransformingLazyColumn. Phiên bản này hỗ trợ các hiệu ứng chuyển tỉ lệ và biến đổi. Khi các mục di chuyển ra rìa, chúng sẽ nhỏ hơn và mờ dần.

Cách áp dụng hiệu ứng thu phóng và cuộn được đề xuất:

  1. Sử dụng Modifier.transformedHeight để cho phép Compose tính toán sự thay đổi chiều cao khi mục cuộn qua màn hình.
  2. Sử dụng transformation = SurfaceTransformation(transformationSpec) để áp dụng các hiệu ứng hình ảnh, bao gồm cả việc thu nhỏ nội dung của mục.
  3. Sử dụng TransformationSpec tuỳ chỉnh cho các thành phần không lấy transformation làm tham số, chẳng hạn như Text.

Ảnh động sau đây cho thấy cách một phần tử danh sách chuyển tỉ lệ và thay đổi hình dạng khi tiến đến đầu và cuối màn hình:

Đoạn mã sau đây cho biết cách tạo danh sách bằng bố cục TransformingLazyColumn để tạo nội dung hiển thị đẹp mắt trên nhiều kích thước màn hình Wear OS.

Đoạn mã này cũng minh hoạ cách sử dụng đối tượng sửa đổi minimumVerticalContentPadding mà bạn nên đặt trên các mục trong danh sách để áp dụng khoảng đệm chính xác ở đầu và cuối danh sách.

Để hiện chỉ báo cuộn, hãy chia sẻ columnState giữa ScreenScaffold và TransformingLazyColumn:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

Thêm hiệu ứng chụp nhanh và hất

Nếu bạn cần thêm hành vi hất và trượt nhanh, hãy đặt tham số flingBehavior thành TransformingLazyColumnDefaults.snapFlingBehavior(columnState), như minh hoạ trong đoạn mã sau: 
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState),
        rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
List.kt