Controle Badge
O controle Badge (um distintivo ou emblema) é uma marca posta acima de outro controle, usada para mostrar notificações, contagens ou informações de status sobre o aplicativo. O controle que recebe um Badge é normalmente um ícone, parte de um NavigationBar ou um destino de NavigationRail, ou um ícone de botão. O controle tem a propriedade text onde as informações podem ser exibidas. Se text é fornecido, o rótulo será um emblema em forma de StadiumBorder com altura large_size. Se nenhum texto for fornecido, o emblema será exibido como um círculo preenchido de diâmetro small_size.
Propriedades de Badge
As seguintes propriedades existem no controle Badge:
| Propriedade | Descrição |
|---|---|
| alignment | alinhamento do label em relação ao conteúdo do controle. Este valor só é usado se a propriedade text for especificada. Por exemplo: badge.alignment = ft.alignment.top_left. O valor é do tipo Alignment. |
| bgcolor | cor de fundo do label. |
| content | um controle filho contido pelo Badge, normalmente um ícone parte de um destino de NavigationBar ou NavigationRail. O valor é do tipo Control. |
| label_visible | booleano, default True. Se label_visible=False, o Badge não é exibido. |
| large_size | altura do Badge se nenhum text for fornecido. O valor é do tipo OptionalNumber com default 16. |
| offset | combinado com o alinhamento para determinar a localização do Badge. Só tem efeito se text for fornecido. O valor é do tipo OffsetValue. |
| padding | preenchimento aplicado ao label. Esse valor só é usado se text for fornecido. O padrão é 4 pixels à esquerda e à direita. O valor é do tipo PaddingValue. |
| small_size | O diâmetro do label se o text não for fornecido. O valor é do tipo OptionalNumber com default 6. |
| text | texto mostrado no label, normalmente de 1 a 4 caracteres. Se o text for fornecido, o label terá a forma de StadiumBorder com altura igual a large_size. Se não for fornecido, o emblema será exibido como um disco diâmetro small_size. O valor é do tipo string. |
| text_color | cor do texto no label. Substitui a cor especificada em text_style. |
| text_style | estilo usado para texto em label. O valor é do tipo TextStyle. |
Você pode ver um exemplo de uso do controle Bagde.
Controle Canvas
O controle Canvas serve para que sejam desenhados gráficos arbitrários, usando um conjunto de formas primitivas como line, arc, path e text, respectivamente linha, arco, caminho, e texto.
Propriedades do Canvas
As seguintes propriedades estão definidas do controle Canvas:
| Propriedade | Descrição |
|---|---|
| resize_interval | intervalo de amostragem (em milissegundos) para coleta do evento on_resize. O default é 0 (on_resize ocorre imediatamente após a alteração). |
| shapes | lista de objetos Shape (listados abaixo) a serem desenhados no canvas. |
Evento do Canvas
O seguinte evento pode ser acionado no Canvas:
| Evento | Descrição |
|---|---|
| on_resize | dispara quando o tamanho do canvas é alterado. O objeto de evento e é uma instância de CanvasResizeEvent. |
Propriedades das Formas (Shapes)
Nesse contexto chamamos as Shapes de formas, Path de caminhos, as partes de um caminho de subcaminhos.
As formas básicas (Shapes) usadas pelo Canvas são: Arc, Circle, Color, Fill, Line, Oval, Path, Points, Rect, Shadow, Text, respectivamente: Arco, círculo, cor, preenchimento, linha, oval, caminho, ponto, retângulo, sombra, texto.
Um Arc é o elemento que desenha um arco dimensionado para caber dentro do retângulo disponível. O arco vai no sentido horário de start_angle até start_angle + sweep_angle (em radianos, com zero mostrado na figura 2). Se use_center=True, o arco é fechado de volta ao centro. Caso contrário, o arco fica aberto.
Uso: canvas.Arc(x, y, width, height, start_angle, sweep_angle, use_center, paint)
| height | altura do retângulo que contém o arco. |
| paint | estilo de desenho do arco. O valor é uma instância da classe Paint. |
| start_angle | ângulo inicial (em radianos) no desenho do arco. Veja figura. |
| sweep_angle | acréscimo sobre o ângulo inicial (em radianos) no desenho do arco. Veja figura. |
| use_center | se use_center=True o arco será fechado de volta ao centro. Caso contrário, o arco fica aberto. |
| width | largura do retângulo que contém o arco. |
| x, y | coordenadas (x,y) do ponto superior esquerdo do arco. |
Um Circle desenha um círculo dentro do canvas.
Uso: canvas.Circle(x,y,radius, paint)
| paint | estilo de desenho do círculo. O valor é instância da classe Paint. |
| radius | raio do círculo. |
| x, y | coordenadas do centro do círculo. |
Color pinta uma cor na tela, usando o blend_mode fornecido. A cor fornecida é a origem e o fundo o destino.
Uso: canvas.Color(color, blend_mode)
| blend_mode | modo de mesclagem a ser aplicado. O valor é do tipo BlendMode. |
| color | cor usada para pintar a tela. |
Um Fill preenche a tela com o Paint dado (definido abaixo). Para preencher a tela com cor sólida e modo de mesclagem, considere usar forma Color.
Uso: canvas.Fill(paint)
| paint | estilo de preenchimento da tela. O valor é instância da classe Paint. |
Line desenha uma linha entre os pontos dados usando paint. A linha é traçada e o valor do Paint.style é ignorado.
Uso: canvas.Line(x1, y1, x2, y2, paint)
| paint | estilo de desenho da linha. O valor é instância da classe Paint. |
| x1, y1 | coordenadas (x, y) do ponto inicial da linha. |
| x2, y2 | coordenadas (x, y) do ponto final da linha. |
Oval desenha uma figura oval (uma elipse) usando o Paint dado. A oval pode ser preenchida ou traçada (ou ambos), o que é controlado por Paint.style.
Uso: canvas.Oval(x, y, width, height, paint)
| height | altura do retângulo contendo a oval. |
| paint | estilo para desenhar uma oval. O valor é instância da classe Paint. |
| width | largura do retângulo contendo a oval. |
| x, y | coordenadas (x, y) do ponto superior esquerdo da oval. |
Path desenha um caminho com elementos fornecidos por Paint. A forma pode ser preenchida ou traçada (ou ambos), e isso é controlado por Paint.style. Se Path for preenchido, os subcaminhos serão implicitamente fechados (veja Path.Close).
Uso: canvas.Path(elements, paint)
| elements | lista de elementos do caminho. Os elementos possíveis estão listados abaixo. |
| paint | estilo para desenhar o caminho. O valor é instância da classe Paint. |
A tabela abaixo lista os possíveis elementos de Path:
| Path.MoveTo(x, y) | inicia um novo subcaminho no ponto (x,y). |
| Path.LineTo(x, y) | adiciona um segmento de reta do ponto atual ao ponto (x,y) dado. |
| Path.QuadraticTo(cp1x, cp2y, x, y, w) | adiciona um segmento bezier† do ponto atual até (x,y) dado, usando os pontos de controle (cp1x,cp1y). O peso w define o tipo de curva: se w> 1, hipérbole; w = 1, parábola; |
| Path.CubicTo(cp1x, cp1y, cp2x, cp2y, x, y) | adiciona um segmento cúbico bezier do ponto atual para (x,y), usando os pontos de controle (cp1x,cp1y) e (cp2x,cp2y). |
| Path.SubPath(elements, x, y) | adiciona subcaminho descrito por elements até (x,y). |
| Path.Arc(x, y, width, height, start_angle, sweep_angle) | adiciona subcaminho com um segmento de arco que segue a borda do oval delimitado por um retângulo. O retângulo tem canto superior esquerdo em (x, y) e dimensões width e height. O arco vai de start_angle radianos até start_angle + sweep_angle, crescendo no sentido horário. |
| Path.ArcTo(x, y, radius, rotation, large_arc, clockwise) | adiciona até quatro curvas cônicas ponderadas. radius é o raio; rotation a rotação dos eixos (em graus e sentido horário). A primeira curva começa no ponto atual, e a última termina em (x, y). O sentido do arco é definido por clockwise e large_arc. clockwise=True é sentido horário e o ângulo de varredura é sempre menor que 360 graus. Uma linha simples é acrescentada se radius=0. |
| Path.Oval(x, y, width, height) | adiciona um novo subcaminho que consiste em uma curva que forma a elipse que preenche o retângulo fornecido. |
| Path.Rect(x, y, width, height, border_radius) | adiciona um retângulo como um novo subcaminho. |
| Path.Close | fecha o último subcaminho, ligando o ponto atual até o primeiro ponto do subcaminho. |
Nota: †: Uma curva de Bezier é uma curva parametrizada que representa a interpolação linear entre os chamados pontos de controle. Normalmente, ela tem como objetivo aproximar uma forma que não tem representação matemática explícita ou com representação desconhecida ou complicada. Ela é usada principalmente em aplicações gráficas computadorizadas.
Points é o elemento que desenha uma sequência de pontos de acordo com o point_mode dado.
| paint | estilo para desenhar pontos. O valor é instância da classe Paint. |
| points | lista de ft.Offset descrevendo pontos. |
| point_mode | define como a lista de pontos é interpretada ao desenhar um conjunto de pontos. O valor é do tipo PointMode. |
Rect desenha um retângulo.
Uso: canvas.Rect(x, y, width, height, border_radius, paint)
| border_radius | raio da borda do retângulo. O valor é do tipo BorderRadius. |
| height | altura do retângulo. |
| paint | estilo para desenhar o retângulo. O valor é a instância da classe Paint. |
| width | largura do retângulo. |
| x, y | coordenadas (x,y) do ponto superior esquerdo do retângulo. |
Desenha uma sombra sob um caminho, representada com uma elevação elevation.
Uso: canvas.Shadow(color, elevation, path, transparent_occluder)
| color | cor da sombra. |
| elevation | elevação da sombra. |
| path | lista de objetos Path.PathElement que descrevem o caminho. |
| transparent_occluder | True se o objeto oclusivo não for opaco. Default é False. |
Text renderiza elemento de texto com style dado no ponto (x, y).
Uso: canvas.Text(x, y, text, alignment, rotate)
| alignment | ponto dentro de um retângulo de texto que define sua posição e centro de rotação. O valor é do tipo Alignment e o default é align.top_left. |
| ellipsis | String que define elipsis (três pontos: …) usados em texto maiores que o espaço disponível. |
| max_lines | número máximo de linhas exibidas. Além desse número as linhas são silenciosamente descartadas. Ex.: se max_lines = 1, só uma linha é renderizada. Se max_lines = None e ellipsis != None as linhas que seguem a primeira a ultrapassar as restrições de largura são descartadas. |
| max_width | largura máxima do texto renderizado. Default None (infinito). |
| rotate | rotação do texto em radianos, em torno do ponto determinado pelo alinhamento. |
| spans | lista de objetos TextSpan para criar um parágrafo de rich text. |
| style | estilo de texto para rederizar text e spans. O valor é instância da classe TextStyle. |
| text | texto a ser exibido. |
| text_align | alinhamento horizontal do texto. O valor é do tipo TextAlign com default TextAlign.LEFT. |
| x, y | coordenadas (x,y) do ponto de alinhamento do texto. |