本頁面由 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 是實作媒體目錄瀏覽器的可組合函式。這個函式採用下列引數：

精選內容清單。
版面清單。
修飾符物件。
回呼函式，用於觸發畫面轉換。

設定 UI 元素

Compose for TV 提供 Lazy 清單，這是用來顯示大量項目 (或長度未知的清單) 的元件。呼叫 TvLazyColumn 即可垂直放置區段。TvLazyColumn 提供 TvLazyListScope.() -> Unit 區塊，可提供用於定義項目內容的 DSL。在以下範例中，每個區段都位於垂直清單中，區段之間間距為 16 dp：

@Composable
fun CatalogBrowser(
   featuredContentList: List<Movie>,
   sectionList: List<Section>,
   modifier: Modifier = Modifier,
   onItemSelected: (Movie) -> Unit = {},
) {
  TvLazyColumn(
    modifier = modifier.fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(16.dp)
  ) {
    items(sectionList) { section ->
      Section(section, onItemSelected = onItemSelected)
    }
  }
}

在範例中，Section 可組合函式會定義顯示區段的方式。在以下函式中，TvLazyRow 示範這個水平版本的 TvLazyColumn 如何類似於呼叫提供的 DSL，以定義具有 TvLazyListScope.() -> Unit 區塊的水平清單：

@Composable
fun Section(
  section: Section,
  modifier: Modifier = Modifier,
  onItemSelected: (Movie) -> Unit = {},
) {
  Text(
    text = section.title,
    style = MaterialTheme.typography.headlineSmall,
  )
  TvLazyRow(
     modifier = modifier,
     horizontalArrangement = Arrangement.spacedBy(8.dp)
  ) {
    items(section.movieList){ movie ->
    MovieCard(
         movie = movie,
         onClick = { onItemSelected(movie) }
       )
    }
  }
}

請在 Section 可組合函式中使用 Text 元件。Material Design 中定義的文字和其他元件可在 tv-material 程式庫取得。您可以參照 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 可以是 Lazy 清單的項目，例如 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)
    }
  }
}

在這份指南中

建構詳細資料畫面