Layout
Controle Pagelet
O controle Pagelet permite a inserção de uma área no aplicativo usando o layout do Material Design. Com ele podemos criar uma barra de cabeçalho, uma área de conteúdo, uma barra inferior e um menu que surge quando requerido.
Um exemplo simples de uso mostra essas áreas e seus respectivos nomes.
import flet as ft
def main(page: ft.Page):
page.bgcolor=ft.colors.LIGHT_BLUE_ACCENT_700
titulo=ft.Text("Barra superior da Pagelet", color="BLACK")
conteudo=ft.Text("Conteúdo do corpo da Pagelet", color="BLACK")
icone_inferior=ft.IconButton(icon=ft.icons.SEARCH, icon_color=ft.colors.BLUE)
txt_inferior=ft.Text("Texto na barra inferior da Pagelet", color="BLACK")
barra_inferior=ft.Row([icone_inferior, txt_inferior])
menu_direita=[
ft.NavigationDrawerDestination(icon=ft.icons.HOME, label="Em casa"),
ft.NavigationDrawerDestination(icon=ft.icons.HOME_WORK, label="No trabalho")
]
pagelet = ft.Pagelet(
appbar=ft.AppBar(title=titulo, bgcolor=ft.colors.DEEP_ORANGE_200),
content=conteudo,
bgcolor=ft.colors.AMBER_50,
bottom_app_bar=ft.BottomAppBar(
bgcolor=ft.colors.CYAN_ACCENT_700,
content=barra_inferior,
),
end_drawer=ft.NavigationDrawer(controls=menu_direita, bgcolor=ft.colors.BLUE_ACCENT),
width=400,
height=300
)
page.add(pagelet)
ft.app(target=main)
O resultado da execução do código está mostrado na figura 1.
Respectivamente as propriedades de Pagelet correspondem: appbar, a barra superior, cabeçalho do aplicativo;
content, o conteúdo central; bottom_app_bar, a barra inferior; end_drawer uma barra ocultável, normalmente usada para inserir um menu de opções.
Propriedades de Pagelet
| Propriedade | Descrição | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| appbar | controle exibido na parte superior do aplicativo. Geralmente contém texto mas pode conter outros controles | ||||||||||||||||||
| bgcolor | cor de fundo da Pagelet. | ||||||||||||||||||
| bottom_appbar | controle BottomAppBar a ser exibido na parte inferior da Pagelet. Se as propriedades bottom_appbar e navigation_bar estão preenchidas uma barra de navegação NavigationBar também será exibida. | ||||||||||||||||||
| bottom_sheet | uma folha de fundo persistente para exibir conteúdo adicional. Qualquer controle pode ser usado como bottom_sheet. | ||||||||||||||||||
| content | o controle filho da Pagelet, para a exibição de conteúdo. Ele é posicionado em cima, à esquerda, no espaço disponível entre as barras superior e inferior da Pagelet. | ||||||||||||||||||
| drawer | um controle NavigationDrawer a ser exibido como painel deslizante a partir da borda superior da Pagelet. | ||||||||||||||||||
| end_drawer | um controle NavigationDrawer a ser exibido como painel deslizante a partir da borda lateral da Pagelet. | ||||||||||||||||||
| floating_action_button | um controle FloatingActionButton a ser exibido em cima do conteudo da Pagelet. | ||||||||||||||||||
| floating_action_button_location | define a posição do controle FloatingActionButton. O valor é um enum com os valores:
|
||||||||||||||||||
| navigation_bar | é um controle NavigationBar a ser exibido no fundo da página. Se as propriedades bottom_appbar e navigation_bar estão preenchidas uma barra de navegação NavigationBar também será exibida. |
Métodos de Pagelet
| close_drawer() | fecha a gaveta† ativa. |
| close_end_drawer() | fecha a gaveta† ativa na posição à direita. |
| show_drawer(drawer: NavigationDialog) | exibe a gaveta† |
| show_end_drawer(drawer: NavigationDialog) | exibe a gaveta na posição à direita |
† NotaTraduzi drawer por gaveta.
Uso de Pagelet
import flet as ft
def main(page: ft.Page):
page.bgcolor=ft.colors.BLUE_50
citacao=[(
'Há três métodos para ganhar sabedoria: primeiro, por reflexão, '
'que é o mais nobre; segundo, por imitação, que é o mais fácil; '
'e terceiro, por experiência, que é o mais amargo. Confúcio'
),
(
'Todos os seres vivos temem a violência. Todos temem a morte,'
'todos amam a vida. Projete você mesmo em todas as criaturas.'
'Quem você poderia ferir? Que mal você poderia fazer? Buda'
)]
def clicou_algo(e):
mensagem.content.value=e.control.tooltip
page.update()
def selecionar_sabedoria(e):
conteudo.content.value=citacao[e.control.selected_index]
pagelet.end_drawer.open = False
page.update()
def abrir_drawer(e):
pagelet.end_drawer.open = True
pagelet.end_drawer.update()
def fecha_barra_direita(e):
mensagem.content.value="Menu da direita fechado"
page.update()
class Botao(ft.IconButton):
def __init__(self, icon, tip):
super().__init__()
self.icon=icon
self.icon_color=ft.colors.WHITE
self.tooltip=tip
self.on_click=clicou_algo
conteudo = ft.Container(
content=ft.Text(citacao[0], size=19, color="BLACK"),
padding=ft.padding.all(20),
bgcolor=ft.colors.BLUE_300,
border=ft.border.all(3, ft.colors.BLUE_400),
border_radius=ft.border_radius.all(10),
expand=True,
)
barra_inferior = ft.BottomAppBar(
bgcolor=ft.colors.BLUE,
shape=ft.NotchShape.CIRCULAR,
content=ft.Row(
controls=[
Botao(ft.icons.SUNNY, "Escolha seu destino"),
Botao(ft.icons.AIRPLANEMODE_ACTIVE, "Compre sua passagem"),
ft.Container(expand=True),
Botao(ft.icons.HOTEL, "Reserve o seu hotel"),
Botao(ft.icons.ROCKET, "Viaje para mais longe"),
]
)
)
barra_direita=ft.NavigationDrawer(
controls=[
ft.NavigationDrawerDestination(icon=ft.icons.SELECT_ALL, label="Confúcio"),
ft.NavigationDrawerDestination(icon=ft.icons.ADD_COMMENT, label="Buda"),
],
bgcolor=ft.colors.LIGHT_BLUE_ACCENT_700,
on_change=selecionar_sabedoria,
on_dismiss=fecha_barra_direita,
)
pagelet = ft.Pagelet(
appbar=ft.AppBar(
title=ft.Text("Clique no menu para selecionar", color=ft.colors.BROWN),
bgcolor=ft.colors.LIGHT_BLUE_ACCENT_100,
toolbar_height=60,
),
content=conteudo,
bottom_app_bar=barra_inferior,
end_drawer=barra_direita,
floating_action_button=ft.FloatingActionButton("Menu", on_click=abrir_drawer),
floating_action_button_location=ft.FloatingActionButtonLocation.CENTER_DOCKED,
bgcolor=ft.colors.BLUE_600,
width=400,
height=300,
)
mensagem=ft.Container(
ft.Text("Eventos aparecem aqui...", size=17, color=ft.colors.BLACK),
padding=ft.padding.all(20),
bgcolor=ft.colors.BROWN_200,
border=ft.border.all(3, ft.colors.BROWN_300),
border_radius=ft.border_radius.all(10),
width=400,
height=70,
)
page.add(
ft.Container(
content=ft.Column([pagelet,mensagem]),
padding=ft.padding.all(20),
bgcolor=ft.colors.BLUE_300,
border=ft.border.all(3, ft.colors.BLUE_400),
border_radius=ft.border_radius.all(10),
),
)
ft.app(target=main)
O resultado da execução do código está mostrado na figura 2.
Nesse código alguns componentes da Pagelet foram definidos separadamente e inseridas depois no controle. Isso foi feito para tornar o código mais fácil de ser entendido. A definição da classe Botao tem apenas o objetivo de diminuir as repetições de código na montagem da barra_inferior.
Os cliques nos ícones na barra inferior transfere o conteúdo dos tooltips para o container inferior no aplicativo. Cliques no menu deslizante, nos itens Confúcio e Buda alteram o conteúdo de texto do controle central através da função selecionar_sabedoria. A mensagem é selecionada usando e.control.selected_index, que é o índice do controle NavigationDrawerDestination clicado.