此页面由 Cloud Translation API 翻译。

创建目录浏览器

在电视上运行的媒体应用需要允许用户浏览其内容然后进行选择，然后开始播放内容。内容浏览为此类应用提供简单、直观且直观的令人愉悦且引人入胜。

媒体目录浏览器通常由多个部分组成具有媒体内容列表。媒体目录中的部分示例包括：播放列表、精选内容和推荐类别

使用 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 演示了这 LazyColumn 的横向版本同样用于通过调用以下代码，使用 LazyListScope.() -> Unit 代码块定义一个水平列表：提供的 DSL：

@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 对象。 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。以下代码段显示了 FeaturedCarousel 可组合项，位于所有 Section 可组合项：

@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)
    }
  }
}

本指南涵盖的主题

构建详情屏幕