Utwórz ekran szczegółów

Wiele aplikacji telewizyjnych zawiera strony z informacjami o treściach, na których znajdują się odpowiednie metadane dotyczące danego elementu (np. konkretnego filmu). Strony szczegółów można zaimplementować jako funkcję kompozycyjną, która przyjmuje metadane wybranej treści jako argument.

Poniższy kod to typowa implementacja ekranu szczegółów. Wczytuje obraz danego filmu wraz z tytułem i opisem. Użytkownik może przejść do ekranu odtwarzacza, klikając przycisk, który rozpoczyna odtwarzanie filmu. Możesz obsłużyć to działanie, aby przejść do ekranu, ustawiając funkcję wywołania zwrotnego.

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

Uwaga: AsyncImage to komponent, który umożliwia wczytywanie obrazów z internetu. Więcej informacji znajdziesz w artykule Wczytywanie obrazów.