Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Muchas apps para TVs incluyen páginas de detalles del contenido con metadatos relevantes para un contenido determinado (es decir, una película específica). Las páginas de detalles se pueden implementar como una función componible que toma los metadatos del contenido seleccionado como su argumento.
El siguiente código es una implementación típica de la pantalla de detalles. Carga una imagen de la película proporcionada con su título y descripción. El usuario puede hacer una transición de pantalla a la pantalla del reproductor, que se puede activar haciendo clic en un botón para iniciar la reproducción de la película. Puedes controlar esta acción para realizar la transición de pantalla configurando una función de devolución de llamada.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-08-21 (UTC)
[null,null,["Última actualización: 2025-08-21 (UTC)"],[],[],null,["Many TV apps include content detail pages with relevant metadata for a given\npiece of content (i.e. a specific movie). Detail pages can be implemented as a\ncomposable function, taking metadata of the selected content as its argument.\n\nThe following code is a typical implementation of the details screen. It\n[loads an image](/jetpack/compose/graphics/images/loading#internet-loading)\nof the given movie with its title and description. The user's able to make a\nscreen transition to the player screen, which can be triggered by clicking a\nbutton to start movie playback. You can handle this action to make the screen\ntransition by setting a callback function. \n\n @Composable\n fun DetailsScreen(\n movie: Movie,\n modifier: Modifier = Modifier,\n onStartPlayback: (Movie) -\u003e Unit = {}\n ) {\n Box(modifier = modifier.fillMaxSize()){\n AsyncImage(\n modifier = Modifier.fillMaxSize()\n model = movie.image,\n contentDescription = null,\n contentScale = ContentScale.Crop,\n )\n Column(modifier = Modifier.padding(32.dp)){\n Text(\n text = movie.title,\n style = MaterialTheme.typeography.heading2\n )\n Text(text = movie.description)\n Button(onClick = { onStartPlayBack(movie) }){\n Text(text = R.string.startPlayback)\n }\n }\n }\n }\n\n| **Note:** `AsyncImage` is a composable to load an image from the internet. See [Loading Images](/develop/ui/compose/graphics/images/loading#internet-loading) for details."]]