Galeria de exemplos¶
Um conjunto de apps de exemplo executáveis vive em
examples/.
Cada um expõe o mesmo contrato make_state() + view(app), então roda no
simulador Qt e no dispositivo via code-push, sem mudanças. Clique no nome
de qualquer app abaixo para ver o código-fonte — todo app.py abre com um
docstring explicando o que demonstra.
# Simulador Qt no desktop (precisa do extra `qt`; instalado por `uv sync`)
uv run python examples/<nome>/app.py
uv run tempest dev examples/<nome>/app.py # + hot reload ao salvar
# Em um dispositivo Android, via code-push por LAN (fase B5)
adb reverse tcp:8765 tcp:8765 # via USB; pule se na mesma Wi-Fi
uv run tempest serve examples/<nome>/app.py
Fundamentos¶
| App | O que mostra | Exercita |
|---|---|---|
counter |
O básico: handlers síncronos e async mutam estado e disparam um rebuild coalescido. |
Text, Button, Row/Column; update. |
stopwatch |
Loop async-first: um handler corrotina conta via asyncio.sleep sem travar a UI (stop/reset seguem tocáveis). |
Rebuilds coalescidos a partir do loop; update. |
todo |
Digite uma tarefa no Input e toque "add"; tocar alterna concluída; "clear done" remove as feitas. |
Input + chave estável; todos os child patches: insert / remove / update. |
calculator |
A grade de botões é a entrada (sem widget de texto) — vitrine de layout denso. | Row/Column aninhados, botões com chave; update no display. |
colorpicker |
Style dinâmico: swatches recolorem um preview vivo; toggles re-estilizam o texto. |
background / font_size / font_weight pelo diff. |
Componentes e shell¶
| App | O que mostra | Exercita |
|---|---|---|
shell |
Tela inteira montada dos componentes compostos: Scaffold + AppBar (com Burger/Drawer) no topo, NavBar embaixo. |
tempestroid.components reduzidos a primitivos via Component.render. |
gallery |
Widgets utilitários + estilização de input + transição implícita de Style. |
Slider/Switch/ProgressBar/Spinner/Image/Icon/ScrollView/TextArea; Input seguro + regex; Style.transition. |
Trilho E — paridade Flutter/RN¶
| App | O que mostra | Exercita |
|---|---|---|
navigation |
Os três hosts de navegação: pilha push/pop animada, abas e gaveta. | Navigator / TabView / RouteDrawer (E0). |
tabs |
Tab bar persistente troca o corpo entre 3 painéis; o estado compartilhado sobrevive à troca. | Padrão canônico de navegação por abas. |
lists |
LazyColumn de 10k itens + paginação + pull-to-refresh, e SectionList com cabeçalho fixo. |
Virtualização por janela (E1). |
overlays |
Dialog, bottom sheet, menu e toast pela API imperativa de overlay do App. |
Camada de overlay z-ordenada (E2). |
animation |
Caixa que faz ease de cor/opacidade, lista animada, Hero e Shimmer. |
AnimationController + Tween no clock de frames (E3). |
gestures |
Swipe-to-delete (Dismissible), arrastar p/ reordenar e pinça-zoom. |
Gestos avançados (E4). |
forms |
Form de FormFields com validators tipados (bloqueia submit inválido) + inputs de seleção/segmento. |
Validação em Python antes dos patches (E5). |
form |
Os inputs com valor básicos, cada um dobrando seu evento tipado de volta no estado. | Input / Checkbox / DatePicker / FilePicker + eventos tipados. |
layout |
Chips com Wrap, PageView paginado e CollapsingAppBar que encolhe ao rolar. |
Layout refinado (E6). |
media |
Desenho com Canvas, Svg, blur e clip. |
Mídia e gráficos (E7). |
platform |
Haptics, preferências reais, stream de lifecycle e KeyboardAvoidingView. |
Plataforma/sistema (E8) — roda no Qt e no device. |
theming |
Toggle dark/light (App.set_theme), locale PT↔árabe/RTL (App.set_locale) e Semantics. |
Transversais: tema/i18n/acessibilidade (E9). |
Dispositivo e multi-arquivo¶
| App | O que mostra | Exercita |
|---|---|---|
device_counter |
Contador mínimo sem import de Qt — o alvo do code-push no aparelho. | Mesmo contrato, livre de Qt (B5). |
native_caps |
Capacidades nativas sem config extra, cada uma um round-trip request/response tipado. | clipboard / storage / database (SQLite) / secure_storage / system (device-verificado). |
sysverify |
Harness de verificação on-device das capacidades que exigem hardware real. | Sensores / biometria / push (device-only). |
multifile |
Projeto multi-arquivo (main.py + pacote widgets/) — o que tempest new --template multi gera. |
Bundle do projeto inteiro no sys.path (Trilho C). |
Trilho G — inferência ONNX no device¶
Visão no aparelho com o ort-vision-sdk
(backend plugável), inferência pela AAR nativa onnxruntime-android — sem
OpenCV, sem wheel onnxruntime/Pillow. Exigem o extra [vision] + o build com
--feature vision; device-verificados no emulador x86_64.
| App | O que mostra | Exercita |
|---|---|---|
onnxspike |
Prova mínima: import numpy + um cálculo rodam no interpretador embarcado (tela verde "numpy OK"). |
numpy android no device (G0/G1). |
visionspike |
Pipeline completo: imagem real (banana.jpg) → decode nativo (BitmapFactory) → Classifier do SDK via AarBackend → top-1 + latência. Modelo embutido ou baixado (VISIONSPIKE_MODEL_URL), .onnx fp32 ou .int8.ort quantizado (VISIONSPIKE_MODEL). |
G1 (AAR) + G2 (imagem) + G3 (tempest optimize) + G4 (entrega). |
Conjunto de widgets atual¶
Os dois renderizadores — simulador Qt (desktop) e Compose (dispositivo) —
suportam o conjunto completo do Trilho E. Não há mais o gap antigo de "o Compose
só renderiza cinco widgets": os inputs com valor (Input / TextArea /
Checkbox / Switch / Slider / Dropdown / DatePicker / FilePicker / …)
renderizam nativamente no aparelho via Jetpack Compose e dobram seus eventos
tipados de volta no estado. A paridade é fixada pela suíte de conformância
(golden snapshots dos dois tradutores Style → Qt e Style → Compose) e foi
verificada em device ao longo de E0–E9.
Cobertura (ambos os renderizadores, salvo nota):
| Categoria | Widgets |
|---|---|
| Layout | Column / Row / Container / Stack / Wrap / ScrollView / SafeArea / AspectRatio / PageView / KeyboardAvoidingView |
| Texto e ação | Text / Button / Icon / Image (on_click) |
| Inputs com valor | Input / TextArea / Checkbox / Switch / Slider / RangeSlider / Dropdown / DatePicker / TimePicker / FilePicker / PinInput / MaskedInput / Autocomplete / Form / FormField |
| Listas virtualizadas | LazyColumn / LazyRow / LazyGrid / SectionList (+ pull-to-refresh, scroll infinito) |
| Navegação | Navigator / TabView / TabBar / RouteDrawer |
| Overlays | Dialog / BottomSheet / Menu / Popover / Toast / Tooltip / ActionSheet |
| Animação | Animated / AnimatedList / Hero / Shimmer / Skeleton |
| Gestos | GestureDetector / PanHandler / ScaleHandler / DoubleTapHandler / Draggable / DragTarget / Dismissible / ReorderableList / InteractiveViewer |
| Mídia e gráficos | Canvas / Svg / VideoPlayer / WebView / Blur / BackdropFilter / ClipPath |
| Indicadores | ProgressBar / Spinner |
Divergência de mídia/câmera (device-only)
Alguns widgets de hardware — CameraPreview / QrScanner / MapView —
renderizam só no aparelho (Compose) e aparecem como placeholder sinalizado
no Qt, não o contrário. As divergências por campo entre os dois tradutores
estão documentadas na suíte de conformância (tests/conformance/).
Os exemplos form e gallery exercitam os inputs com valor de verdade — no
simulador e no aparelho. Exemplos como calculator continuam dirigidos por
teclado numérico por design do app, não por limite do renderizador.
Handlers estáveis
Rebuilds comparam props de handler por identidade, então um lambda novo a
cada build lê como mudança de prop (limitação conhecida). Os exemplos ainda
emitem patches corretos — apenas mais que o mínimo estrito. Prefira
referências de handler estáveis em apps de produção.
Capturas no dispositivo (emulador x86_64, sem hardware físico)¶
Geradas sem aparelho físico
A maioria foi renderizada pelo renderizador Compose num emulador x86_64
headless (make emulator-verify / toolchain/validate_gallery.sh) — zero
hardware; as galerias do design system (h1buttons–h4gallery) são capturas
do simulador Qt. stopwatch (animado) fica para uma recaptura como GIF (ver
Animados).
 animation |
 brforms |
 calculator |
 colorpicker |
 counter |
 device_counter |
 form |
 forms |
 gallery |
 gestures |
 icons |
 layout |
 lists |
 media |
 multifile |
 native_caps |
 navigation |
 overlays |
 platform |
 shell |
 sysverify |
 tabs |
 theming |
 todo |
 h1buttons |
 h2gallery |
 h3gallery |
 h4gallery |
Os exemplos h1buttons (variantes de Button), h2gallery (o kit de ação e
entrada), h3gallery (superfície e layout) e h4gallery (data display e
feedback) acompanham o design system.
Animados¶
Exemplos com movimento (animation, gestures, stopwatch) precisam de um
GIF — um PNG estático não mostra a animação. O harness
toolchain/capture_gif.sh captura uma rajada de frames no dispositivo e monta o
GIF (via toolchain/frames_to_gif.py). Como esses exemplos são estáticos em
repouso, dispare a animação com TAP_X/TAP_Y antes da rajada: