Outro controle de Layout
Controle DataTable
DataTable é um controle usado para dispor dados em forma tabular. Ele é composto de um cabeçalho definido na propriedade columns que recebe uma lista de flet.DataColumn(), em geral contendo um controle de texto. Ele também pode conter ícones ou uma linha (Row) com ícones e texto. As colunas podem ser definidas como texto ou numéricas e exibir botão de seleção e ordenamento. As linhas de dados são constituídas de flet.DataRow(), por sua vez preenchidas com flet.DataCell()
Um exemplo curto de DataTable é mostrado abaixo.
import flet as ft def main(page: ft.Page): def tit(texto): return ft.DataColumn(ft.Text(texto)) def cel(texto): return ft.DataCell(ft.Text(texto)) cabecalho=[tit("Título 1"), tit("Título 2"), tit("Título 3")] linha1=ft.DataRow(cells=[cel("A-1,1"), cel("A-1,2"), cel("A-1,3")]) linha2=ft.DataRow(cells=[cel("A-2,1"), cel("A-2,2"), cel("A-2,3")]) linha3=ft.DataRow(cells=[cel("A-3,1"), cel("A-3,2"), cel("A-3,3")]) linhas = [linha1, linha2, linha3] tabela=ft.DataTable(columns=cabecalho, rows=linhas) page.add(tabela) ft.app(target=main)
Propriedades de DataTable
Algumas das propriedades e eventos listados aqui são mais associados a ações provocadas por toques em telas sensíveis ao toque (touch screen), embora muitas vezes possam ser executadas também com cliques de mouse. Exemplos são os eventos:
- on_tap: recebimento de um toque,
- on_long_press: recebimento de um toque longo,
- on_tap_cancel: cancelamento do evento de toque, e
- on_tap_down: arrastamento para baixo.
Propriedade | Descrição |
---|---|
bgcolor | cor de fundo da tabela |
border | definição da borda da tabela. O valor deve ser uma instância da classe flet.Border. Veja a propriedade Container.border para mais informações. |
border_radius | raio dos cantos da borda.
Veja a propriedade Container.border para mais informações. |
checkbox_horizontal_margin | margin horizontal em torno das caixas de checagem (checkbox) se exibidas. |
column_spacing | margin horizontal entre o conteúdo de cada coluna. |
columns | lista de controle DataColumn descrevendo as colunas da tabela. |
data_row_color | cor de fundo das linhas de dados.
A cor de fundo pode ser ajustada para depender do estado do MaterialState, ou seja, com o estado da linha de selecionada, pressionada, percorrida pelo cursor, em foco, desabilitada ou não. [selected, pressed, hovered, focused, disabled or enabled]. A cor é renderizada como uma sobreposição à linha. Para garantir boa visibilidade é recomendado usar uma cor de fundo transparente. Veja a propriedade Checkbox.fill_color para mais informações. |
data_row_min_height | altura mínima de cada linha (exceto a linha com o cabeçalho). |
data_row_max_height | altura máxima de cada linha (exceto a linha com o cabeçalho). |
data_text_style | estilo de texto para as linhas de dados. O valor deve ser uma instância da classe flet.TextStyle. |
divider_thickness | espessura do divisor (divider) entre as linhas da tabela. Esse valor deve ser ≥ 0, sendo o default 1.0 . |
gradient | gradiente de cor aplicado ao fundo da tabela. Veja a propriedade Container.gradient para mais informações. |
heading_row_color | cor de fundo para a linha de cabeçalho.
A cor de fundo pode ser ajustada para depender do estado do MaterialState, ou seja, com o estado da linha de selecionada, pressionada, percorrida pelo cursor, em foco, desabilitada ou não. [selected, pressed, hovered, focused, disabled or enabled]. A cor é renderizada como uma sobreposição à linha. Para garantir boa visibilidade é recomendado usar uma cor de fundo transparente. Veja a propriedade Checkbox.fill_color para mais informações. |
heading_row_height | altura da linha de cabeçalho. |
heading_text_style | estilo de texto para a linha de cabeçalho. O valor deve ser uma instância da classe flet.TextStyle. |
horizontal_lines | ajusta cor e largura das linhas horizontais separando as linhas de dados. O valor deve ser uma instância da classe flet.BorderSide. |
horizontal_margin | margem horizontal entre as bordas da tabela e o conteúdo da primeira e última célula de cada linha. Também é a margem entre uma caixa de checagem (checkbox) (quando exibida) e o conteúdo da primeira coluna de dados. |
rows | uma lista de controles DataRow que definem as linhas da tabela. |
show_bottom_border | booleano, se a borda de fundo da tabela é exibida. Por default essa borda não é visível para que se aplique uma decoração sobre a borda geral da tabela. |
show_checkbox_column | booleano, se o controle deve conter caixas checkboxes para linhas selecionáveis.
Quando False nenhuma checkbox será apresentada. Quando True uma checkbox será apresentada no início de cada linha selecionável. Caso nenhuma linha seja marcada com |
sort_ascending | booleano, se a coluna indicada em sort_column_index (caso exista) será ordenada em ordem crescente. Caso contrário, se sort_ascending=False a ordem será descendente. |
sort_column_index | indica a chave primária de ordenação das linhas. Se especificada a colunas marcada será usada para a ordenação. O número deve indicar a coluna, em numeração iniciando em 0. Quando especificada a coluna mostrará um indicador de que o ordenamento é possível. Quando sort_column_index=None nenhum ordenamento será realizado. |
vertical_lines | cor e largura das linhas verticais entre colunas. O valor deve ser uma instância de classe flet.BorderSide. |
Evento de DataTable
on_select_all | dispara quando o usuário seleciona (ou desseleciona) todas as linhas usando o checkbox no cabeçalho.
Se |
DataColumn
Objeto de configuração das colunas de uma DataTable. Todas as colunas a serem exibidas na tabela devem ter uma coluna de configuração.
Propriedades de DataColumn
label | Conteúdo apresentado no cabeçalho. Em geral um controle de texto mas pode ser um ícone (tipicamente com size=18), ou uma coluna com ícone e texto. |
numeric | booleano, se essa coluna exibe valores numéricos. Colunas com valores numéricos são alinhadas à direita. |
tooltip | uma dica (tooltip) para a coluna. Pode conter uma descrição maior que o título ou mesmo título completo quando esse for abreviado na redução da largura da janela. |
Evento de DataColumn
on_sort | disparado quando o usuário requisita o ordenamento da tabela usando essa coluna. Se não for especificada uma função para esse evento a coluna será considerada não ordenável. |
DataRow
Objeto de configuração das linhas e células de uma DataTable. Deve exitir uma linha de confighuração para cada linha da tabela. Os dados contidos na linhas são inseridos por meio de objetos flet.DataCells, reunidos em listas atribuidas à propriedade flet.DataRow(cells).
Propriedades de DataRow
cells | recebe os dados a serem exibidos por meio de uma lista de controles DataCell. Devem existir células para todas as colunas (o número de células e colunas devem serem iguais). |
color | a cor da linha. Por default essa cor é transparente quando a linha não está selecionada, e recebem uma coloração acinzentada transparente quando selecioandas.
O cor exibida como resultado final depende do estado do MaterialState se a linha está selecionada, pressionada, percorrida pelo cursor, em foco, desabilitada ou não. [selected, pressed, hovered, focused, disabled or enabled]. A cor é renderizada como uma sobreposição à linha. Para garantir boa visibilidade é recomendado usar uma cor de fundo transparente. Veja a propriedade Checkbox.fill_color para mais informações. |
selected | booleano, define se a linha está selecionda.
Se on_select_changed é não nula para alguma linha da tabela uma caixa checkbox é exibida no início de cada linha. Caso |
Eventos de DataRow
on_long_press | disparado quando a linha recebe um clique ou pressionamento longo.
Se uma célula DataCell na linha contém a definição de ação para os eventos |
on_select_changed | disparado quando o usuário seleciona ou desseleciona uma linha selecionável.
A linha é selecionável se essa propriedade não for nula. O estado da linha atual fica marcado na propriedade selected. Se qualquer uma das linhas é selecionável o cabeçalho apresentará um checkbox que pode ser marcado para selecionar todas as linhas selecionáveis. Esse checkbox aparece marcado se todas as linhas estiverem selecionadas. Linhas subsequentes recebem um checkbox para sua seleção individual. Se uma linha tem o evento Se uma das células DataCell da linha tem o evento DataCell.on_tap definido, então essa definição sobrescreverá, naquela célula, os eventos definidos para a linha em geral. |
DataCell
O objeto DataCell contém os dados para cada entrada em uma tabela DataTable. Uma lista de objetos
DataCell deve ser fornecida para cada linha, contendo o exato número de células que o de colunas.
Propriedades de DataCell
content | o conteúdo com dados a serem apresentados em cada célula. Em geral contém um controle de texto um Dropdown.
Se não existem dados nessa propriedade o controle de texto será preenchido com um texto substituto (placeholder) e deve ser marcada a propriedade Esse controle só admite um filho. Para incluir layouts mais complexos é necessário inserir um widget tal como Row, Column ou Stack, que têm a propriedade controls que podem abrigar múltiplos filhos. |
placeholder | booleano, se o conteúdo é um texto substituto (placeholder).
Se |
show_edit_icon | booleano, se o ícone de edição deve ser mostrado no final da célula. Essa propriedade não torna a célula editável. Esse comportamento deve ser definido no evento DataCell.on_tap. |
Eventos de DataCell
on_double_tap | disparado no duplo toque da célula†. |
on_long_press | disparado no toque prolongado da célula†. |
on_tap | disparado no toque da célula†. |
on_tap_cancel | disparado se o usuário cancela um toque†. |
on_tap_down | disparado se a célula é puxada para baixo†. |
Nota † válido para todos os eventos de DataCell | Se não-nulo, o duplo toque da célula dispara esse evento. Se nulo o toque apenas seleciona a linha. Esse comportamento se extende a on_tap, on_long_press, on_tap_cancel e on_tap_down, caso DataRow.on_select_changed tenha sido definido. |
Exemplo de uso de DataTable, DataRow e DataCell
Um exemplo um pouco mais elaborado de DataTable aparece no código abaixo.
import flet as ft def main(page: ft.Page): page.bgcolor="#BAD1EA" def formatar_tabela(t): t.bgcolor="#0E64C5" t.border=ft.border.all(3, "#304864") t.border_radius=5 t.data_row_color="#6697CE" t.show_checkbox_column=True t.divider_thickness=2 t.column_spacing=100 t.sort_column_index=2 t.sort_ascending=True t.heading_row_color="#1565C2" t.heading_row_height=60 t.show_checkbox_column=True t.show_bottom_border=True def montar_tabela(matriz): cor=["#759DCB", "#DABD90"] colunas=[] for col in matriz[0]: colunas.append(ft.DataColumn(ft.Text(col))) linhas=[] i=0 for linha in matriz[1:]: i+=1 celulas=[] for celula in linha: celulas.append( ft.DataCell( ft.Text(celula, color="#000000"), show_edit_icon=(i%2==0) ) ) linhas.append(ft.DataRow(cells=celulas, color=cor[i%2])) tabela=ft.DataTable(columns=colunas, rows=linhas) formatar_tabela(tabela) return tabela matriz = [ ["Nome", "Sobrenome", "Idade", "Profissão", "Nacionalidade"], ["Cristovão", "Colombo", "43", "Navegador", "Itália"], ["Joaquim", "José", "31", "Militar", "Brasil"], ["Maria", "Joaquina", "23", "Realeza", "Portugal"], ["Albert", "Einstein", "57", "Físico", "Alemanha"], ["Charles", "Chaplin", "73", "Ator", "França"] ] tabela = montar_tabela(matriz) page.add(ft.Text("Famosos na História", size=20,color="BLACK"), tabela) ft.app(target=main)
O código mostra um exemplo de transformação de formato de dados† obtidos inicialmente como uma matriz formada por uma lista de listas. A primeira linha é usada para capturar os títulos de cada coluna, as demais são os dados exibidos no corpo da tabela. A vantagem desse método está em que a tabela pode ter um número arbitrário de colunas e de linhas.
A função montar_tabela(matriz)
(que recebe matriz, uma lista de listas) percorre as linhas e colunas montando o objeto DataTable. Antes de retornar o objeto tabela montado ele a submete à formatar_tabela(t). Lembramos que objetos são passados por referência no Python, por default. Isso significa que a variável t recebida como parâmetro da função é apenas apenas uma referência para o mesmo objeto indicado pela variável tabela e as transformações feitas nas propriedades dentro da função são efetivas no objeto retornado por montar_tabela(matriz)
.