Criar uma tela de detalhes

Muitos apps de TV incluem páginas de detalhes com metadados relevantes para um determinado conteúdo (ou seja, um filme específico). As páginas de detalhes podem ser implementadas como uma função combinável, usando 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 em questão com o título e a descrição. O usuário pode fazer uma transição de tela 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)
       }
     }
  }
}