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.
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
ePosture
; - adaptive-layout: layouts adaptáveis, como
ListDetailPaneScaffold
eSupportingPaneScaffold
- 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) : Parcelable
Crie um
ThreePaneScaffoldNavigator
comrememberListDetailPaneScaffoldNavigator
e adicione umBackHandler
. 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, qualMyItem
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. OBackHandler
oferece suporte para navegar de volta usando o gesto ou o botão "Voltar" do sistema. O comportamento esperado do botão "Voltar" para umaListDetailPaneScaffold
depende do tamanho da janela e do valor atual de scaffold. Se oListDetailPaneScaffold
oferecer suporte à volta com o estado atual,canNavigateBack()
serátrue
, ativando oBackHandler
.val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
Transmita o
scaffoldState
donavigator
para o elemento combinávelListDetailPaneScaffold
.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, // ... )
Forneça a implementação do painel de lista ao
ListDetailPaneScaffold
. UseAnimatedPane
para aplicar as animações de painel padrão durante a navegação. Em seguida, useThreePaneScaffoldNavigator
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) } ) } }, // ... )
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 propriedadecontent
é 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) } } }, )
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) } } }, )