Controle NavigationBar

NavigationBar é um componente da barra de navegação no estilo Material 3. Barras de navegação são dispostas ao fundo da página do aplicativo e podem conter diversos controles de seleção, chamados NavigationBarDestination que podem ser selecionados com um clique. Essa é uma forma conveniente de alternar entre destinos em um aplicativo.

Propriedades de NavigationBar

As seguintes propriedades estão definidas para o controle NavigationBar:

Propriedade	Descrição
adaptive	booleano, default False. Se adaptive=True uma barra adaptável será criada. No iOS/MacOS uma CupertinoNavigationBar é criada, com funcionalidade e apresentação correspondentes ao padrão do iOS. Em outras plataformas a barra tem a apresentação do estilo Material.
animation_duration	tempo de transição para os ícones de destino para mudar de selecionado para não selecionado.
bgcolor	cor da barra de navegação.
destinations	define os botões dispostos dentro da barra de navegação, inclusive sua aparência. Deve ser uma lista de duas ou mais instâncias de NavigationBarDestination.
elevation	elevação da barra de navegação.
indicator_color	cor do indicador de destino selecionado.
indicator_shape	formato do indicador de destino selecionado. O valor é do tipo OutlinedBorder.
label_behavior	define a disposição dos rótulos de destinos e quando serão exibidos.É possível exibir ou ocultar todos os rótulos, ou mostrar apenas aquele selecionado. O valor é do tipo NavigationBarLabelBehavior e o padrão é NavigationBarLabelBehavior.ALWAYS_SHOW (sempre exibido).
overlay_color	cor de destaque do NavigationDestination em vários estados† ControlState. Os seguintes valores de ControlState são suportados: PRESSED, HOVERED e FOCUSED.
selected_index	índice do destino selecionado (o último NavigationBarDestination selecionado), ou None se nenhum destino foi selecionado.
shadow_color	cor usada na sombra que indica elevação.
surface_tint_color	tonalidade da superfície Material que contém o conteúdo do NavigationDrawer.

Nota † ControlState é um enum com os valores: DEFAULT, DISABLED, DRAGGED, ERROR, FOCUSED, HOVERED, PRESSED, SELECTED, SCROLLED_UNDER.

Eventos da NavigationBar

Os controles NavigationBarDestination não possuem nenhum evento associado. O único evento do conjunto está na troca de seleção entre as opções dispostas na NavigationBar.

Evento	Descrição
on_change	dispara quando o destino é alterado, por exemplo por meio de um clique nos botões de destino.

Propriedades de NavigationBarDestination

 

Propriedade	Descrição
bgcolor	cor do botão de destino.
icon	nome do ícone do botão de destino.
icon_content	ícone usado dentro do destino (em vez da propriedade icon). Se selected_icon_content for fornecido essa propriedade só será exibida quando o destino não estiver selecionado.
label	rótulo (texto) que aparece abaixo do ícone do NavigationBarDestination.
selected_icon	ícone alternativo para exibição quando o destino é selecionado.
selected_icon_content	um controle de ícone alternativo exibido quando este destino é selecionado. Se este controle não for fornecido, a NavigationBar exibirá icon_content em qualquer estado.

Exemplo de Uso da NavigationBar e NavigationBarDestination

import flet as ft

def main(page: ft.Page):
    page.horizontal_alignment = "center"
    page.bgcolor=ft.colors.BLUE_100
    page.title = "Exemplo de NavigationBar"
    controle=["Explorar", "Carona", "Ônibus", "Apagar"]

    def mostrar_barra(e):
        nav_barra.visible=not nav_barra.visible
        bt.text=f"{'Ocultar' if nav_barra.visible else 'Exibir'} Barra de Navegação"
        mensagem.value += f"\nVocê {'exibiu' if nav_barra.visible else 'ocultou'} a Barra de Navegação"
        page.update()

    def mudou_destino(e):
        if e.control.selected_index==3:
            mensagem.value="Suas ações serão vistas aqui:\n"
        else:
            mensagem.value += f"\nVocê selecionou o botão {controle[e.control.selected_index]}"
        page.update()

    nav_barra=ft.NavigationBar(
        visible=False,
        destinations=[
            ft.NavigationBarDestination(icon=ft.icons.EXPLORE, label="Explorar"),
            ft.NavigationBarDestination(icon=ft.icons.PERSON, label="Carona"),
            ft.NavigationBarDestination(icon=ft.icons.DIRECTIONS_BUS, label="Ônibus"),
            ft.NavigationBarDestination(
                icon=ft.icons.HIDE_IMAGE,
                selected_icon=ft.icons.HIDE_SOURCE,
                label="Apagar"
            ),
        ],
        on_change=mudou_destino
    )
    page.navigation_bar = nav_barra
    mensagem=ft.Text("Suas ações serão vistas aqui:\n", color=ft.colors.BLACK)
    bt=ft.ElevatedButton("Exibir NavigationBar", on_click=mostrar_barra)
    page.add(bt, mensagem)

ft.app(target=main)

A figura 1 mostra o estado do aplicativo em execução. A primeira imagem é o estado após a exibição da barra de navegação e clique no botão Explorar. Ao lado o resultado do clique no botão Apagar.