Criar uma tela de detalhes

Muitos apps de TV incluem páginas de detalhes do conteúdo com metadados relevantes para um determinado conteúdo (por exemplo, um filme específico). As páginas de detalhes podem ser implementadas como uma função combinável, usando os metadados do conteúdo selecionado como argumento.

O código a seguir é uma implementação típica da tela de detalhes. Ele carrega uma imagem do filme especificado com o título e a descrição. O usuário pode fazer uma transição para a tela do player, que pode ser acionada clicando em um botão para iniciar a reprodução do filme. É possível processar essa ação para fazer a transição da tela definindo uma função de callback.

@Composable
fun DetailsScreen(
  movie: Movie,
  modifier: Modifier = Modifier,
  onStartPlayback: (Movie) -> Unit = {}
) {
  Box(modifier = modifier.fillMaxSize()){
     AsyncImage(
       modifier = Modifier.fillMaxSize()
       model = movie.image,
       contentDescription = null,
       contentScale = ContentScale.Crop,
     )
     Column(modifier = Modifier.padding(32.dp)){
       Text(
         text = movie.title,
         style = MaterialTheme.typeography.heading2
       )
       Text(text = movie.description)
       Button(onClick = { onStartPlayBack(movie) }){
         Text(text = R.string.startPlayback)
       }
     }
  }
}

Observação: AsyncImage é um elemento combinável para carregar uma imagem da Internet. Consulte Como carregar imagens para mais detalhes.