Streamlit パートマスタリングレイアウト

Streamlit でレイアウトをマスターする: ステップバイステップ ガイド

Streamlit は、インタラクティブな Python アプリケーション、特にデータ視覚化、ダッシュボード、機械学習デモを構築するために広く使用されているフレームワークであり、その使いやすさだけでなく、視覚的に魅力的で直感的なレイアウトを作成できる機能でも際立っています。 。このブログ投稿では、Streamlit で列、コンテナ、プレースホルダーなどのレイアウト要素を効果的に利用する方法を示す Python の例を紹介します。

アプリをよりクリーンでインタラクティブにするために使用できるレイアウト テクニックを詳しく見てみましょう。

舞台設定：ページ構成

レイアウト要素に入る前に、st.set_page_config() を使用してページを設定します。このメソッドを使用すると、アプリの読み込み時にページ タイトル、アイコン、レイアウト、サイドバーの動作をカスタマイズできます。

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

ここでは、ページにタイトルを付け、レイアウトを「ワイド」に設定し (ブラウザの全幅を使用します)、見た目をすっきりさせるために最初はサイドバーを折りたたんでいます。

1. 列による構造化

Streamlit の最も強力なレイアウト ツールの 1 つは列です。コンテンツを並べて表示できるため、アプリがより整理され、視覚的に魅力的な外観になります。

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

このスニペットでは、2 つの列を作成し、それぞれにボタンを配置します。列は均等に分割されており、一方の列内の相互作用は他方の列には影響しません。

なぜコラムなのか?

列は、データの概要、グラフ、対話型コントロールなどの関連情報を並べて表示するのに最適です。

2. コンテナによるグループ化

次はコンテナ要素です。 Streamlit のコンテナを使用すると、複数の要素をグループ化できるため、複雑なレイアウトの管理が容易になります。

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

この例では、st.container() メソッドが複数の要素 (テキストとボタン) をまとめてラップします。コンテナを相互にネストして階層レイアウトを作成することもできます。

なぜコンテナなのか?

コンテナは、特に論理的に一緒に属するコンテンツの複数のセクションを扱う場合に、クリーンでグループ化された構造を維持するのに役立ちます。

3. プレースホルダーを使用した動的更新

Streamlit の強力な機能は、コンテンツを動的に更新できることです。これは st.empty() を使用して行われ、後で更新できるプレースホルダーとして機能します。

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!")

この例では、for ループを使用して、毎秒新しい値でプレースホルダーを更新します。ループが完了したら、プレースホルダーのコンテンツを「Done!」に置き換えます

プレースホルダーを使用する理由

プレースホルダーは、ライブ データ フィードや進行状況の更新など、アプリ全体を再実行せずにアプリの一部を動的に更新する必要がある状況に最適です。

4. エキスパンダーによる表示と非表示

展開可能なセクションは、メイン レイアウトを煩雑にしたくない詳細設定や追加情報を非表示にするのに最適です。

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

ここでは、一部のコンテンツとボタンをエキスパンダー内にラップしています。ユーザーはクリックしてコンテンツを表示または非表示にできます。

なぜエキスパンダーなのか?

エキスパンダーは、重要度の低いオプションや高度なオプションを非表示にし、必要なときに簡単にアクセスできるようにすることで、インターフェイスをクリーンな状態に保つのに役立ちます。

5. フォームの作成

Streamlit フォームを使用すると、入力ウィジェットをグループ化して、各入力に個別に反応するのではなく、ユーザーがそれらをすべて一度に送信するのを待つことができます。

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

この例では、フォームを使用してユーザーの名前と年齢を収集し、ユーザーが送信ボタンをクリックしたときにのみ Streamlit が入力を処理します。

なぜフォームなのか?

フォームにより、入力アクションが確実にグループ化され、バッチとして送信されます。これは、ユーザー登録やデータ フィルタリングなどの場合に最適です。

6. サイドバーの追加

サイドバーは、ナビゲーション、アプリ設定、またはメイン インターフェースを乱雑にしない追加のオプションに役立ちます。

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

このコードはサイドバーにボタンを追加します。デフォルトでは折りたたまれていますが、ユーザーは展開できます。

サイドバーを使用する理由

サイドバーは、ナビゲーション リンク、フィルター、アプリ設定など、いつでもアクセスでき、メイン レイアウトのスペースを占有する必要がない二次コンテンツに最適です。

7. タブを使用したナビゲーション

タブは単一セクション内のコンテンツを整理するための優れた方法であり、ユーザーはページを離れることなく異なるビューを切り替えることができます。

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!")

この例では、3 つのタブを使用して動物に関連するさまざまなコンテンツを表示します。各タブは独立しており、独自のコンテンツが含まれています。

なぜタブなのか?

タブは、別のページを必要とせずに、さまざまなデータ ビューや情報のカテゴリなど、関連するコンテンツをセクションに整理するのに最適です。

結論

Streamlit のレイアウト要素をマスターすると、クリーンでインタラクティブで使いやすいアプリケーションを作成できるようになります。列、コンテナ、プレースホルダ、エキスパンダー、フォーム、サイドバー、タブを巧みに使用することで、コンテンツを効果的に整理し、全体的なユーザー エクスペリエンスを向上させることができます。これらのツールを使用すると、アプリケーションを通じてユーザーをシームレスにガイドする直感的なインターフェイスを作成できます。

---

?コードを入手: GitHub - jamesbmour/blog_tutorials
?関連する Streamlit チュートリアル:JustCodeIt
?私の仕事をサポートしてください: コーヒーを買ってください

以上がStreamlit パートマスタリングレイアウトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。