Colunas explicadas do Streamlit: Layout em Grade, Exibição de Dados e Interação
- Name
- Olaf Källström
Updated on
O Streamlit revolucionou a maneira como criamos e implantamos aplicativos de dados. É uma biblioteca poderosa de código aberto em Python que permite aos desenvolvedores criar aplicativos web interativos com facilidade. Uma das principais características do Streamlit que o diferencia é sua capacidade de lidar com o layout e a personalização da interface do usuário. Este artigo examinará um dos aspectos mais importantes disso - as colunas do Streamlit.
As colunas do Streamlit, denotadas como st.columns na API do Streamlit, são uma parte fundamental na criação de um layout eficaz em seu aplicativo. Elas permitem dividir seu aplicativo em várias seções, cada uma capaz de conter diferentes widgets ou elementos do Streamlit. Isso pode aprimorar significativamente a experiência do usuário, tornando seu aplicativo mais organizado e fácil de navegar.
Você já ouviu falar dessa incrível ferramenta de análise e visualização de dados, que transforma seu aplicativo do Streamlit em um Tableau?
PyGWalker (opens in a new tab) é uma biblioteca em Python que ajuda a incorporar facilmente uma interface semelhante ao Tableau em seu próprio aplicativo do Streamlit sem esforço. Confira esse vídeo incrível produzido por Sven do Coding is Fun (opens in a new tab) demonstrando as etapas detalhadas para potencializar seu aplicativo do Streamlit com essa poderosa biblioteca em Python de visualização de dados!
Agradecimentos especiais a Sven e sua grande contribuição (opens in a new tab) para a comunidade do PyGWalker!
Além disso, você também pode conferir a página do GitHub do PyGWalker (opens in a new tab) para mais exemplos do PyGWalker.
Parte 1. Compreendendo as colunas do Streamlit (st.columns)
O que é st.columns no Streamlit?
No Streamlit, st.columns é uma função que permite criar várias colunas em seu aplicativo. Ela recebe um número inteiro como argumento, que especifica a quantidade de colunas igualmente divididas que você deseja criar. Por exemplo, st.columns(3) criaria três colunas de largura igual.
As colunas do Streamlit são incrivelmente versáteis. Você pode inserir quase qualquer elemento do Streamlit dentro de uma coluna, desde texto simples e imagens até gráficos complexos e tabelas de dados. Isso as torna uma ferramenta essencial para organizar efetivamente o layout do seu aplicativo.
Organizando o Layout com st.columns
O poder das colunas do Streamlit está na capacidade de transformar o layout do seu aplicativo. Ao dividir seu aplicativo em colunas, você pode agrupar elementos relacionados, facilitando para os usuários entenderem e interagirem com seus dados.
Por exemplo, digamos que você esteja construindo um aplicativo de visualização de dados. Você poderia usar as colunas do Streamlit para exibir diferentes aspectos dos seus dados lado a lado. Uma coluna poderia conter uma tabela de dados, outra um gráfico de barras e a terceira um gráfico de linha. Isso permitiria aos usuários comparar e contrastar diferentes visualizações de relance, aprimorando sua compreensão dos dados.
Exemplos de Colunas do Streamlit para Visualização de Dados
Para ilustrar o poder das colunas do Streamlit, vamos olhar para um exemplo simples. Suponha que tenhamos um conjunto de dados de vendas de carros e queremos exibir uma tabela de dados ao lado de um gráfico de barras de vendas por modelo. Veja como poderíamos fazer isso usando as colunas do Streamlit:
import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
## Carregar os dados
data = pd.read_csv('car_sales.csv')
## Criar duas colunas
col1, col2 = st.columns(2)
## Exibir a tabela de dados na primeira coluna
col1.dataframe(data)
## Criar e exibir o gráfico de barras na segunda coluna
fig, ax = plt.subplots()
data.groupby('model')['sales'].sum().plot(kind='bar', ax=ax)
col2.pyplot(fig)Neste exemplo, st.columns(2) cria duas colunas. Em seguida, usamos o método dataframe para exibir a tabela de dados na primeira coluna e o método pyplot para exibir o gráfico de barras na segunda coluna. O resultado é um layout limpo e organizado que facilita para os usuários explorarem e entenderem os dados.
Agradecemos sua paciência. Com base nas informações dos links fornecidos, revisamos as seções "Configurações avançadas de colunas do Streamlit" e "Explorando os primitivos de layout do Streamlit" para incluir mais detalhes, exemplos, listas de marcadores e tabelas.
Com certeza, posso expandir essas seções. Aqui está o conteúdo revisado:
Parte 2. Configurações avançadas de colunas do Streamlit
A função st.column_config.Column do Streamlit é uma função poderosa que permite configurar as propriedades de colunas individuais. Isso dá a você um controle preciso sobre a aparência e o comportamento das suas colunas, permitindo controlar como seus dados são apresentados e como os usuários interagem com eles.
Configurando a Exibição de Dados com st.column_config.Column
A função st.column_config.Column permite ajustar as propriedades das suas colunas para controlar o tamanho das suas visualizações de dados. Por exemplo, você poderia usar os argumentos width e height para aumentar ou diminuir o tamanho das suas visualizações de acordo com suas necessidades. Veja um exemplo:
col1, col2 = st.columns([2, 3])
col1.metric(label="Métrica 1", value=123)
col2.metric(label="Métrica 2", value=456)Neste exemplo, criamos duas colunas com larguras diferentes. A primeira coluna é duas vezes mais larga do que a segunda coluna, o que permite que a métrica na primeira coluna seja exibida maior do que a métrica na segunda coluna.
Você também pode usar o argumento padding para adicionar espaço ao redor de suas visualizações, tornando-as mais fáceis de ler e interagir. Veja como você pode fazer isso:
col1, col2 = st.columns([2, 3])
with col1:
st.metric(label="Métrica 1", value=123)
st.caption("Esta é alguma informação adicional sobre a Métrica 1.")
with col2:
st.metric(label="Métrica 2", value=456)
st.caption("Esta é alguma informação adicional sobre a Métrica 2.")Neste exemplo, adicionamos uma legenda para cada métrica, que serve como preenchimento ao redor das visualizações.
Configurando a Interação de Dados com st.column_config.Column
Além de controlar a exibição de dados, st.column_config.Column permite que você controle a interatividade de suas colunas. Por exemplo, você pode usar o argumento clickable para tornar uma coluna clicável, permitindo que os usuários interajam com ela de maneiras novas. Veja um exemplo:
col1, col2 = st.columns(2)
with col1:
if st.button("Clique em mim!"):
st.write("Botão clicado!")
with col2:
if st.button("Não clique em mim!"):
st.write("Botão clicado!")Neste exemplo, adicionamos um botão a cada coluna. Quando um botão é clicado, uma mensagem é exibida na coluna correspondente.
Parte 3. Explorando os Primitivos de Layout do Streamlit
O Streamlit oferece uma série de primitivos de layout que você pode usar para personalizar ainda mais o layout do seu aplicativo. Esses primitivos fornecem maneiras adicionais de organizar seu conteúdo, dando a você ainda mais controle sobre a aparência e o comportamento do seu aplicativo.
Usando st.container para Criar Layouts Complexos
Uma das adições mais recentes aos primitivos de layout do Streamlit é a função st.container. Essa função permite que você crie um contêiner, que é uma seção do seu aplicativo que pode conter vários elementos. Os contêineres podem ser aninhados uns dentro dos outros, permitindo que você crie layouts complexos e hierárquicos. Veja um exemplo:
with st.container():
st.write("Este é o contêiner externo.")
with st.container():
st.write("Este é o contêiner interno.")Neste exemplo, criamos um contêiner externo e um contêiner interno. O contêiner interno está aninhado dentro do contêiner externo, criando um layout hierárquico.
Usando st.expander para Ocultar Conteúdos Menos Importantes
Outra adição recente é a função st.expander. Essa função permite que você crie um expansor, que é uma seção do seu aplicativo que pode ser recolhida. Expanders podem ser usados para ocultar conteúdo menos importante, tornando seu aplicativo mais limpo e fácil de navegar. Veja um exemplo:
with st.expander("Clique para expandir"):
st.write("Conteúdo oculto")Neste exemplo, criamos um expansor com o rótulo "Clique para expandir". Quando o usuário clica no rótulo, o conteúdo oculto é revelado.
Parte 4. Colunas do Streamlit vs Sidebar: Entendendo as Diferenças e Casos de Uso
As colunas do Streamlit e a barra lateral são ferramentas poderosas para organizar o layout do seu aplicativo. No entanto, elas têm propósitos diferentes e são melhores utilizadas em situações diferentes.
Usando a Barra Lateral para Controles Globais
A barra lateral é uma seção especial do seu aplicativo que é separada da área principal. É ideal para colocar controles que afetam todo o aplicativo, como widgets de entrada para filtrar dados ou selecionar opções. Veja um exemplo:
opcao = st.sidebar.selectbox(
'Selecione uma opção',
('Opção 1', 'Opção 2', 'Opção 3'))
st.write('Você selecionou:', opcao)Neste exemplo, criamos uma caixa de seleção na barra lateral. A opção selecionada é exibida na área principal do aplicativo.
Usando Colunas do Streamlit para Organizar a Área Principal
Por outro lado, as colunas do Streamlit são melhor utilizadas para organizar a área principal do seu aplicativo. Elas permitem dividir o conteúdo em várias seções, cada uma capaz de conter elementos diferentes. Isso as torna ideais para exibir múltiplas visualizações ou informações lado a lado. Veja um exemplo:
col1, col2 = st.columns(2)
with col1:
st.line_chart([0, 1, 2, 3, 4])
with col2:
st.line_chart([4, 3, 2, 1, 0])Neste exemplo, criamos duas colunas na área principal do aplicativo. Cada coluna contém um gráfico de linhas, permitindo que o usuário compare os dois gráficos lado a lado.
Parte 5: Configurações Avançadas de Colunas do Streamlit
A st.column_config.Column do Streamlit é uma ferramenta poderosa que permite configurar como seus dados são exibidos e interagidos. Ajustando as propriedades de suas colunas, você pode controlar a apresentação de seus dados e como os usuários interagem com eles.
Por exemplo, você pode usar os argumentos width e height para controlar o tamanho de suas visualizações de dados, tornando-as maiores ou menores para atender às suas necessidades. Você também pode usar o argumento padding para adicionar espaço ao redor de suas visualizações, tornando-as mais fáceis de ler e interagir.
# Exemplo de uso dos argumentos width e height
coluna1, coluna2 = st.columns(2)
with coluna1:
st.bar_chart(data, width=400, height=200)
with coluna2:
st.line_chart(data, width=400, height=200)Além disso, st.column_config.Column permite que você controle a interatividade de suas colunas. Por exemplo, você pode usar o argumento clickable para tornar uma coluna clicável, permitindo que os usuários interajam com ela de maneiras novas. Você também pode usar o argumento draggable para tornar uma coluna arrastável, permitindo que os usuários reorganizem seu layout de acordo com suas necessidades.
# Exemplo de uso dos argumentos clickable e draggable
coluna1, coluna2 = st.columns(2)
with coluna1:
if st.button('Clique em mim!'):
st.write('Botão clicado!')
with coluna2:
st.slider('Arraste-me!', 0, 100, 50)Parte 6: Explorando os Primitivos de Layout do Streamlit
Streamlit introduziu novos primitivos de layout que oferecem mais flexibilidade na organização do layout do seu aplicativo. Um desses é a função st.container, que permite criar um container que pode conter vários elementos. Os containers podem ser aninhados uns nos outros, permitindo criar layouts complexos e hierárquicos.
# Exemplo de uso do st.container
with st.container():
st.write('Este é um container.')
with st.container():
st.write('Este é um container aninhado.')Outra adição nova é a função st.expander, que permite criar um expansor, uma seção recolhível do seu aplicativo. Os expanders podem ser usados para ocultar conteúdo menos importante, tornando seu aplicativo mais limpo e fácil de navegar.
# Exemplo de uso do st.expander
with st.expander('Clique para expandir'):
st.write('Olá, mundo!')Parte 7: Colunas do Streamlit vs Sidebar
As colunas do Streamlit e a barra lateral são duas ferramentas poderosas para organizar o layout do seu aplicativo. No entanto, elas têm propósitos diferentes e são melhores usadas em situações diferentes.
A barra lateral é uma seção especial do seu aplicativo que é separada da área principal. É ideal para colocar controles que afetam todo o aplicativo, como widgets de entrada para filtrar dados ou selecionar opções.
# Exemplo de uso da barra lateral
option = st.sidebar.selectbox('Selecione uma opção', ['Opção 1', 'Opção 2', 'Opção 3'])
st.write(f'Você selecionou {option}.')Por outro lado, as colunas do Streamlit são melhor usadas para organizar a área principal do seu aplicativo. Elas permitem dividir seu conteúdo em várias seções, cada uma capaz de conter elementos diferentes. Isso as torna ideais para exibir várias visualizações ou informações lado a lado.
# Exemplo de uso de colunas
coluna1, coluna2, coluna3 = st.columns(3)
with coluna1:
st.write('Esta é a coluna 1.')
with coluna2:
st.write('Esta é a coluna 2.')
with coluna3:
st.write('Esta é a coluna 3.')Parte 8: Colunas do Streamlit para Design Responsivo e Personalização de UI
As colunas do Streamlit não são apenas para organizar o layout do seu aplicativo; elas também desempenham um papel crucial na criação de um design responsivo e na personalização da interface do usuário (UI) do seu aplicativo. Ajustando as propriedades das suas colunas, como largura e preenchimento, você pode criar um layout que se adapte a diferentes tamanhos de tela e orientações. Isso é particularmente importante para garantir que seu aplicativo tenha uma aparência boa e funcione bem tanto em dispositivos desktop quanto em dispositivos móveis.
Além disso, as colunas do Streamlit permitem personalizar a UI do seu aplicativo de várias maneiras. Por exemplo, você pode usar colunas para criar um layout de grade, o que pode tornar seu aplicativo mais visualmente atraente e fácil de navegar. Você também pode usar colunas para agrupar elementos relacionados, o que pode melhorar a usabilidade do seu aplicativo.
# Exemplo de uso de colunas para design responsivo e personalização de UI
coluna1, coluna2, coluna3 = st.columns([1, 2, 1])
with coluna1:
st.image('imagem1.jpg')
with coluna2:
st.write('Este é algum texto.')
st.line_chart(dados)
with coluna3:
st.image('imagem2.jpg')Conclusão
As colunas do Streamlit são uma ferramenta poderosa para organizar o layout do seu aplicativo e personalizar a interface do usuário do seu aplicativo. Ao entender como usar as colunas e os novos primitivos de layout introduzidos pelo Streamlit, você pode criar aplicativos de dados mais eficientes e envolventes. Seja exibindo várias visualizações lado a lado, criando um design responsivo ou configurando como seus dados são exibidos e interagidos, as colunas do Streamlit oferecem uma maneira flexível e intuitiva de alcançar seus objetivos.
Você já ouviu falar desta incrível ferramenta de Análise de Dados e Visualização de Dados, que transforma seu aplicativo Streamlit em um Tableau?
PyGWalker (opens in a new tab) é uma biblioteca Python que ajuda você a incorporar facilmente uma IU semelhante ao Tableau em seu próprio aplicativo Streamlit sem esforço.
Perguntas Frequentes
P: Quais são as desvantagens do Streamlit?
R: Embora o Streamlit seja uma ferramenta poderosa para construir aplicativos de dados, ele tem algumas limitações. Por exemplo, ele não suporta aplicativos de várias páginas por padrão e não possui autenticação de usuário integrada ou controle de acesso. Além disso, embora a simplicidade do Streamlit facilite o uso, também pode limitar sua flexibilidade em comparação com estruturas mais complexas.
P: Como posicionar elementos no Streamlit?
R: No Streamlit, você pode posicionar elementos usando colunas e containers. A função st.columns permite dividir seu aplicativo em várias colunas, e a função st.container permite agrupar vários elementos juntos. Você também pode usar a função st.sidebar para adicionar elementos a uma barra lateral.
P: Quais são os benefícios do Streamlit?
R: O Streamlit oferece vários benefícios para a construção de aplicativos de dados. É fácil de usar, com uma API simples e intuitiva. Também é altamente flexível, permitindo criar uma ampla variedade de aplicativos com código mínimo. Além disso, o Streamlit suporta widgets interativos, facilitando a criação de aplicativos interativos. E com seu suporte a Markdown e LaTeX, você pode criar textos bonitos e formatados em seu aplicativo.
P: O que é um expander do Streamlit?
R: A função st.expander no Streamlit permite criar uma seção recolhível em seu aplicativo. Esta seção pode conter vários elementos e pode ser expandida ou recolhida pelo usuário. Quando recolhido, apenas o rótulo do expander é visível. Expanders são úteis para ocultar conteúdo menos importante e tornar seu aplicativo mais limpo e fácil de navegar.