Streamlit-Spalten erklärt: Gitterlayout, Datenanzeige und Interaktion

Q: Was ist Streamlit Expander?

Die Funktion `st.expander` in Streamlit ermöglicht es Ihnen, einen ausklappbaren Abschnitt in Ihrer App zu erstellen. Dieser Abschnitt kann mehrere Elemente enthalten und vom Benutzer erweitert oder ausgeblendet werden. Im ausgeklappten Zustand ist nur die Beschriftung des Expanders sichtbar. Expanders sind nützlich, um weniger wichtigen Inhalt zu verstecken und Ihre App sauberer und benutzerfreundlicher zu gestalten.

Name: Olaf Källström

Updated on 24.7.2023

Streamlit hat die Art und Weise, wie wir Datenanwendungen erstellen und bereitstellen, revolutioniert. Es handelt sich um eine leistungsstarke, Open-Source-Python-Bibliothek, die es Entwicklern ermöglicht, interaktive, webbasierte Anwendungen mühelos zu erstellen. Eine der wichtigsten Funktionen von Streamlit, die es von anderen unterscheidet, ist die Möglichkeit, Layout und UI-Anpassung zu handhaben. Dieser Artikel wird sich mit einem der wichtigsten Aspekte davon befassen - Streamlit-Spalten.

Streamlit-Spalten, die in der Streamlit-API als st.columns bezeichnet werden, sind ein grundlegender Bestandteil bei der Erstellung eines effektiven Layouts für Ihre Anwendung. Sie ermöglichen es Ihnen, Ihre App in mehrere Abschnitte aufzuteilen, von denen jeder verschiedene Streamlit-Widgets oder Elemente aufnehmen kann. Dies kann die Benutzererfahrung erheblich verbessern, indem Ihre Anwendung besser organisiert und einfacher zu navigieren ist.

Haben Sie von diesem großartigen Datenanalyse- und Datenvisualisierungstool gehört, das Ihre Streamlit-App in Tableau verwandelt?

PyGWalker (opens in a new tab) ist eine Python-Bibliothek, mit der Sie problemlos eine Tableau-ähnliche Benutzeroberfläche in Ihre eigene Streamlit-App integrieren können. Schauen Sie sich dieses erstaunliche Video an, das von Wie man Daten mit PyGWalker in Python erkundet (opens in a new tab) produziert wurde und die detaillierten Schritte zur Stärkung Ihrer Streamlit-App mit dieser leistungsstarken Data Visualization Python Library demonstriert!

Herzlichen Dank an Sven und seinen großartigen Beitrag (opens in a new tab) zur PyGWalker-Community!

Außerdem können Sie weitere PyGWalker-Beispiele auf der PyGWalker-GitHub-Seite (opens in a new tab) finden.

Teil 1. Verständnis der Streamlit-Spalten (st.columns)

Was ist st.columns in Streamlit?

In Streamlit ist st.columns eine Funktion, mit der Sie mehrere Spalten in Ihrer Anwendung erstellen können. Als Argument nimmt sie eine Ganzzahl, die angibt, wie viele gleich große Spalten Sie erstellen möchten. Zum Beispiel würde st.columns(3) drei Spalten von gleicher Breite erstellen.

Streamlit-Spalten sind unglaublich vielseitig. Sie können fast jedes Streamlit-Element in einer Spalte platzieren, von einfachem Text und Bildern bis hin zu komplexen Diagrammen und Daten tabellen. Dadurch werden sie zu einem unverzichtbaren Werkzeug, um das Layout Ihrer Anwendung effektiv zu organisieren.

Layout organisieren mit st.columns

Die Stärke von Streamlit-Spalten liegt in ihrer Fähigkeit, das Layout Ihrer Anwendung zu transformieren. Indem Sie Ihre App in Spalten aufteilen, können Sie verwandte Elemente zusammenfassen und es Benutzern erleichtern, Ihre Daten zu verstehen und damit zu interagieren.

Nehmen wir zum Beispiel an, Sie erstellen eine Datenvisualisierungs-App. Sie könnten Streamlit-Spalten verwenden, um verschiedene Aspekte Ihrer Daten nebeneinander anzuzeigen. Eine Spalte könnte eine Datentabelle enthalten, eine andere ein Balkendiagramm und die dritte eine Liniengraphik. Dadurch können Benutzer verschiedene Visualisierungen auf einen Blick vergleichen und kontrastieren und ihr Verständnis der Daten verbessern.

Beispiele für Streamlit-Spalten zur Datenvisualisierung

Um die Leistungsfähigkeit von Streamlit-Spalten zu veranschaulichen, schauen wir uns ein einfaches Beispiel an. Angenommen, wir haben einen Datensatz über den Verkauf von Autos, und wir möchten eine Datentabelle neben einem Balkendiagramm der Verkäufe nach Modell anzeigen. So könnten wir es mit Streamlit-Spalten machen:

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
 
## Daten laden
data = pd.read_csv('car_sales.csv')
 
## Zwei Spalten erstellen
col1, col2 = st.columns(2)
 
## Die Datentabelle in der ersten Spalte anzeigen
col1.dataframe(data)
 
## Balkendiagramm in der zweiten Spalte erstellen und anzeigen
fig, ax = plt.subplots()
data.groupby('model')['sales'].sum().plot(kind='bar', ax=ax)
col2.pyplot(fig)

In diesem Beispiel erstellt st.columns(2) zwei Spalten. Wir verwenden dann die Methode dataframe, um die Datentabelle in der ersten Spalte anzuzeigen, und die Methode pyplot, um das Balkendiagramm in der zweiten Spalte anzuzeigen. Das Ergebnis ist ein sauberes, organisiertes Layout, das es Benutzern ermöglicht, die Daten zu erkunden und zu verstehen.

Danke für Ihre Geduld. Basierend auf den Informationen aus den bereitgestellten Links habe ich die Abschnitte "Erweiterte Streamlit-Spaltenkonfigurationen" und "Erkunden von Streamlit-Layout-Primitiven" überarbeitet, um mehr Details, Beispiele, Aufzählungslisten und Tabellen einzuschließen.

Natürlich kann ich diese Abschnitte erweitern. Hier ist der überarbeitete Inhalt:

Teil 2. Erweiterte Streamlit-Spaltenkonfigurationen

Mit Streamlits st.column_config.Column können Sie die Eigenschaften einzelner Spalten konfigurieren. Dies ermöglicht Ihnen eine feinere Kontrolle über das Erscheinungsbild und Verhalten Ihrer Spalten und ermöglicht es Ihnen, zu steuern, wie Ihre Daten präsentiert und wie Benutzer damit interagieren.

Konfigurieren der Datenanzeige mit st.column_config.Column

Mit der Funktion st.column_config.Column können Sie die Eigenschaften Ihrer Spalten so anpassen, dass die Größe Ihrer Datenvisualisierungen gesteuert wird. Sie können zum Beispiel die Argumente width und height verwenden, um Ihre Visualisierungen größer oder kleiner zu machen, je nach Bedarf. Hier ein Beispiel:

col1, col2 = st.columns([2, 3])
col1.metric(label="Metrik 1", value=123)
col2.metric(label="Metrik 2", value=456)

In diesem Beispiel erstellen wir zwei Spalten mit unterschiedlichen Breiten. Die erste Spalte ist doppelt so breit wie die zweite Spalte, sodass die Metrik in der ersten Spalte größer dargestellt werden kann als die Metrik in der zweiten Spalte.

Sie können auch das padding-Argument verwenden, um um Ihre Visualisierungen herum Platz hinzuzufügen und sie so leichter lesbar und interaktiv zu machen. So geht's:

col1, col2 = st.columns([2, 3])
with col1:
    st.metric(label="Metrik 1", value=123)
    st.caption("Hier finden Sie zusätzliche Informationen zur Metrik 1.")
with col2:
    st.metric(label="Metrik 2", value=456)
    st.caption("Hier finden Sie zusätzliche Informationen zur Metrik 2.")

In diesem Beispiel fügen wir jeder Metrik eine Bildunterschrift hinzu, die als Padding um die Visualisierungen dient.

Konfigurieren der Dateninteraktion mit `st.column_config.Column`

Zusätzlich zur Steuerung der Datendarstellung ermöglicht es st.column_config.Column, die Interaktivität Ihrer Spalten zu steuern. Zum Beispiel können Sie das clickable-Argument verwenden, um eine Spalte anklickbar zu machen und Benutzern neue Interaktionsmöglichkeiten zu bieten. Hier ist ein Beispiel:

col1, col2 = st.columns(2)
with col1:
    if st.button("Klick mich!"):
        st.write("Button geklickt!")
with col2:
    if st.button("Klick mich nicht!"):
        st.write("Button geklickt!")

In diesem Beispiel fügen wir jeder Spalte einen Button hinzu. Wenn ein Button geklickt wird, wird eine Nachricht in der entsprechenden Spalte angezeigt.

Teil 3: Erkunden der Streamlit-Layout-Primitiven

Streamlit bietet eine Reihe von Layout-Primitiven, mit denen Sie das Layout Ihrer Anwendung weiter anpassen können. Diese Primitiven bieten zusätzliche Möglichkeiten, Ihren Inhalt zu organisieren und geben Ihnen noch mehr Kontrolle über das Aussehen und Verhalten Ihrer Anwendung.

Verwendung von `st.container` zum Erstellen komplexer Layouts

Eine der neuesten Ergänzungen zu Streamlits Layout-Primitiven ist die Funktion st.container. Mit dieser Funktion können Sie einen Container erstellen, der einen Abschnitt Ihrer App enthält und mehrere Elemente aufnehmen kann. Container können ineinander verschachtelt werden, sodass Sie komplexe, hierarchische Layouts erstellen können. Hier ist ein Beispiel:

with st.container():
    st.write("Das ist der äußere Container.")
    with st.container():
        st.write("Dies ist der innere Container.")

In diesem Beispiel erstellen wir einen äußeren Container und einen inneren Container. Der innere Container ist im äußeren Container verschachtelt und bildet ein hierarchisches Layout.

Verwendung von `st.expander` zum Ausblenden weniger wichtiger Inhalte

Eine weitere neue Ergänzung ist die Funktion st.expander. Mit dieser Funktion können Sie einen Expander erstellen, der ein ausblendbarer Abschnitt Ihrer App ist. Expander können verwendet werden, um weniger wichtigen Inhalt auszublenden und Ihre App sauberer und leichter navigierbar zu machen. Hier ist ein Beispiel:

with st.expander("Klicken zum Ausklappen"):
    st.write("Versteckter Inhalt")

In diesem Beispiel erstellen wir einen Expander mit der Beschriftung "Klicken zum Ausklappen". Wenn der Benutzer auf die Beschriftung klickt, wird der versteckte Inhalt angezeigt.

Teil 4: Streamlit-Spalten vs. Seitenleiste: Unterschiede und Anwendungsfälle verstehen

Streamlit-Spalten und die Seitenleiste sind beide leistungsstarke Tools zur Organisation des Layouts Ihrer Anwendung. Sie haben jedoch unterschiedliche Zwecke und eignen sich am besten für unterschiedliche Situationen.

Verwendung der Seitenleiste für globale Steuerelemente

Die Seitenleiste ist ein spezieller Bereich Ihrer App, der getrennt vom Hauptbereich ist. Sie eignet sich ideal für die Platzierung von Steuerelementen, die die gesamte App beeinflussen, z. B. Eingabewidgets zum Filtern von Daten oder zur Auswahl von Optionen. Hier ist ein Beispiel:

option = st.sidebar.selectbox(
    'Wählen Sie eine Option aus',
    ('Option 1', 'Option 2', 'Option 3'))
st.write('Sie haben ausgewählt:', option)

In diesem Beispiel erstellen wir eine Auswahlliste in der Seitenleiste. Die ausgewählte Option wird im Hauptbereich der App angezeigt.

Verwendung von Streamlit-Spalten zur Organisation des Hauptbereichs

Auf der anderen Seite eignen sich Streamlit-Spalten am besten zur Organisation des Hauptbereichs Ihrer App. Sie ermöglichen es Ihnen, Ihren Inhalt in mehrere Abschnitte aufzuteilen, von denen jeder verschiedene Elemente enthalten kann. Dies macht sie ideal für die Anzeige mehrerer Visualisierungen oder Informationen nebeneinander. Hier ist ein Beispiel:

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])

In diesem Beispiel erstellen wir zwei Spalten im Hauptbereich der App. Jede Spalte enthält ein Liniendiagramm, sodass der Benutzer die beiden Diagramme nebeneinander vergleichen kann.

Teil 5: Fortgeschrittene Streamlit-Spaltenkonfigurationen

Streamlits st.column_config.Column ist ein leistungsstolzes Tool, mit dem Sie steuern können, wie Ihre Daten angezeigt und damit interagiert werden. Durch Anpassung der Eigenschaften Ihrer Spalten können Sie die Präsentation Ihrer Daten und die Art und Weise, wie Benutzer damit interagieren, steuern.

Beispielsweise können Sie die Argumente width und height verwenden, um die Größe Ihrer Datenvisualisierungen zu steuern und sie größer oder kleiner zu machen, um Ihre Anforderungen zu erfüllen. Sie können auch das padding-Argument verwenden, um um Ihre Visualisierungen herum Platz hinzuzufügen und sie leichter lesbar und interaktiv zu machen.

# Beispiel für die Verwendung der Argumente width und height
column1, column2 = st.columns(2)
with column1:
    st.bar_chart(data, width=400, height=200)
with column2:
    st.line_chart(data, width=400, height=200)

Darüber hinaus ermöglicht es st.column_config.Column, die Interaktivität Ihrer Spalten zu steuern. Zum Beispiel können Sie das clickable-Argument verwenden, um eine Spalte anklickbar zu machen und Benutzern neue Interaktionsmöglichkeiten zu bieten. Sie können auch das draggable-Argument verwenden, um eine Spalte verschiebbar zu machen und Benutzern zu ermöglichen, Ihr Layout nach Belieben anzupassen.

# Beispiel für die Verwendung der Argumente clickable und draggable
column1, column2 = st.columns(2)
with column1:
    if st.button('Klick mich!'):
        st.write('Button geklickt!')
with column2:
    st.slider('Zieh mich!', 0, 100, 50)

Teil 6: Erkunden der Streamlit-Layout-Primitiven

Streamlit hat neue Layout-Primitive eingeführt, die mehr Flexibilität bei der Organisation des Layouts Ihrer Anwendung bieten. Eine davon ist die Funktion st.container, mit der Sie einen Container erstellen können, der mehrere Elemente enthält. Container können ineinander geschachtelt werden, sodass komplexe hierarchische Layouts erstellt werden können.

# Beispiel für die Verwendung von st.container
with st.container():
    st.write('Dies ist ein Container.')
    with st.container():
        st.write('Dies ist ein geschachtelter Container.')

Eine weitere neue Funktion ist st.expander, mit der Sie einen Expander erstellen können, eine ausklappbare Sektion Ihrer App. Expander können verwendet werden, um weniger wichtigen Inhalt zu verstecken, um Ihre App sauberer und benutzerfreundlicher zu gestalten.

# Beispiel für die Verwendung von st.expander
with st.expander('Klicken Sie hier, um auszuklappen'):
    st.write('Hallo, Welt!')

Teil 7: Streamlit-Spalten vs. Seitenleiste

Streamlit-Spalten und die Seitenleiste sind beide leistungsstarke Werkzeuge zur Organisation des Layouts Ihrer Anwendung. Sie haben jedoch unterschiedliche Zwecke und werden in verschiedenen Situationen am besten verwendet.

Die Seitenleiste ist ein spezieller Bereich Ihrer App, der vom Hauptbereich getrennt ist. Sie eignet sich ideal für die Platzierung von Steuerelementen, die die gesamte App betreffen, wie z.B. Eingabewidgets zum Filtern von Daten oder zum Auswählen von Optionen.

# Beispiel für die Verwendung der Seitenleiste
option = st.sidebar.selectbox('Wählen Sie eine Option aus', ['Option 1', 'Option 2', 'Option 3'])
st.write(f'Sie haben {option} ausgewählt.')

Auf der anderen Seite eignen sich Streamlit-Spalten am besten zur Organisation des Hauptbereichs Ihrer App. Sie ermöglichen es Ihnen, Ihren Inhalt in mehrere Abschnitte zu unterteilen, die jeweils verschiedene Elemente enthalten können. Dies macht sie ideal für die Anzeige mehrerer Visualisierungen oder Informationselemente nebeneinander.

# Beispiel für die Verwendung von Spalten
column1, column2, column3 = st.columns(3)
with column1:
    st.write('Dies ist Spalte 1.')
with column2:
    st.write('Dies ist Spalte 2.')
with column3:
    st.write('Dies ist Spalte 3.')

Teil 8: Streamlit-Spalten für responsives Design und UI-Anpassung

Streamlit-Spalten dienen nicht nur zur Organisation des Layouts Ihrer App, sondern spielen auch eine wichtige Rolle bei der Erstellung eines responsiven Designs und der Anpassung der Benutzeroberfläche (UI) Ihrer App. Durch Anpassung der Eigenschaften Ihrer Spalten, wie Breite und Padding, können Sie ein Layout erstellen, das sich verschiedenen Bildschirmgrößen und -ausrichtungen anpasst. Dies ist besonders wichtig, um sicherzustellen, dass Ihre App gut aussieht und auf Desktop- und Mobilgeräten gut funktioniert.

Darüber hinaus ermöglichen Ihnen Streamlit-Spalten die Anpassung der Benutzeroberfläche Ihrer App auf verschiedene Arten. Sie können z.B. Spalten verwenden, um ein Rasterlayout zu erstellen, das Ihre App ansprechender und benutzerfreundlicher macht. Sie können auch Spalten verwenden, um verwandte Elemente zusammenzufassen, was die Benutzerfreundlichkeit Ihrer App verbessern kann.

# Beispiel für die Verwendung von Spalten für responsives Design und UI-Anpassung
column1, column2, column3 = st.columns([1, 2, 1])
with column1:
    st.image('bild1.jpg')
with column2:
    st.write('Dies ist ein Text.')
    st.line_chart(data)
with column3:
    st.image('bild2.jpg')

Fazit

Streamlit-Spalten sind ein leistungsstarkes Werkzeug zur Organisation des Layouts Ihrer Anwendung und zur Anpassung der Benutzeroberfläche (UI) Ihrer App. Indem Sie lernen, wie man Spalten und die neuen Layout-Primitive von Streamlit verwendet, können Sie effektivere und ansprechendere Datenanwendungen erstellen. Ob Sie nun mehrere Visualisierungen nebeneinander anzeigen, ein responsives Design erstellen oder konfigurieren, wie Ihre Daten angezeigt und interagiert werden, Streamlit-Spalten bieten eine flexible und intuitive Möglichkeit, Ihre Ziele zu erreichen.

Haben Sie von diesem tollen Data-Analysis- & Data-Visualisierungstool gehört, das Ihre Streamlit-App in Tableau verwandelt?

PyGWalker (opens in a new tab) ist eine Python-Bibliothek, die Ihnen dabei hilft, eine Tableau-ähnliche Benutzeroberfläche mühelos in Ihre eigene Streamlit-App einzubetten.

(opens in a new tab)

Häufig gestellte Fragen

F: Welche Nachteile hat Streamlit?

A: Obwohl Streamlit ein leistungsstarkes Werkzeug zum Erstellen von Datenanwendungen ist, hat es einige Einschränkungen. Zum Beispiel unterstützt es von Haus aus keine mehrseitigen Anwendungen und es hat keine integrierte Benutzerauthentifizierung oder Zugriffskontrolle. Darüber hinaus kann die Einfachheit von Streamlit im Vergleich zu komplexeren Frameworks auch ihre Flexibilität einschränken.

F: Wie positionieren Sie Elemente in Streamlit?

A: In Streamlit können Sie Elemente mithilfe von Spalten und Containern positionieren. Die Funktion st.columns ermöglicht es Ihnen, Ihre Anwendung in mehrere Spalten aufzuteilen, und die Funktion st.container ermöglicht es Ihnen, mehrere Elemente zu gruppieren. Sie können auch die Funktion st.sidebar verwenden, um Elemente zur Seitenleiste hinzuzufügen.

F: Welche Vorteile hat Streamlit?

A: Streamlit bietet mehrere Vorteile für den Aufbau von Datenanwendungen. Es ist einfach zu bedienen, mit einer einfachen und intuitiven API. Es ist auch sehr flexibel und ermöglicht es Ihnen, mit minimalem Code eine Vielzahl von Anwendungen zu erstellen. Darüber hinaus unterstützt Streamlit interaktive Widgets, mit denen sich interaktive Anwendungen leicht erstellen lassen. Und mit seiner Unterstützung für Markdown und LaTeX können Sie in Ihren Anwendungen schöne, formatierte Texte erstellen.

F: Was ist Streamlit Expander?

A: Die Funktion st.expander in Streamlit ermöglicht es Ihnen, einen ausklappbaren Abschnitt in Ihrer App zu erstellen. Dieser Abschnitt kann mehrere Elemente enthalten und vom Benutzer erweitert oder ausgeblendet werden. Im ausgeklappten Zustand ist nur die Beschriftung des Expanders sichtbar. Expanders sind nützlich, um weniger wichtigen Inhalt zu verstecken und Ihre App sauberer und benutzerfreundlicher zu gestalten.