Page: notas sobre propriedades, eventos e notas

Essas notas contém explicações e detalhes sobre propriedades, eventos e notas do objeto page descritos em Flet: Page container.

Propriedades

page.controls
Recebe uma lista de objetos que será exibidos na página.

page.controls.append(ft.Text("Hello!"))
page.update()

# alternativamente
page.add(ft.Text("Hello!"))

# para remover (pop) o último controle da lista
page.controls.pop()
page.update()

page.fonts
Recebe um dicionário {"nome_da_fonte" : "url_da_fonte"}. Essas fonts podem ser usadas com text.font_family ou theme.font_family, para aplicar a fonte em todo o aplicativo. Podem ser usadas fontes .ttc, .ttf, .otf.

Para um recurso externo a “url_da_fonte” é a URL absoluta, e para fontes instaladas a URL relativa para um diretório assets_dir. Esse diretório deve ser especificado na chamada para flet.app(), podendo ser um caminho relativo ao local onde está main.py ou um caminho absoluto. Por exemplo, suponha a estrutura mostrada na figura 1:

Para usar a fonte “Open Sans” e “Kanit”, importada do GitHub, como default, podemos fazer:

import flet as ft

def main(page: ft.Page):
    page.fonts = {
        "Kanit": "https://raw.githubusercontent.com/google/fonts/master/ofl/kanit/Kanit-Bold.ttf",
        "Open Sans": "/fonts/OpenSans-Regular.ttf"
    }
    page.theme = Theme(font_family="Kanit")
    page.add(
      ft.Text("Esse texto usa a fonte default Kanit"),
      ft.Text("Esse texto usa a fonte Open Sans", font_family="Open Sans")
    )
ft.app(target=main, assets_dir="assets")

horizontal_alignment
Determina como os controles serão posicionados na horizontal. Default é horizontal_alignment=CrossAxisAlignment.START, que coloca os controles à esquerda de page. CrossAxisAlignment é um ENUM com os valores: START (default), CENTER, END, STRETCH e BASELINE.

subscribe(), unsubscribe() e send()
subscribe(handler) inscreve a sessão ativa do aplicativo para recebimento de mensagens. Se topic não for especificado todos os tópicos são enviados. handler é um método com um argumento que é a mensagem. Por exemplo:

def main(page: ft.Page):

    def on_broadcast_message(message):
        print(message)

    page.pubsub.subscribe(on_broadcast_message)

subscribe_topic(topic, handler) especifica o tópico que será enviado.

send_all(message) envia para todos. send_all_on_topic(topic, message) especifica o tópico de envio.

@dataclass
class Message:
    user: str
    text: str

def main(page: ft.Page):

    def on_broadcast_message(message):
        page.add(ft.Text(f"{message.user}: {message.text}"))

    page.pubsub.subscribe(on_broadcast_message)

    def on_send_click(e):
        page.pubsub.send_all(Message("John", "Hello, all!"))

    page.add(ft.ElevatedButton(text="Send message", on_click=on_send_click))

unsubscribe() remove a sessão da lista de subscrição.

@dataclass
class Message:
    user: str
    text: str

def main(page: ft.Page):

    def on_leave_click(e):
        page.pubsub.unsubscribe()

    page.add(ft.ElevatedButton(text="Leave chat", on_click=on_leave_click))

Para remover a sessão da lista de destinatários de mensagens de um tópico use unsubscribe_topic(topic).
Para remover a sessão da lista de destinatários de mensagens de todos os tópicos: unsubscribe_all(), por exemplo quando o usuário fecha a janela:

def main(page: ft.Page):
    def client_exited(e):
        page.pubsub.unsubscribe_all()

    page.on_close = client_exited

scroll

Habilita a página para rolagem (scroll), mostrando ou ocultando a barra de rolagem. scroll=ScrollMode.None é o default. ScrollMode é um ENUM com os valores:

• None ▸ (default), a coluna não pode ser percorrida e o texto pode extrapolar o espaço (overflow).
• AUTO ▸ a rolagem está ativada e a barra só aparece quando necessária.
• ADAPTIVE ▸ a rolagem está ativada e barra aparece quando aplicativo está na web ou desktop.
• ALWAYS ▸ a rolagem está ativada e barra está sempre visível.
• HIDDEN ▸ a rolagem está ativado mas a barra está oculta.

splash
É exibido em cima da página de conteúdo. Pode ser usado junto com ProgressBar ou ProgressRing para indicar uma operação demorada.

from time import sleep
import flet as ft

def main(page: ft.Page):
    def button_click(e):
        page.splash = ft.ProgressBar()
        btn.disabled = True
        page.update()
        sleep(3)
        page.splash = None
        btn.disabled = False
        page.update()

    btn = ft.ElevatedButton("Do some lengthy task!", on_click=button_click)
    page.add(btn)

ft.app(target=main)

theme
Essa propriedade recebe uma instância de theme. No estágio atual de desenvolvimento do Flet um theme só pode ser gerado a partir de uma cor “semente” (“seed”). Por exemplo, para um tema claro sobre tom verde:

page.theme = theme.Theme(color_scheme_seed="green")
page.update()

A classe Theme tem as propriedades:

• color_scheme_seed ▸ cor “semente” para servir de base ao algoritmo de construção do tema.
• color_scheme ▸ uma instância de ft.ColorScheme para personalização do esquema Material colors derivedo de color_scheme_seed.
• text_theme ▸ instância de ft.TextTheme para personalização de estilos de texto.
• primary_text_theme ▸ instância de ft.TextTheme descrevendo o tema de texto que constrasta com a cor primária.
• scrollbar_theme ▸ instância de ft.ScrollbarTheme para personalizar a aparência da barra de rolagem.
• tabs_theme ▸ instância de ft.TabsTheme para personalizar a aparência do controle de Tabs.
• font_family ▸ a fonte base para todos os elementos da UI.
• use_material3 ▸ True (default) para usar Material 3; caso contrário use Material 2.
• visual_density ▸ ThemeVisualDensity enum: STANDARD (default), COMPACT, COMFORTABLE, ADAPTIVE_PLATFORM_DENSITY.
• page_transitions ▸ instância de PageTransitionsTheme para personalizar transições entre páginas ^(†).

† Transições de navegação: (theme.page_transitions personaliza transições entre páginas para diversas plataformas. Seu valor é uma instância de PageTransitionsTheme com as propriedades adicionais:

• android ▸ default: FADE_UPWARDS
• ios ▸ default: CUPERTINO
• macos ▸ default: ZOOM)
• linux ▸ default: ZOOM)
• windows ▸ default: ZOOM

Transições suportadas estão em um ENUM ft.PageTransitionTheme: NONE (transição imediata e sem animação), FADE_UPWARDS, OPEN_UPWARDS, ZOOM, CUPERTINO.

São exemplos:

theme = ft.Theme()
theme.page_transitions.android = ft.PageTransitionTheme.OPEN_UPWARDS
theme.page_transitions.ios = ft.PageTransitionTheme.CUPERTINO
theme.page_transitions.macos = ft.PageTransitionTheme.FADE_UPWARDS
theme.page_transitions.linux = ft.PageTransitionTheme.ZOOM
theme.page_transitions.windows = ft.PageTransitionTheme.NONE
page.theme = theme
page.update()

vertical_alignment
Alinhamento vertical dos controles filhos. Admite o ENUM MainAxisAlignment com os seguintes valores:

• START (default)
• END
• CENTER
• SPACE_BETWEEN
• SPACE_AROUND
• SPACE_EVENLY

Por exemplo vertical_alignment=MainAxisAlignment.START posiciona o filho no alto da página.

window_bgcolor
Cor de fundo da janela. Se usada com junto com uma página transparente toda a janela fica transparente: page.window_bgcolor = ft.colors.TRANSPARENT e page.bgcolor = ft.colors.TRANSPARENT.

window_visible
🖥️ window_visible=True torna a janela visível. Se o aplicativo é iniciado com view=ft.AppView.FLET_APP_HIDDENa janela é criada invisível. Para torná-la visível usamos page.window_visible = True.

Métodos

can_launch_url(url)
Retorna True se é possível gerenciar uma URL com o aplicativo. Caso retorne False isso pode significar que não há como vertificar se o recurso está disponível, talvez devido à falta de permissões. Nas versões mais recentes do Android e iOS esse método sempre retornará False, exceto se o aplicativo for configurado com essa permissão. Na web ele retornará False exceto para esquemas específicos, pois páginas web, por princípio, não devem ter acesso aos aplicativos instalados.

launch_url(url)
Abre uma nova página exibindo o recurso descrito na URL.
Admite os argumentos opcionais:

• web_window_name: nome da janela ou tab de destino. “_self”, na mesma janela/tab, “_blank”, nova janela/tab (ou em aplicativo externo no celular); ou “nome_do_tab”: um nome personalizado.
• web_popup_window: True para abrir a URL em janela popup. Default: False.
• window_width – opcional, largura da janela de popup.
• window_height – opcional, altura da janela de popup.

window_destroy()
🖥️ Força fechamento da janela. Pode ser usado com page.window_prevent_close = True para implementar uma confirmação do usuário ao fechar uma janela.

import flet as ft

def main(page: ft.Page):
    def fechar(e):
        page.dialog = caixa_dialogo
        caixa_dialogo.open = True
        page.update()

    def sim(e):
        page.window_destroy()

    def nao(e):
        caixa_dialogo.open = False
        page.update()

    caixa_dialogo = ft.AlertDialog(
        modal=True,
        title=ft.Text("Confirme..."),
        content=ft.Text("Você quer realmente fechar o aplicativo?"),
        actions=[
            ft.ElevatedButton("Sim", on_click=sim),
            ft.ElevatedButton("Não", on_click=nao),
        ],
        actions_alignment=ft.MainAxisAlignment.END,
    )

    page.add(ft.Text("Feche a janela do aplicativo clicando o botão \"Fechar\"!"))
    page.add(ft.ElevatedButton("Fechar", icon="close", on_click=fechar, width=250))

ft.app(target=main)

Eventos

on_resize
É o evento disparado quando a janela do aplicativo é redimensionada pelo usuário.

def page_resize(e):
    print(f"A página foi redimensionada para: Laugura = {page.window_width}, Altura = {page.window_height})
page.on_resize = page_resize

on_route_change
Evento disparado quando 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. O objeto e passado automaticamente pelo evento é uma instância da classe RouteChangeEvent:

class RouteChangeEvent(ft.ControlEvent):
    route: str     # passando uma nova rota para a página raiz

on_view_pop
Evento disparado quando o usuário clica o botão Back na barra de controle AppBar.
O objeto de evento e é uma instância da classe ViewPopEvent.

class ViewPopEvent(ft.ControlEvent):
    view: ft.View

sendo view uma instância do controle View, o conteiner da AppBar.

on_window_event
Evento disparado quando a janela do aplicativo tem uma propriedade alterada: position, size, maximized, minimized, etc.
Pode ser usado com window_prevent_close=True (para interceptar sinal de close) e page.window_destroy() para implementar uma lógica de confirmação de término do aplicativo.

Os nomes eventos de janela possíveis são: close, focus, blur, maximize, unmaximize, minimize, restore, resize, resized (macOS e Windows), move, moved (macOS e Windows), enterFullScreen e leaveFullScreen.

Bibiografia

• Python com Flet: Bibliografia Geral
• Flet Controls Galery: Galeria de Controles: Buttons
• Python com Flet: Objeto page