建構詳細資料畫面

許多電視應用程式都包含內容詳細資料頁面,其中會顯示特定內容 (即特定電影) 的相關中繼資料。詳細資料頁面可以實作為可組合函式,並將所選內容的中繼資料做為引數。

以下程式碼是詳細資料畫面的典型實作方式。系統會載入指定電影的圖片,並顯示片名和說明。使用者可以點選按鈕開始播放電影,觸發畫面轉換至播放器畫面。您可以設定回呼函式來處理這項動作,讓畫面轉換。

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