Layout
Controle CupertinoListTile
CupertinoListTile é um controle similar ao ListTile mas seguindo a estilização do iOS. O controle possui a propriedade notched que, se marcada como False (default) renderiza o controle no modo padrão do iOS, ou, se marcada como True gera o controle na aparência de “Inset Grouped”, o mesmo usado em iOS Notes ou Reminders.
Ele exibe uma linha de altura fixa com controles internos, geralmente imagens, ícones, textos e menus. Ele admite ícones à direita ou à esquerda do título, podendo seus objetos interiores responder a certos eventos.
Um exemplo mínimo de código aparece listado abaixo, com a ilustração de seu resultado ao ser executado.
import flet as ft
def main(page: ft.Page):
page.bgcolor="#ABE6DB"
cuperLT_1=ft.CupertinoListTile(
title=ft.Text("Patches de recuperação do Windows 12", color="BLACK"),
subtitle=ft.Text("Equipe Mostarda", color="#333355"),
additional_info=ft.Text("Completar tarefa até 21:45H", color="#333355"),
leading=ft.Icon(name=ft.cupertino_icons.CHAT_BUBBLE),
trailing=ft.Icon(name=ft.cupertino_icons.BELL_CIRCLE_FILL),
bgcolor="#BDAB8D"
)
cuperLT_2= ft.CupertinoListTile(
title=ft.Text("Patches de recuperação do iOS 17", color="BLACK"),
subtitle=ft.Text("Equipe Catchup", color="#333355"),
additional_info=ft.Text("Completar tarefa até 09:15H", color="#333355"),
leading=ft.Icon(name=ft.cupertino_icons.CHAT_BUBBLE_2),
trailing=ft.Icon(name=ft.cupertino_icons.BELL_CIRCLE, color="RED"),
bgcolor="#AD9B7D"
)
page.add(cuperLT_1, cuperLT_2)
ft.app(target=main)
Propriedades de CupertinoListTile
| Propriedade | Descrição |
|---|---|
| additional_info | controle a ser exibido à direita do título mas antes do controle ao final da linha. Com frequência é usado um texto, seguido por um ícone, embora isso não seja obrigatório. |
| bgcolor_activated | cor de fundo do controle após ter sido clicado ou tocado. |
| leading | A Control para exibir antes do title. |
| leading_size | restringe largura e altura do controle. Default é 28.0. |
| leading_to_title | espaço horizontal entre leading e title. Default é 16.0. |
| notched | booleano. Se notched=True o controle será criado com a forma de um “Inset Grouped”, usado em aplicativos do iOS como Notes ou Reminders. Default é False. |
| padding | espaçamento interno no controle CupertinoListTile, descrevendo distância entre os controles internos: title, subtitle, additional_info e trailing.* Veja a propriedade Container.padding para mais informações e possíveis valores. |
| subtitle | conteúdo adicional exibido abaixo do título. Em geral é usado um controle de texto. |
| title | usado para exibir o conteúdo principal no controle CupertinoListTile. Em geral é usado um controle de texto. |
| toggle_inputs | booleano. Se toggle_inputs=True um clique na lista de altera o estado dos controles internos Radio, Checkbox ou Switch. Default é False. |
| trailing | controle a ser exibido após o título. Normalmente é usado um controle de ícone. |
| url | URL usada para localizar um recurso quando a lista recebe um clique. Se o evento on_click estiver registrado (se houver uma função a ele associada), o evento é disparado. |
| url_target | como abrir URL no modo web. Pode ser:
|
Evento de CupertinoListTile
| on_click | dispara quando o usuário clica ou toca na lista. |
Apesar de não encontrar documentação a respeito, na minha experiência os nomes dos ícones podem ser idênticos aos nomes do flutter, mas escritas em maiúsculas. Exemplos são:
- ft.cupertino_icons.FOLDER,
- ft.cupertino_icons.FUNCTION,
- ft.cupertino_icons.HAMMER
Um aplicativo que busca ícones cupertino pode ser encontrada em Cupertino Icons.
Exemplo de uso de CupertinoListTile
import flet as ft
def main(page: ft.Page):
page.bgcolor="#ABE6DB"
def click(e):
if e.control.notched:
clt2.data +=1
txt = f"Esse controle foi clicado {clt2.data} vez{'es' if clt2.data>1 else ''}."
clt2.subtitle=ft.Text(txt, color="#333355")
else:
clt1.data +=1
txt = f"Esse controle foi clicado {clt1.data} vez{'es' if clt1.data>1 else ''}."
clt1.subtitle=ft.Text(txt, color="#333355")
titulo.value =f"Os controles foram clicados {clt1.data+clt2.data} vezes."
page.update()
clt1=ft.CupertinoListTile(
title=ft.Text("Patches de recuperação do Windows 12", color="BLACK"),
subtitle=ft.Text(
"Esse controle ainda não foi clicado.",
color="#333355"
),
additional_info=ft.Text("Completar tarefa até 21:45H", color="#333355"),
leading=ft.Icon(name=ft.cupertino_icons.CAR_DETAILED, color="BLACK"),
trailing=ft.Icon(name=ft.cupertino_icons.WRENCH, color="RED", size=30),
padding=ft.padding.only(15, 20, 30, 40),
bgcolor="#BDAB8D",
bgcolor_activated=ft.colors.AMBER_600,
data=0,
on_click=click,
)
clt2=ft.CupertinoListTile(
title=ft.Text("Patches de recuperação do iOS 17", color="BLACK"),
subtitle=ft.Text(
"Esse controle ainda não foi clicado.",
color="#333355"
),
additional_info=ft.Text("Completar tarefa até 09:15H", color="#333355"),
leading=ft.Icon(
name=ft.cupertino_icons.CAR_DETAILED,
color="BLUE",
size=30,
),
trailing=ft.Icon(
name=ft.cupertino_icons.GAUGE,
color="RED",
size=30,
),
padding=20,
bgcolor="#CDBB9D",
bgcolor_activated=ft.colors.AMBER_100,
notched=True,
data=0,
on_click=click,
)
titulo=ft.Text(
"Nenhum controle foi clicado até agora",
color="#0b4b8f",
size=30,
weight=ft.FontWeight.BOLD,
)
ct=ft.Container(
content=titulo,
margin=5,
padding=5,
alignment=ft.alignment.center,
bgcolor="#95d3c8",
width=850,
height=50,
border_radius=10,
)
page.add(ct, clt1, clt2)
ft.app(target=main)
Valem as observações: um container é inserido na cabeçalho, contendo um título que usa titulo=ft.Text(...). A variável titulo foi definida separadamente para estar disponível para alterações na função click().
As duas tiles foram definidas com a propriedade data em clt=ft.CupertinoListTile(..., data=0), usada para contar quantos cliques foram aplicados sobre o controle. Essa mesma propriedade é usada para construir a propriedade clt.subtitle, também atualizada a cada clique.
A função click() distingue entre os dois controles através da propriedade e.control.notched, que só é verdadeira no segundo controle. Desta forma não é necessário criar uma função para cada controle.
