간소화된 부품 마스터링 레이아웃

Streamlit에서 레이아웃 마스터하기: 단계별 가이드

특히 데이터 시각화, 대시보드 및 기계 학습 데모를 위한 대화형 Python 애플리케이션 구축을 위해 널리 사용되는 프레임워크인 Streamlit은 사용자 친화적인 특성뿐만 아니라 시각적으로 매력적이고 직관적인 레이아웃을 생성하는 기능으로도 유명합니다. . 이 블로그 게시물에서는 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의 가장 강력한 레이아웃 도구 중 하나는 열입니다. 콘텐츠를 나란히 표시하여 앱을 더욱 체계적이고 시각적으로 매력적으로 보이게 할 수 있습니다.

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. 컨테이너를 이용한 그룹화

다음은 컨테이너 요소입니다. 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. 양식 만들기

간소한 양식을 사용하면 입력 위젯을 그룹화하고 각 입력에 개별적으로 반응하는 대신 사용자가 한꺼번에 제출할 때까지 기다릴 수 있습니다.

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

이 예에서는 세 개의 탭을 사용하여 동물과 관련된 다양한 콘텐츠를 표시합니다. 각 탭은 독립적이며 자체 콘텐츠를 포함합니다.

탭이 필요한 이유

탭은 별도의 페이지 없이 관련 콘텐츠를 다양한 데이터 보기나 정보 카테고리 등의 섹션으로 구성하는 데 적합합니다.

결론

Streamlit의 레이아웃 요소를 마스터하면 깔끔하고 대화형이며 사용자 친화적인 애플리케이션을 만들 수 있습니다. 열, 컨테이너, 자리 표시자, 확장기, 양식, 사이드바 및 탭을 능숙하게 사용하면 콘텐츠를 효과적으로 구성하고 전반적인 사용자 경험을 향상시킬 수 있습니다. 이러한 도구를 사용하면 사용자에게 애플리케이션을 원활하게 안내하는 직관적인 인터페이스를 만들 수 있습니다.

---

? 코드 받기: GitHub - jamesbmour/blog_tutorials
? 관련 Streamlit 튜토리얼:JustCodeIt
? 내 작업을 지원하세요: 커피 사주세요

위 내용은 간소화된 부품 마스터링 레이아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!