Outros controles de montagem de Layout
Nessa seção veremos os controles Card, Tabs, SafeArea, Divider, VerticalDivider, ExpansionPanelList, todos eles widgets que facilitam a divisão, exibição ou ocultação de conteúdo dentro de uma página de aplicativo.
Card
Um card no flet é um painel de bordas arredondadas e com um sombreado colorido simulando uma elevação sobre o fundo onde está desenhado.
Propriedades de Card
| Propriedade | Descrição |
|---|---|
| color | indica a cor de fundo do card. |
| content | o controle a ser exibido pelo controle. card só pode ter um filho. Para inserir mais de um widget dentro de card insira nele controles que podem ter vários filhos, como Row, Column ou Stack. |
| elevation: | controla o tamanho da sombra abaixo do card, simulando que esse esteja elevado sobre sua base. O valor default é 1.0. |
| margin | distância entre as bordas e a borda de seu container. |
| shadow_color | cor da sombra abaixo do card. |
| shape† | a forma do card. Esse valor é uma instância de uma das implementações:
O formato default é RoundedRectangleBorder com radius=4.0. |
| surface_tint_color | cor usada como sobreposição de cor para indicar elevação. Se ajustada para None, nenhuma sobreposição será aplicada. Caso contrário, esta cor será composta sobre a cor de fundo com opacidade relacionada à elevação e usada para desenhar fundo do card. O default é None. |
| † Não consegui usar essa propriedade. Se algum leitor tem essa informação peço que me envie. | |
Exemplo de uso de Card
Um exemplo mais completo pode ser encontrado em Uso de Card.
import flet as ft
def main(page):
icon=ft.Icon(ft.icons.ADB_ROUNDED, color=ft.colors.BLUE, size=50 )
texto1 = ft.Text("Título do Card", size=30)
texto2 = ft.Text("Conteúdo de texto do Card")
linha = ft.Row([icon, ft.Column([texto1, texto2])])
cartao = ft.Card(ft.Container(linha, width=300, padding=20))
page.add(cartao)
ft.app(target=main)
Como vemos, card tem um único filho, um container que, que sua vez, tem uma linha com um ícone e uma coluna (com dois controles de textos).
Tabs
O controle Tabs, usualmente chamado de guias ou abas em protuguês, é usado para separar conteúdo de categorias diferentes, facilitando a navegação do usuário. Ele simula a marcação de bookmarks em um livro físico, para indicar setores de conteúdos diversos, sendo um padrão de desenho com o qual os usuários estão acostumados, no desktop ou web.
Propriedades de Tabs
| Propriedade | Descrição |
|---|---|
| animation_duration | tempo de duração, em milisegundos, da animação de trocas entre tabs. O default é 50. |
| divider_color | a cor do divisor entre os tabs ou guias. |
| indicator_border_radius | o raio de arredondadmento de cantos do indicador. |
| indicator_border_side | cor e largura da linha horizontal desenhada abaixo da guia selecionada. Essa linha indica que uma guia está em uso. |
| indicator_color | cor da linha exibida abaixo da guia selecionada. |
| indicator_padding | localiza a linha sublinhada abaixo da guia selecionada, relativa a sua borda. A propriedade indicator_tab_size pode ser usada para indicar a localização das bordas. A propriedade é Falsa para centralizar o conteúdo ou True para usar toda a extensão do tab. |
| indicator_tab_size | booleano, True para que o indicador ocupe todo o tab. |
| label_color | cor dos rótulos das guias selecionadas. |
| overlay_color | define a resposta da cor inicial quando o controle está em foco, hover ou splash. Quando especificada essa propriedade usa MaterialState.FOCUSED, MaterialState.HOVERED ou MaterialState.PRESSED. |
| selected_index | índice do tab selecionado. Pode ser ajustado programaticamente ou selecionado pelo usuário. |
| scrollable | booleano, indica se a barra de tab pode ser rolada horizontalmente. Se scrollable=True cada tab tem a largura necessária para comportar seu rótulo e o controle inteiro é rolável. Se scrollable=False o espaço disponível é distribuído igualmente entre os tabs. |
| tab_alignment | especifica o alinhamento horizontal dos tabs dentro do controle Tabs. A propriedade TabAlignment é um enum com os valores:
|
| tabs | uma lista com os controles tab a serem exibidos. |
| unselected_label_color | a cor das guias (tabs) não selecionadas. |
Evento de Tab
| Evento | Descrição |
|---|---|
| on_change | Dispara quando o índice da guia selecionada (selected_index) é alterado. |
Um exemplo de uso de tabs pode ser visto em Uso de Tabs.
Propriedades de Tab
| Propriedade | Descrição |
|---|---|
| content | o controle a ser exibido quando o Tab é selecionado. |
| icon | ícone a ser exibido à esquerda do texto de Tab. |
| tab_content | um controle com o conteúdo personalizado a substituir o texto e o ícone. |
| text | o nome ou rótulo do Tab. |
SafeArea
Outro controle voltado para a diagramação das páginas de aplicativos, SafeArea insere conteúdo com preenchimento (padding, as distâncias entre as margens internas do container com as bordas externas do controle) de modo a impedir que os elementos de interface do sistema operacional se sobreponham às do aplicativo. Ele recua o conteúdo interno evitando sobreposição pela barra de status no alto da tela.
Em particular esse recurso permite o recuo do conteúdo para evitar obstrução pelo “entalhe” no iPhone, (notch) ou outras modificações na geometria das telas em aparelhos menores.
Propriedades de SafeArea
| Propriedade | Descrição |
|---|---|
| bottom | booleano, se o aplicativo deve evitar intrusão do SO na parte inferior da tela. Default é True. |
| content | recebe o controle filho a ser exibido dentro SafeArea. |
| left | booleano, se o aplicativo deve evitar intrusão do SO na parte esquerda da tela. Default é True. |
| maintain_bottom_view_padding | booleano, default é False. Se True o controle SafeArea deve manter em exibição o MediaQueryData.viewPadding no parte inferior da tela, em vez do MediaQueryData.padding (que é o default).
Por exemplo, caso um teclado na tela seja exibido acima da SafeArea, o preenchimento interno (padding) pode ser mantido abaixo da obstrução sem ser ocultado. Pode ser útil quando o layout contém controles flexíveis que podem ser movidos na interface do usuário. Definir |
| minimum | preenchimento (padding) mínimo a ser aplicado. Quando o valor de minimum é especificado ele será adotado como padding exceto se esse valor não for suficiente para garantir o preenchimento da área segura. |
| right | booleano, se o aplicativo deve evitar intrusão do SO na parte direita da tela. Default é True. |
| right | booleano, se o aplicativo deve evitar intrusão do SO na parte superior da tela, que em geral contém uma barra de status. Default é True. |
| Nota: Denotamos nessa tabela, SO = sistema operacional, IU = interface de usuário (ou interface gráfica) | |
Um exemplo de uso do controle pode ser visto em Uso de SafeArea.
Divider
Um controle voltado para a diagramação das páginas de aplicativos, desenhando uma linha horizontal externa sobre o container pai, com uma linha interna de mesma extensão mas altura possível diferente. Ele admite preenchimento (padding) em ambas as bordas. Pode ter cor, comprimento e espessura definidas.
Propriedades de Divider
| Propriedade | Descrição |
|---|---|
| color | cor da linha. |
| height | altura da linha, no sentido horizontal. O centro da linha, desenhada no container, fica no centro de sua altura horizontal. O default é 16.0 se esse valor for null. |
| thickness | espessura da linha desenhada dentro do Divider. Se thickness=0.0 a altura será de 1 pixel. Se esse valor for null esse será 0.0. |
Exemplos de uso dos controles Vertical e VerticalDivider podem ser vistos em Uso de Divider.
VerticalDivider
Um controle voltado para a diagramação das páginas de aplicativos, desenhando uma linha vertical sobre o container pai, com exatamente análoga à Divider mas com propriedades cor, largura e espessura. A única propriedade diferente é width que define a largura no sentido horizontal da linha externa.
| color | cor da linha. |
| width | largura linha externa. O centro da linha, desenhada no container, fica no centro de sua altura horizontal. O default é 16.0 se esse valor for null. |
| thickness | espessura da linha dentro do VerticalDivider. Se thickness=0.0 a altura será de 1 pixel. Se esse valor for null esse será 0.0. |
ExpansionPanel e ExpansionPanelList
O controle ExpansionPanelList permite a criação de painéis expansíveis, ou seja, podem ser contraídos até um mínimo, expandidos para exibir conteúdo, ou removidos da página. Como organizador de conteúdo na diagramação de uma interface gráfica ele é similar aos Tabs, mas separando o espaço da página em faixas horizontais. Além disso vários painéis podem ficar simultaneamente abertos.
O controle ExpansionPanelsList recebe uma lista de controles ExpansionPanel.
Propriedades de ExpansionPanelList
| Propriedade | Descrição |
|---|---|
| controls | uma lista de controles ExpansionPanel a serem exibidos dentro do controle pai. |
| divider_color | a cor do divisor quando ExpansionPanel.expanded=False. |
| elevation | define a elevação dos controles filhos ExpansionPanel quando extendido. O valor default é 2. |
| expanded_header_padding | define o espaçamento interno (padding) em torno da cabeçalho quando extendido. O valor default é padding.symmetric(vertical=16.0). Leia mais sobre padding em Propriedades de Containers. |
| expanded_icon_color | cor do ícone. Default é colors.BLACK_54 em modo de tema claro e colors.WHITE_60 em modo escuro. |
| spacing | tamanho do intervalo entre os ExpansionPanels quando extendidos. |
Evento de ExpansionPanelList
| on_change | dispara quando um ExpansionPanel muda de estado entre expandido e colapsado. A propriedade de evento e.data contem o índice do painel ExpansionPanel que causou o evento. |
Propriedades de ExpansionPanel
Os objetos ExpansionPanel são os filhos diretos de ExpansionPanelList, que serão representados na página como painéis extendíveis.
| bgcolor | a cor de fundo do painel. |
| content | os controles que aparecerão dentro desse painel. Esse conteúdo aparece abaixo do cabeçalho (header) quando o painel está expandido. Se content=None o painel terá um espaço reservado para Texto como conteúdo. |
| can_tap_header | booleano. Se can_tap_header=True um toque sobre o cabeçalho do painel provocará sua expansão ou colapso. Defaults é False. |
| expanded | booleano. Define o estado do painel como expandido ou colapsado. Defaults é False (colapsado). |
| header | o controle a ser apresentado dentro do cabeçalho (header). Se header=None o ExpansionPanel terá terá um espaço reservado para Texto no cabeçalho. |
Um exemplo de uso dos controles ExpansionPanelList e ExpansionPanel pode ser visto em Uso de ExpansionPanel.
Bibliografia
- Log Rocket: Tabbed navigation in UX.
Todas as URLs foram visitadas em janeiro de 2024.