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 ảnh động. Khi các mục di chuyển đến các cạnh, chúng sẽ nhỏ hơn và mờ dần.

Để thêm hiệu ứng cuộn và điều chỉnh tỷ lệ, hãy sử dụng Modifier.transformedHeight để cho phép Compose tính toán sự thay đổi về chiều cao khi mục cuộn qua màn hình và transformation = SurfaceTransformation(transformationSpec) để áp dụng hiệu ứng hình ảnh, bao gồm cả việc điều chỉnh tỷ lệ mục để khớp với mục trước đó.

Ảnh động sau đây minh hoạ cách thay đổi kích thước và độ trong suốt của một phần tử khi phần tử đó di chuyển dọc theo 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 nhìn rất đẹp trên nhiều kích thước màn hình Wear OS, ví dụ: trong mã mẫu sau, đoạn mã này sẽ thêm khoảng đệm cần thiết vào phần tử đầu tiên và cuối cùng của danh sách được đặt trong contentPadding của TransformingLazyColumn. Để chỉ báo cuộn xuất hiện, hãy chia sẻ columnState giữa ScreenScaffold và TransformingLazyColumn:

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                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 cần thêm hành vi chụp nhanh và hất, bạn nên sử dụng ScalingLazyColumn. Nhờ hiệu ứng này, người dùng có thể di chuyển chính xác hơn qua các mục trong một danh sách, đồng thời họ có thể di chuyển nhanh hơn qua một danh sách dài.

Để thêm hiệu ứng này vào phiên bản ScalingLazyColumn của Horologist, hãy đặt tham số rotaryMode của columnState thành RotaryWithSnap, như minh hoạ trong đoạn mã sau:

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt