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.

Để thêm hiệu ứng thu phóng và cuộn, hãy 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 thu nhỏ mục một cách trực quan cho phù hợp với mục trước đó. 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 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 hiển thị đẹp mắt trên nhiều kích thước màn hình Wear OS, chẳng hạn như trong đoạn 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à phần tử 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 hất và nhấp, bạn nên 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