显示列表或网格 | 集合

显示列表或网格集合

使用列表和网格高效地显示和排列项目集合。

@Composable
private fun ScrollBoxes() {
    Column(
        modifier = Modifier
            .background(Color.LightGray)
            .size(100.dp)
            .verticalScroll(rememberScrollState())
    ) {
        repeat(10) {
            Text("Item $it", modifier = Modifier.padding(2.dp))
        }
    }
}

创建有限可滚动的列表

在一个可滚动的列表中显示有限的项目集，以管理数据集、创建响应式设计并促进导航。

指南

val itemsList = (0..5).toList()

val itemModifier = Modifier.border(1.dp, Color.Blue).width(80.dp).wrapContentSize()

LazyHorizontalGrid(
    rows = GridCells.Fixed(3),
    horizontalArrangement = Arrangement.spacedBy(16.dp),
    verticalArrangement = Arrangement.spacedBy(16.dp)
) {
    items(itemsList) {
        Text("Item is $it", itemModifier)
    }

    item {
        Text("Single item", itemModifier)
    }

}

创建可滚动的网格

使用惰性网格创建可滚动网格，以管理大型数据集和动态内容。

指南

LazyColumn {
    items(
        messages,
        key = { it.id },
        contentType = { it.type }
    ) { message ->
        when (message) {
            is Audio -> AudioMessge(message)
            is Text -> TextMessage(message)
}

使用多种项目类型构建列表

使用多种项目类型的列表显示混合内容类型，例如文本、图像和交互式元素。

指南

val lazyPagingItems = pager.flow.collectAsLazyPagingItems()

LazyColumn {
    items(
        lazyPagingItems.itemCount,
        key = lazyPagingItems.itemKey { it.id }
    ) { index ->
        val message = lazyPagingItems[index]
        if (message != null) {
          MessageRow(message)
        } else {
            MessagePlaceholder()
        }
    }
}


@Composable
fun MessagePlaceholder() {
    Box(Modifier.fillMaxWidth().height(48.dp)) {
        CircularProgressIndicator()
    }
}

@Composable
fun TextMessage(message: Text) {
    Card(modifier = Modifier.padding(8.dp)) {
        Column(
            modifier = Modifier.padding(8.dp),
            verticalArrangement = Arrangement.Center
        ) {
            Text(message.sender)
            Text(message.text)
        }
    }
}

使用列表和分页惰性加载数据

逐步加载和显示大型列表，减少初始加载时间并优化内存使用。

指南

val scrollState = rememberScrollState()

Column(
    modifier = Modifier
        .fillMaxWidth()
        .verticalScroll(scrollState),
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(500.dp)
            .background(Color.White)
            .graphicsLayer {
                translationY = 0.5f * scrollState.value
            },
        contentAlignment = Alignment.Center
    ) {
        Image(
            painterResource(id = R.drawable.android_logo_vector),
            contentDescription = "Android logo",
            contentScale = ContentScale.FillWidth,
            modifier = Modifier.fillMaxSize()
        )
    }
    Text(
        text = stringResource(R.string.lorem_ipsum),
        modifier = Modifier
            .background(Color.White)
            .padding(horizontal = 8.dp),
        style = TextStyle(fontSize = 24.sp),
        color = Color.Black,
        textAlign = TextAlign.Justify
    )
}

创建视差滚动效果

在应用的 UI 中实现视差滚动，以创建更具动态性的用户体验。

指南

LazyColumn {
    items(verticalListItems) {
        Column {
            Text(
                text = it.title,
                style = MaterialTheme.typography.titleLarge,
                modifier = Modifier.padding(horizontal = 8.dp)
            )
            LazyRow(
                contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
                horizontalArrangement = Arrangement.spacedBy(4.dp),
            ) {
                items(it.pictures) {
                    Card {
                        AsyncImage(
                            model = it.url,
                            contentDescription = “A remote image”,
                        )
                    }
                }
            }
        }
    }
}

在列表中显示嵌套滚动的项目

在可滚动列表中显示嵌套项目以呈现复杂的布局。

指南

@Composable
fun MessageList() {
    val listState = rememberLazyListState()
    // Remember a CoroutineScope to be able to launch
    val coroutineScope = rememberCoroutineScope()

    LazyColumn(state = listState, modifier = Modifier.height(120.dp)) {
        items(10, { index -> index }) {
            Text(
                modifier = Modifier.height(40.dp),
                text = "Item $it"
            )
        }
    }

    Button(onClick = {
        coroutineScope.launch {
            // Animate scroll to the first item
            listState.animateScrollToItem(index = 0)
        }
    }) {
        Text(text = "Go top")
    }
}

创建按钮以启用吸附滚动

吸附滚动允许用户滚动到列表上的某个点，从而节省时间并提高用户与内容的互动度。

指南

// Display 10 items
val pagerState = rememberPagerState(pageCount = {
    10
})
HorizontalPager(state = pagerState) { page ->
    // Our page content.
    Text(
        text = "Page: $page",
        modifier = Modifier.fillMaxWidth()
    )
}