Dispositions de maîtrise des pièces rationalisées

Maîtriser les mises en page dans Streamlit : un guide étape par étape

Streamlit, un framework largement utilisé pour créer des applications Python interactives, en particulier pour la visualisation de données, les tableaux de bord et les démonstrations d'apprentissage automatique, se distingue non seulement par sa nature conviviale, mais également par sa capacité à créer des mises en page visuellement attrayantes et intuitives. . Dans cet article de blog, nous vous guiderons à travers un exemple Python qui montre comment utiliser efficacement les éléments de mise en page tels que les colonnes, les conteneurs, les espaces réservés, etc. dans Streamlit.

Décomposons les techniques de mise en page que vous pouvez utiliser pour rendre vos applications plus propres et plus interactives.

Préparer le terrain : configuration des pages

Avant de passer aux éléments de mise en page, nous configurons la page à l'aide de st.set_page_config(). Cette méthode vous permet de personnaliser le titre de la page, l'icône, la mise en page et le comportement de la barre latérale dès le chargement de l'application.

st.set_page_config(
    page_title="Streamlit Layouts Tutorial",
    page_icon=":art:",
    layout="wide",
    initial_sidebar_state="collapsed",
)

Ici, nous donnons un titre à la page, définissons la mise en page sur « large » (qui utilise toute la largeur du navigateur) et réduisons initialement la barre latérale pour un aspect plus net.

1. Structuration avec des colonnes

L'un des outils de mise en page les plus puissants de Streamlit sont les colonnes. Ils vous permettent d'afficher du contenu côte à côte, donnant ainsi un aspect plus organisé et visuellement attrayant à votre application.

st.header("Columns")
st.write("Using `st.columns()` to create columns.")

# Create two columns
col1, col2 = st.columns(2)

col1.write("This is column 1")
if col1.button("Button in Column 1"):
    col1.write("Button 1 pressed")

col2.write("This is column 2")
if col2.button("Button in Column 2"):
    col2.write("Button 2 pressed")

Dans cet extrait, nous créons deux colonnes et plaçons des boutons dans chacune. Les colonnes sont réparties uniformément et toute interaction au sein d’une colonne n’affecte pas l’autre.

Pourquoi des colonnes ?

Les colonnes sont idéales pour afficher côte à côte des informations connexes, telles que des résumés de données, des graphiques ou des contrôles interactifs.

2. Regroupement avec des conteneurs

La prochaine étape est l'élément conteneur. Les conteneurs dans Streamlit vous permettent de regrouper plusieurs éléments, ce qui facilite la gestion de mises en page complexes.

st.header("Container")
st.write("Using `st.container()` to group elements together.")

with st.container():
    st.write("This is inside a container")
    st.button("Button inside container")

    # Nested container
    with st.container():
        st.write("This is a nested container")
        st.button("Button inside nested container")

Dans cet exemple, la méthode st.container() regroupe plusieurs éléments (du texte et un bouton). Vous pouvez même imbriquer des conteneurs les uns dans les autres pour créer des dispositions hiérarchiques.

Pourquoi des conteneurs ?

Les conteneurs aident à maintenir une structure propre et groupée, en particulier lorsqu'il s'agit de plusieurs sections de contenu qui vont logiquement ensemble.

3. Mise à jour dynamique avec des espaces réservés

Une fonctionnalité puissante de Streamlit est sa capacité à mettre à jour le contenu de manière dynamique. Cela se fait à l'aide de st.empty(), qui sert d'espace réservé que vous pourrez mettre à jour ultérieurement.

st.header("Empty")
st.write("Using `st.empty()` as a placeholder for updating content.")

placeholder = st.empty()

# Update the placeholder content dynamically
for i in range(5):
    placeholder.write(f"Updating... {i}")
    time.sleep(1)

placeholder.write("Done!")

Dans cet exemple, nous utilisons une boucle for pour mettre à jour l'espace réservé avec une nouvelle valeur chaque seconde. Une fois la boucle terminée, nous remplaçons le contenu de l'espace réservé par "Terminé!"

Pourquoi utiliser des espaces réservés ?

Les espaces réservés sont idéaux pour les situations dans lesquelles vous devez mettre à jour dynamiquement certaines parties de votre application sans réexécuter l'intégralité de l'application, comme les flux de données en direct ou les mises à jour de progression.

4. Masquer et afficher avec les extensions

Les sections extensibles sont parfaites pour masquer les paramètres avancés ou les informations supplémentaires que vous ne souhaitez pas encombrer la mise en page principale.

st.set_page_config(
    page_title="Streamlit Layouts Tutorial",
    page_icon=":art:",
    layout="wide",
    initial_sidebar_state="collapsed",
)

Ici, nous enveloppons du contenu et un bouton dans un agrandisseur, sur lequel les utilisateurs peuvent cliquer pour révéler ou masquer le contenu.

Pourquoi des extenseurs ?

Les extensions aident à garder votre interface propre en masquant les options moins importantes ou avancées tout en les rendant facilement accessibles en cas de besoin.

5. Création de formulaires

Les formulaires Streamlit vous permettent de regrouper les widgets de saisie et d'attendre que l'utilisateur les soumette tous en même temps, plutôt que de réagir à chaque entrée individuellement.

st.header("Columns")
st.write("Using `st.columns()` to create columns.")

# Create two columns
col1, col2 = st.columns(2)

col1.write("This is column 1")
if col1.button("Button in Column 1"):
    col1.write("Button 1 pressed")

col2.write("This is column 2")
if col2.button("Button in Column 2"):
    col2.write("Button 2 pressed")

Dans cet exemple, nous utilisons un formulaire pour collecter le nom et l'âge d'un utilisateur, et ce n'est qu'une fois qu'il clique sur le bouton d'envoi que Streamlit traite la saisie.

Pourquoi des formulaires ?

Les formulaires garantissent que les actions de saisie sont regroupées et soumises par lots, ce qui est idéal pour des cas tels que l'enregistrement des utilisateurs ou le filtrage des données.

6. Ajout d'une barre latérale

Les barres latérales sont utiles pour la navigation, les paramètres d'application ou les options supplémentaires qui n'encombrent pas l'interface principale.

st.header("Container")
st.write("Using `st.container()` to group elements together.")

with st.container():
    st.write("This is inside a container")
    st.button("Button inside container")

    # Nested container
    with st.container():
        st.write("This is a nested container")
        st.button("Button inside nested container")

Ce code ajoute un bouton à la barre latérale, qui se réduit par défaut mais peut être développé par l'utilisateur.

Pourquoi utiliser les barres latérales ?

Les barres latérales sont parfaites pour le contenu secondaire comme les liens de navigation, les filtres ou les paramètres d'application qui sont toujours accessibles mais n'ont pas besoin d'occuper de l'espace dans la mise en page principale.

7. Navigation avec les onglets

Les onglets sont un excellent moyen d'organiser le contenu au sein d'une seule section, permettant aux utilisateurs de basculer entre différentes vues sans quitter la page.

st.header("Empty")
st.write("Using `st.empty()` as a placeholder for updating content.")

placeholder = st.empty()

# Update the placeholder content dynamically
for i in range(5):
    placeholder.write(f"Updating... {i}")
    time.sleep(1)

placeholder.write("Done!")

Dans cet exemple, nous utilisons trois onglets pour afficher différents contenus liés aux animaux. Chaque onglet est indépendant et contient son propre contenu.

Pourquoi des onglets ?

Les onglets sont idéaux pour organiser le contenu associé en sections, comme différentes vues de données ou catégories d'informations, sans nécessiter de pages séparées.

Conclusion

La maîtrise des éléments de mise en page de Streamlit vous permet de créer des applications propres, interactives et conviviales. En utilisant habilement les colonnes, les conteneurs, les espaces réservés, les extensions, les formulaires, les barres latérales et les onglets, vous pouvez organiser efficacement votre contenu et améliorer l'expérience utilisateur globale. Ces outils vous permettent de créer des interfaces intuitives qui guident les utilisateurs de manière transparente à travers votre application.

---

? Obtenez le code : GitHub - jamesbmour/blog_tutorials
? Tutoriels Streamlit associés : JustCodeIt
? Soutenez mon travail : Achetez-moi un café

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!