Esta página foi traduzida pela API Cloud Translation.

Criar um layout de detalhes e listas

Detalhes de lista é um padrão de interface que consiste em um layout de painel duplo em que um painel apresenta uma lista de itens e outro mostra os detalhes dos itens selecionados na lista.

O padrão é particularmente útil para aplicativos que fornecem informações detalhadas sobre elementos de grandes coleções, por exemplo, um cliente de e-mail que tenha uma lista de e-mails e o conteúdo detalhado de cada mensagem de e-mail. Os detalhes e listas também podem ser usados para caminhos menos críticos, como dividir as preferências do app em uma lista de categorias com as preferências de cada categoria no painel de detalhes.

Implementar o padrão da interface com `ListDetailPaneScaffold`

ListDetailPaneScaffold é um elemento combinável que simplifica a implementação do padrão de detalhes e listas no app. Um scaffolding de detalhes e listas pode consistir em até três painéis: um de lista, um de detalhes e um painel extra opcional. O scaffold processa cálculos de espaço na tela. Quando um tamanho de tela suficiente estiver disponível, o painel de detalhes será exibido ao lado do painel de lista. Em telas pequenas, o scaffold muda automaticamente para a exibição da tela cheia do painel de lista ou de detalhes.

Um painel de detalhes ao lado da página da lista. — **Figura 1**. Quando um tamanho de tela suficiente estiver disponível, o painel de detalhes será mostrado ao lado do painel de lista.

Depois que um item é selecionado, o painel de detalhes cobre a tela inteira. — **Figura 2.** Quando o tamanho da tela é limitado, o painel de detalhes (já que um item foi selecionado) ocupa todo o espaço.

Declarar dependências

O ListDetailPaneScaffold faz parte da biblioteca de layout adaptável do Material 3.

O app precisa incluir dependências para três bibliotecas relacionadas do Material 3:

adaptativo: elementos básicos de baixo nível, como HingeInfo e Posture;
adaptive-layout: layouts adaptáveis, como ListDetailPaneScaffold e SupportingPaneScaffold
- adaptive-navigation: elementos combináveis para navegar dentro e entre os painéis.

Adicione as dependências ao arquivo build.gradle do app ou módulo:

Kotlin


implementation("androidx.compose.material3.adaptive:adaptive:1.0.0-alpha12")
implementation("androidx.compose.material3.adaptive:adaptive-layout:1.0.0-alpha12")
implementation("androidx.compose.material3.adaptive:adaptive-navigation:1.0.0-alpha12")

Groovy


implementation 'androidx.compose.material3.adaptive:adaptive:1.0.0-alpha12'
implementation 'androidx.compose.material3.adaptive:adaptive-layout:1.0.0-alpha12'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation:1.0.0-alpha12'

Uso básico

Implemente ListDetailPaneScaffold desta maneira:

Use uma classe que represente o conteúdo a ser selecionado. Essa classe precisa ser Parcelable para oferecer suporte ao salvamento e à restauração do item da lista selecionado. Use o plug-in do kotlin-parcelize (link em inglês) para gerar o código.
```
@Parcelize
class MyItem(val id: Int) : ParcelableSampleListDetailPaneScaffold.kt
```
Crie um ThreePaneScaffoldNavigator com rememberListDetailPaneScaffoldNavigator e adicione um BackHandler. Esse navegador é usado para percorrer a lista, os detalhes e os painéis extras. Ao declarar um tipo genérico, o navegador também rastreia o estado do scaffolding (ou seja, qual MyItem está sendo exibido). Como esse tipo é parcelável, o estado pode ser salvo e restaurado pelo navegador para processar automaticamente as mudanças de configuração. O BackHandler oferece suporte para navegar de volta usando o gesto ou o botão "Voltar" do sistema. O comportamento esperado do botão "Voltar" para uma ListDetailPaneScaffold depende do tamanho da janela e do valor atual de scaffold. Se o ListDetailPaneScaffold oferecer suporte à volta com o estado atual, canNavigateBack() será true, ativando o BackHandler.
```
val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}SampleListDetailPaneScaffold.kt
```

Transmita o scaffoldState do navigator para o elemento combinável ListDetailPaneScaffold.

ListDetailPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    // ...
)SampleListDetailPaneScaffold.kt

Forneça a implementação do painel de lista ao ListDetailPaneScaffold. Use AnimatedPane para aplicar as animações de painel padrão durante a navegação. Em seguida, use ThreePaneScaffoldNavigator para navegar até o painel de detalhes, ListDetailPaneScaffoldRole.Detail, e exibir o item transmitido.

ListDetailPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    listPane = {
        AnimatedPane {
            MyList(
                onItemClick = { item ->
                    // Navigate to the detail pane with the passed item
                    navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item)
                }
            )
        }
    },
    // ...
)SampleListDetailPaneScaffold.kt

Inclua a implementação do painel de detalhes em ListDetailPaneScaffold. Quando a navegação for concluída, currentDestination conterá o painel pelo qual seu app navegou, incluindo o conteúdo exibido no painel. A propriedade content é o mesmo tipo especificado na chamada de remember original (MyItem neste exemplo). Portanto, você também pode acessar a propriedade para todos os dados que precisar exibir.
```
ListDetailPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    listPane =
    // ...
    detailPane = {
        AnimatedPane {
            navigator.currentDestination?.content?.let {
                MyDetails(it)
            }
        }
    },
)SampleListDetailPaneScaffold.kt
```

Depois de implementar as etapas acima, o código vai ficar parecido com este:

val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}

ListDetailPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    listPane = {
        AnimatedPane {
            MyList(
                onItemClick = { item ->
                    // Navigate to the detail pane with the passed item
                    navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item)
                },
            )
        }
    },
    detailPane = {
        AnimatedPane {
            // Show the detail pane content if selected item is available
            navigator.currentDestination?.content?.let {
                MyDetails(it)
            }
        }
    },
)SampleListDetailPaneScaffold.kt

Criar uma navegação adaptável

Criar um layout de painel de suporte