Detalhes e listas são um padrão de interface que consiste em um layout de painel duplo em que um painel apresenta uma lista de itens e outro painel exibe os detalhes dos itens selecionados da lista.
O padrão é particularmente útil para aplicativos que oferecem informações sobre elementos de grandes coleções, por exemplo, um cliente de e-mail com uma lista de e-mails e o conteúdo detalhado de cada mensagem. Os detalhes e listas também podem ser usados para caminhos menos críticos, como dividir o app preferências em uma lista de categorias, com as preferências de cada categoria em no painel de detalhes.
Implementar o padrão da interface com ListDetailPaneScaffold
ListDetailPaneScaffold
é um elemento combinável que simplifica a implementação de
o padrão de detalhes e listas no app. Um scaffolding de detalhes e listas pode consistir em até
três painéis: um painel de lista, um painel de detalhes e um painel extra opcional. A
scaffold lida com cálculos de espaço de tela. Quando o tamanho de tela suficiente for
disponível, o painel de detalhes é exibido ao lado do painel de lista. Em uma tela pequena
tamanhos, o scaffold muda automaticamente para a exibição da lista ou
tela cheia do painel de detalhes.
![Um painel de detalhes ao lado da página da lista.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/list-detail-2.png?authuser=0000&hl=pt-br)
![Depois que um item é selecionado, o painel de detalhes cobre a tela inteira.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/list-detail-1.png?authuser=0000&hl=pt-br)
Declarar dependências
ListDetailPaneScaffold
faz parte do layout adaptável do Material 3.
biblioteca.
Adicione as três dependências relacionadas a seguir ao arquivo build.gradle
da sua
app ou módulo:
Kotlin
implementation("androidx.compose.material3.adaptive:adaptive") implementation("androidx.compose.material3.adaptive:adaptive-layout") implementation("androidx.compose.material3.adaptive:adaptive-navigation")
Groovy
implementation 'androidx.compose.material3.adaptive:adaptive' implementation 'androidx.compose.material3.adaptive:adaptive-layout' implementation 'androidx.compose.material3.adaptive:adaptive-navigation'
- adaptativo: elementos básicos de baixo nível, como
HingeInfo
ePosture
- adaptive-layout: layouts adaptáveis como
ListDetailPaneScaffold
eSupportingPaneScaffold
- adaptive-navigation: elementos combináveis para navegar dentro e entre os painéis
Uso básico
Implemente ListDetailPaneScaffold
desta maneira:
Use uma classe que represente o conteúdo a ser selecionado. Esta turma precisa ser
Parcelable
para oferecer suporte ao salvamento e restaurando o item selecionado. Usar a classe kotlin-parcelize plug-in para gerar o código.@Parcelize class MyItem(val id: Int) : Parcelable
Crie uma
ThreePaneScaffoldNavigator
comrememberListDetailPaneScaffoldNavigator
e adicionar umBackHandler
. Isso Navigator é usado para mover entre a lista, os detalhes e os painéis extras. De declarando um tipo genérico, o navegador também rastreia o estado da scaffold, ou seja, qualMyItem
está sendo exibido. Como esse tipo é parcelable, o estado pode ser salvo e restaurado pelo navegador para processam automaticamente as mudanças de configuração. ABackHandler
é compatível com a navegação de volta usando o gesto "Voltar" do sistema; ou . O comportamento esperado do botão "Voltar" em umaListDetailPaneScaffold
depende do tamanho da janela e do scaffolding atual. . Se oListDetailPaneScaffold
oferecer suporte à reversão com o estado atual,canNavigateBack()
serátrue
, ativando aBackHandler
.val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
Transmita o
scaffoldState
donavigator
para oListDetailPaneScaffold
combinável.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, // ... )
Forneça a implementação do painel de lista ao
ListDetailPaneScaffold
. UsarAnimatedPane
para aplicar as animações de painel padrão durante a navegação. Em seguida, useThreePaneScaffoldNavigator
para acessar o painel de detalhes.ListDetailPaneScaffoldRole.Detail
e exibe 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) } ) } }, // ... )
Inclua a implementação do painel de detalhes em
ListDetailPaneScaffold
. Quando a navegação for concluída, o arquivocurrentDestination
vai conter o painel que pelo app, incluindo o conteúdo exibido no painel. A A propriedadecontent
é do mesmo tipo especificado na chamada de remember original. (MyItem
neste exemplo), de modo que você também pode acessar a propriedade para quaisquer dados que você precisa exibir.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = // ... detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { MyDetails(it) } } }, )
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) } } }, )