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à ScalingLazyColumn. Phiên bản này hỗ trợ các hiệu ứng chuyển tỉ lệ và làm mờ. Khi các mục di chuyển về giữa màn hình, chúng sẽ trở nên lớn hơn và mờ hơn.

Ả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 cách sử dụng Horologist phiên bản của bố cục ScalingLazyColumn để tạo nội dung giao diện đẹp mắt trên nhiều kích thước màn hình Wear OS, chẳng hạn như trong ví dụ bên dưới, thao tác 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 thiết lập ở scrollState của ScalingLazyColumn:

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

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

Bạn có thể thêm thao tác chụp nhanh và hất vào các cử chỉ của ngón tay mà người dùng áp dụng cho các đối tượ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.

Cách thêm hiệu ứng này vào phiên bản ScalingLazyColumn của Horologist: đặ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