在电视上运行的媒体应用需要允许用户浏览其提供的内容、选择要播放的内容，以及开始播放内容。此类应用的内容浏览体验应简单直观，并且在视觉上要赏心悦目。
媒体目录浏览器通常由多个部分组成，每个部分都包含媒体内容列表。媒体目录中的部分示例包括：播放列表、精选内容、推荐类别。
使用 Compose for TV 提供的函数来实现一个界面，该界面可让用户浏览应用的媒体目录中包含的音乐或视频。
为目录创建可组合函数
显示屏上显示的所有内容都是在 Compose for TV 中作为可组合函数实现的。首先，为媒体目录浏览器定义一个可组合函数：
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
// ToDo: add implementation
}
CatalogBrowser 是用于实现媒体目录浏览器的可组合函数。该函数接受以下参数：
- 精选内容列表。
- 章节列表。
- 修饰符对象。
- 用于触发屏幕转换的回调函数。
设置界面元素
Compose for TV 提供延迟列表，这是一种用于显示大量项（或长度未知的列表）的组件。调用 LazyColumn 可垂直放置部分。LazyColumn 提供了 LazyListScope.() -> Unit 块，该块提供了用于定义项内容的 DSL。在以下示例中，每个部分都放置在垂直列表中，各部分之间相距 16 dp：
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
LazyColumn(
modifier = modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
items(sectionList) { section ->
Section(section, onItemSelected = onItemSelected)
}
}
}
在该示例中，Section 可组合函数定义了如何显示部分。在以下函数中，LazyRow 演示了如何通过调用提供的 DSL 以类似方式使用此水平版 LazyColumn 来定义包含 LazyListScope.() -> Unit 块的水平列表：
@Composable
fun Section(
section: Section,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
Text(
text = section.title,
style = MaterialTheme.typography.headlineSmall,
)
LazyRow(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
items(section.movieList){ movie ->
MovieCard(
movie = movie,
onClick = { onItemSelected(movie) }
)
}
}
}
在 Section 可组合项中，使用 Text 组件。tv-material 库中提供了 Material Design 中定义的文本和其他组件。您可以通过引用 MaterialTheme 对象来更改文本的样式（如 Material Design 中所定义）。tv-material 库也提供此对象。Card 是 tv-material 库的一部分。MovieCard 定义了如何在目录中呈现每项电影数据，如下代码段所定义：
@Composable
fun MovieCard(
movie: Movie,
modifier: Modifier = Modifier,
onClick: () -> Unit = {}
) {
Card(modifier = modifier, onClick = onClick){
AsyncImage(
model = movie.thumbnailUrl,
contentDescription = movie.title,
)
}
}
突出显示精选内容
在前面所述的示例中，所有电影都会以相同的方式显示。它们的面积相同，没有视觉差异。您可以使用 Carousel 突出显示其中一些内容。
轮播界面会以一组可滑动、淡出或移动到视野中的项的形式显示信息。您可以使用此组件突出显示精选内容，例如新上映的电影或电视节目的新剧集。
Carousel 要求您至少指定轮播界面包含的项数以及如何绘制每个项。第一个可以使用 itemCount 指定。第二个参数可以作为 lambda 传递。系统会将显示的项的索引编号提供给 lambda。您可以使用给定的索引值确定显示的项：
@Composable
function FeaturedCarousel(
featuredContentList: List<Movie>,
modifier: Modifier = Modifier,
) {
Carousel(
itemCount = featuredContentList.size,
modifier = modifier,
) { index ->
val content = featuredContentList[index]
Box {
AsyncImage(
model = content.backgroundImageUrl,
contentDescription = content.description,
placeholder = painterResource(
id = R.drawable.placeholder
),
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxSize()
)
Text(text = content.title)
}
}
}
Carousel 可以是延迟列表的项，例如 TvLazyColumn。以下代码段显示了所有 Section 可组合项之上的 FeaturedCarousel 可组合项：
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
TvLazyColumn(
modifier = modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
item {
FeaturedCarousel(featuredContentList)
}
items(sectionList) { section ->
Section(section, onItemSelected = onItemSelected)
}
}
}