Flet, Layout: Page
O objeto page é o primeiro conteiner na construção da árvore de controles do Flet, sendo o único que não está ligado a um conteiner pai. Ele contém o objeto View que, por sua vez abriga todos os outros controles. Uma instância de page e uma view primária são criadas automaticamente quando uma sessão é iniciada.
Vamos primeiro fazer uma descrição dessas propriedades, métodos e eventos, e depois mostrar exemplos de uso. Muitas vezes a mera descrição do elemento é suficiente para que as apliquemos no código. Em alguns casos notas adicionais estão linkadas.
Propriedades de page
Observação: Os itens marcados com o ícone tem disponibilidade restrita:
|
|
| Propriedade | Descrição |
| auto_scroll | True se a barra de scroll deve ser automaticamente posicionada no final se seu filho é atualizado. Necessariamente auto_scroll = False para que o método scroll_to() funcione. |
| appbar | page.appbar recebe uma barra de controle do aplicativo no alto da page (diferente da barra da janela). |
| banner | Controle Banner no alto da página. |
| bgcolor | Cor de fundo da página. |
| client_ip | 🌎 Endereço de IP do usuário conectado. |
| client_user_agent | 🌎 Detalhes do navegador do usuário conectado. |
| controls | 📝 Lista de controles a exigir na página. Ex.: page.controls.append(ft.Text("Olá!")); page.update() é o mesmo que page.add(ft.Text("Olá!")). Para remover o último controle da página: page.controls.pop(); page.update(). |
| dark_theme | Indica a instância do tema usado. |
| dialog | Um controle AlertDialog para ser exibido. |
| floating_action_button | Um controle FloatingActionButton para exibir no alto da página. |
| fonts | 📝 Importa fontes para uso em Text.font_family ou aplica fonte no aplicativo inteiro com theme.font_family. Flet admite o uso de fontes .ttc, .ttf, .otf. |
| height | 🅾 Altura da página, geralmente usada junto com o evento page.on_resize. |
| horizontal_alignment | 📝 Alinhamento horizontal do controle filho em relação a seu conteiner. |
| on_scroll_interval | Passos em milisegundo para o evento on_scroll event. Default é 10. |
| overlay | Lista de controles exibidos em pilha sobre o conteúdo da página. |
| padding | Espaço entre as bordas do controle e as do conteiner. Default é page.padding = 10. |
| platform | Sistema operacional onde o aplicativo está sendo executado. Pode ser: ios, android, macos, linux ou, windows. |
| pubsub | Implementação para transferência de mensagens entre sessões do aplicativo. |
| subscribe(handler) | Registra a sessão atual para emissão de mensagens. handler é uma função ou método contendo uma mensagem. |
| subscribe_topic(topic, handler) | Inscreve a sessão para recebimento de mensagens sobre tópico específico. |
| send_all(message) | Envia mensagem a todos os inscritos. |
| send_all_on_topic(topic, message) | Envia mensagem para todos os inscritos em um tópico específico. |
| send_others(message) | Envia mensagem para todos, exceto para quem envia. |
| send_others_on_topic(topic, message) | Envia mensagem para todos em um tópico específico, exceto para quem envia. |
| unsubscribe() | Remove inscrição da sessão atual de todas as mensagens enviadas. |
| unsubscribe_topic(topic) | Remove inscrição da sessão de todas as mensagens sobre o tópico. |
| unsubscribe_all() | Remove as inscrições da sessão de todas as mensagens. |
| 📝 Sobre subscribe, unsubscribe e send. | |
| pwa | 🅾 pwa=True se o aplicativo está rodando como um Progressive Web App (PWA). |
| route | Define ou lê a rota de navegação da página |
| rtl | rtl=True para definir direção de texto da direita para esquerda. Default: False. |
| scroll | Permite rolagem vertical da página para evitar overflow. |
| session_id | 🅾 ID único da sessão do usuário. |
| spacing | Espaço vertical entre controles na página. Default: 10 pixeis. Só é aplicado quando o alignment=start, end ou center. |
| splash | 📝 Um controle que é exibido sobre o conteúdo da página. Operações lentas podem ser indicadas por meio de um ProgressBar ou ProgressRing. |
| show_semantics_debugger | True para a exibição de informações emitidas pelo framework. |
| theme | 📝 Essa propriedade recebe uma instância de theme.Theme para personalizar o tema. |
| ColorScheme class | Um conjunto de 30 cores para configuração de cores dos componentes. |
| TextTheme class | Personalização de estilo de textos. |
| ScrollbarTheme class | Personalização de cor, espessura, forma da barra de scroll. |
| TabsTheme class | Personalização da aparência de controles de TAB. |
| Navigation transitions | Personalização das transições entre páginas de navegação. |
| theme_mode | Tema da página: SYSTEM (default), LIGHT ou DARK |
| title | Título da página ou do navegador. |
| vertical_alignment | 📝 Alinhamento vertical do filho. |
| views | Uma lista de controles View para armazenar histórico de navegação. A última View é a página atual, a primeira é “root”, que não pode ser excluída. |
| web | True se a aplicativo está rodando no navegador. |
| width | 🅾 Largura da página web ou janela de aplicativo, usualmente usada com o evento page.on_resize. |
| window_always_on_top | 🖥️ Ajusta de a janela deve estar sempre acima das demais janelas. Default: False. |
| window_bgcolor | 🖥️ Cor de fundo da janela do aplicativo.Pode ser usado com page.bgcolor para tornar a hjanela toda transparente. |
| window_focused | 🖥️ True para trazer o foco para essa janela. |
| window_frameless | 🖥️ True para eliminar as bordas das janelas. |
| window_full_screen | 🖥️ True para usar tela cheia. Default: False. |
| window_height | 🖥️ Leitura ou ajuste da altura da janela. |
| window_left | 🖥️ Leitura ou ajuste da posição horizontal da janela, em relação à borda esquerda da tela. |
| window_maximizable | 🖥️ False para ocultar botões de “Maximizar”. Default: True. |
| window_maximized | 🖥️ True se a janela do aplicativo está maximizada. Pode ser ajustada programaticamente. |
| window_max_height | 🖥️ Leitura ou ajuste da altura máxima da janela do aplicativo. |
| window_max_width | 🖥️ Leitura ou ajuste da largura máxima da janela do aplicativo. |
| window_minimizable | 🖥️ Se False o botão de “Minimizar” fica oculto. Default: True. |
| window_minimized | 🖥️ True se a janela está minimizada. Pode ser ajustada programaticamente. |
| window_min_height | 🖥️ Leitura ou ajuste da altura mínima da janela do aplicativo. |
| window_min_width | 🖥️ Leitura ou ajuste da largura mínima da janela do aplicativo. |
| window_movable | 🖥️ macOS apenas. Se False impede a movimentação da janela. Default: True. |
| window_opacity | 🖥️ Ajuste da opacidade da janela. 0.0 (transparente) and 1.0 (opaca). |
| window_resizable | 🖥️ Marque como False para impedir redimensionamento da janela. Default: True. |
| window_title_bar_hidden | 🖥️ True para ocultar a barra de título da janela. O controle WindowDragArea permite a movimentação de janelas de barra de título. |
| window_title_bar_buttons_hidden | 🖥️ apenas macOS. True para ocultar butões de ação da janela quando a barra de título está invisível. |
| window_top | 🖥️ Leitura ou ajuste da posição da distância da janela (em pixeis) ao alto da tela. |
| window_prevent_close | 🖥️ True para interceptar o sinal nativo de fechamente de janela. Pode ser usado com page.on_window_event ou page.window_destroy() para forçar uma confirmação do usuário. |
| window_progress_bar | 🖥️ Exibe uma barra de progresso com valor de 0.0 a 1.0 na barra de tarefas (Windows) ou Dock (macOS). |
| window_skip_task_bar | 🖥️ True para ocultar a barra de tarefas (Windows) ou Dock (macOS). |
| window_visible | 🖥️ True para tornar o aplicativo visível. Usado quando o app é iniciado em janela oculta. |
| window_width | 🖥️ Leitura ou ajuste da largura da janela do aplicativo. |
Métodos de page
| Método | Ação |
| can_launch_url(url) | 📝 Verifica se a url pode ser acessada pelo aplicativo. |
| close_banner() | Fecha o banner ativo. |
| close_bottom_sheet() | Fecha o pé de página. |
| close_dialog() | Fecha a caixa de diálogo ativa. |
| close_in_app_web_view() | 📱 Fecha visualização de página web iniciada com launch_url() de dentro do aplicativo. |
| get_clipboard() | Recupera o último texto salvo no clipboard do lado do cliente. |
| go(route) | Um método auxiliar para atualizar page.route. Ele aciona o evento page.on_route_change seguido de page.update(). |
| launch_url(url) | 📝 Abre uma URL em nova janela do navegador. |
| page.get_upload_url(file_name, expires) | Gera URL para armazenamento de upload. |
| scroll_to(offset, delta, key, duration, curve) | Move a posição de scroll para local absoluto ou incremento relativo. Detalhes em scroll_to. |
| set_clipboard(data) | Insere conteúdo no clipboard do lado do cliente (navegador ou desktop). Ex.: page.set_clipboard("Esse valor vai para o clipboard"). |
| show_banner(banner: Banner) | Exibe um Banner no pé de página. |
| show_bottom_sheet(bottom_sheet: BottomSheet) | Exibe um BottomSheet no pé de página. |
| show_dialog(dialog: AlertDialog) | Exibe caixa de diálogo. |
| show_snack_bar(snack_bar: SnackBar) | Exibe um SnackBar no pé de página. |
| window_center() | 🖥️ Move a janela do aplicativo para o centro da tela. |
| window_close() | 🖥️ Fecha a janela do aplicativo. |
| window_destroy() | 🖥️ Força o fechamento da janela. Pode ser usado com page.window_prevent_close = True para exigir a confirmação do usuário para encerramento do aplicativo. 📝 |
| window_to_front() | 🖥️ Traz a janela do aplicativo para o primeiro plano. |
Eventos de page
| Evento | Dispara quando |
| on_close | uma sessão expirou por um tempo configurado. Default: 60 minutos. |
| on_connect | o usuário da web conecta ou reconect uma sessão. Não dispara na primeira exibição de uma página mas quando ela é atualizada. Detecta a presença do usuário online. |
| on_disconnect | o usuário se desconecta de uma sessão, fechando o navegador ou a aba da página.on_error ocorre um erro não tratado. |
| on_keyboard_event | 📝 uma tecla é pressionada. |
| on_resize | 📝 a janela do aplicativo ou navegador é redimensionada. |
| on_route_change | a rota da página é alterada no código, pela alteração da URL no navegador ou uso dos botões de avançar ou retroceder. |
| on_scroll | a posição de scroll é alterada pelo usuário. Tem mesmo comportamento de Column.on_scroll. |
| on_view_pop | 📝 o usuário clique o botão de “retornar” em um controle AppBar. |
| on_window_event | 📝 a janela do aplicativo muda de estado: posição, tamanho, maximizado, minimizado, etc. |
Bibiografia
- Python com Flet: Bibiografia Geral
- Flet Controls Galery: Galeria de Controles: Buttons
- Galeria de ícones: Icons Browser
- GitHub: Controls Galery: Galeria de Controles: Código
