Post: Grid com Canvas

Fala ai Radizeiros e Radizeiras, tudo bem com vocês?

Quantas vezes você quis pintar uma Grid usando o canvas e não encontrou nenhum material que lhe auxilie nisso, ou até mesmo tentou e não gostou do resultado.

Em nosso post anterior mostrei de como criar um layout responsivo, hoje estarei mostrando como pintar uma Grid em nosso PDV deixando com uma aparência que encante os clientes.

Iremos criar algumas ações para que possamos preencher nossa Grid, como você pode observar na imagem abaixo.

Essa Grid não é uma Grid comum, nós não temos esse tipo de DBGrid, StringGrid dentro do Delphi, e formatar isso dentro do Delphi da muito trabalho.

Iremos usar um recurso do Delphi que está inserido nele desde do Delphi 1, que é o Canvas.

Vamos lá?

Iremos utilizar o Canvas para pintar essas informações na tela.

Com nosso projeto aberto, irei acrescentar um Panel, e será nele que iremos criar nossa Grid.

Criaremos um método que irá pintar a Grid em nosso Panel adicionado no projeto.

procedure TForm1.pintarheader;
begin
    with TControlCanvas.Create do
    begin
        Control := Panel11; //Componente irá ser pintado
        Font.Color := RGB(80, 80, 80); //Cor da fonte
        Font.Size := 11; //Tamanho da fonte
        Font.Name := 'Segoe UI Light'; //Tipo da fonte
        Font.Style := [fsBold]; //Estilo da fonte
        TextOut(10, cont, 'Código'); //posição x e y, e valor a ser pintado.
        Free;
    end;

    with TControlCanvas.Create do
    begin
        Control := Panel11;
        Font.Color := RGB(80, 80, 80);
        Font.Size := 11;
        Font.Name := 'Segoe UI Light';
        TextOut(140, cont, 'Descrição');
        Free;
    end;

    with TControlCanvas.Create do
    begin
        Control := Panel11;
        Font.Color := RGB(80, 80, 80);
        Font.Size := 11;
        Font.Name := 'Segoe UI Light';
        TextOut(Panel11.Width - 230, cont, 'Qnt');
        Free;
    end;

    with TControlCanvas.Create do
    begin
        Control := Panel11;
        Font.Color := RGB(80, 80, 80);
        Font.Size := 11;
        Font.Name := 'Segoe UI Light';
        TextOut(Panel11.Width - 170, cont, 'Vr.Unit');
        Free;
    end;

    with TControlCanvas.Create do
    begin
        Control := Panel11;
        Font.Color := RGB(24, 127, 222);
        Font.Size := 11;
        Font.Name := 'Segoe UI Light';
        Font.Style := [fsBold];
        TextOut(Panel11.Width - 100, cont, 'Total');
        Free;
    end;

    with TControlCanvas.Create do
    begin
        Control := Panel11;
        Rectangle(10, cont + 30, Panel11.Width - 10, cont + 31);
        Free;
    end;
   
    cont := cont + 40;
end;

Com o código acima você pode observar que estamos criando o Canvas e esse cara que é o responsável por pintar, desenhar qualquer tipo de informação na tela na VCL.

E esse Canvas irá pintar informações dentro do Panel, onde foi definido em qual componente irá ser desenhado.

Em seguida definimos a cor da fonte, o tamanho, tipo da letra, estilo, e qual a posição x e y, e qual é o valor que irá ser pintado, como você pode ver nas primeiras linha comentários informando cada ação.

Dessa forma já possuímos o cabeçalho da nossa Grid, e agora iremos implementar um método que irá registrar os produtos.

procedure TForm1.pintarproduto;
begin

    with TControlCanvas.Create do
    begin
        Control := Panel11;
        Font.Color := RGB(24, 127, 222);
        Font.Size := 11;
        Font.Name := 'Segoe UI Light';
        Font.Style := [fsBold];
        TextOut(10, cont, '1234567890123');
        Free;
    end;

    with TControlCanvas.Create do
    begin
        Control := Panel11;
        Font.Color := RGB(80, 80, 80);
        Font.Size := 11;
        Font.Name := 'Segoe UI Light';
        TextOut(140, cont, 'Arroz Branco');
        Free;
    end;

    with TControlCanvas.Create do
    begin
        Control := Panel11;
        Font.Color := RGB(80, 80, 80);
        Font.Size := 11;
        Font.Name := 'Segoe UI Light';
        TextOut(Panel11.Width - 230, cont, '1,000x');
        Free;
    end;

    with TControlCanvas.Create do
    begin
        Control := Panel11;
        Font.Color := RGB(80, 80, 80);
        Font.Size := 11;
        Font.Name := 'Segoe UI Light';
        TextOut(Panel11.Width - 170, cont, 'R$ 13,00');
        Free;
    end;

    with TControlCanvas.Create do
    begin
        Control := Panel11;
        Font.Color := RGB(24, 127, 222);
        Font.Size := 11;
        Font.Name := 'Segoe UI Light';
        Font.Style := [fsBold];
        TextOut(Panel11.Width - 100, cont, 'R$ 13,00');
        Free;
    end;

    with TControlCanvas.Create do
    begin
        Control := Panel11;
        Rectangle(10, cont+30, Panel11.Width - 10, cont+31);
        Free;
     end;

     cont := cont + 40;
end;

Basicamente o mesmo código que usamos para desenhar o cabeçalho.

Agora dentro do evento OnKeyPress do formulário chamamos esses métodos, e ao clicarmos em qualquer tecla teremos os registros desenhados no nosso Panel.

A cada clique ele já cria o cabeçalho, logo em seguida já vai lançando os produtos em nossa list.

E de forma fácil e simples temos um layout responsivos, desenhando uma lista dos produtos na tela.

Dessa forma deixamos nosso PDV com uma cara mais atraente onde encanta nossos clientes, tudo isso usando funções nativas do próprio Delphi.

Neste post você aprendeu como trabalhar com o Canvas, e com esse pequeno exemplo você pode fazer diversas coisas em seus projetos.

Em falar de layout e designer responsivo, eu inicio hoje a 4ª semana de interfaces em Delphi, e nesta semana estarei disponibilizando 4 videos onde iremos mostrar na pratica como melhorar o visual do seu software e poder encantar seu clientes.

São 4 aulas totalmente grátis, isso mesmo 0800, basta clicar no link abaixo e fazer parte do grupo vip do WhatsApp e você receberá os links com para as aulas que estão sendo disponibilizadas essa semana.

CLIQUE AQUI E FAÇA PARTE DO NOSSO GRUPO VIP DA SEMANA DE INTERFACES EM DELPHI.