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 chứa văn bản cho từng mục:

val contentModifier = Modifier
    .fillMaxWidth()
    .padding(bottom = 8.dp)

@Composable
fun WearApp() {
    WearAppTheme {
        // Hoist the list state to remember scroll position across compositions.
        val listState = rememberScalingLazyListState()

        ScalingLazyColumn(
            modifier = Modifier.fillMaxSize(),
            autoCentering = AutoCenteringParams(itemIndex = 0),
            state = listState
        ) {
            item { TextItem(contentModifier, stringResource(R.string.first)) }
            item { TextItem(contentModifier, stringResource(R.string.second)) }
        }
    }
}

@Composable
fun TextItem(modifier: Modifier = Modifier, contents: String) {
    Text(
        modifier = modifier,
        textAlign = TextAlign.Center,
        text = contents
    )
}

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.

Để thêm hiệu ứng này vào một danh sách hoặc bộ chọn trong ứng dụng, hãy đưa tham số flingBehavior vào định nghĩa ScalingLazyColumn, như minh hoạ trong đoạn mã sau:

ScalingLazyColumn(
    modifier = modifier ...,
    flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(
        state = listState,
        snapOffset = 0
        // Exponential decay by default. You can also explicitly define a
        // DecayAnimationSpec.
    ) {
        // Contents of the list here.
}

Để áp dụng thao tác chụp nhanh và hất tương tự cho ScalingLazyColumn khi người dùng tương tác với mặt đồng hồ xoay, hãy sử dụng RotaryWithSnap có trong Horologist trên GitHub.