스트림릿(Streamlit) 화면 레이아웃(layout) 구성

 

스트림릿(Streamlit) 화면 레이아웃(layout) 구성

 

안녕하세요.

힐링아무 입니다.

 

스트림릿(Streamlit) st.columns 로

화면의 레이아웃을 잡는것은

사실 아직도 정확히는 모르겠어요.

 

만들때마다 달라지는

삽질에 삽질을 거듭하며

대충 이렇다 정도??

(오늘에야 조금 알것같아

포스팅을 올리기로 했지요^^)

 

1. 꽉찬 화면구성

 

스트림릿으로 대시보드를 만들면

가운데 오는 컨텐츠는

가로 영역이 아주 작아요.

 

st.set_page_config(layout="wide")

 

위에 코드를 화면 위쪽,

라이브러리 불러오는 부분 밑에

추가해 주면 가운데 영역을

꽉찬 화면으로 바꿀수가 있습니다.

 

 

2. 스트림릿 레이아웃

 

레이아웃 구성 입니다.

 

1. 가운데 영역은 기본보다 넓게!

 

2. 양쪽에는 조금씩 여백을 주고

맨 상단은 긴 이미지

 

3. 두번째는 반으로 나누어

컨텐츠를 양쪽에 배치하고,

 

4. 세번째는 긴 셀렉트 박스를 놓고,

 

5. 네번째도 양쪽에 컨텐츠를

나누어 배치했습니다.

 

import streamlit as st
from tkinter.tix import COLUMN
from pyparsing import empty

 

먼저 필요한 라이브러리를

불러와 줍니다.

 

empty1, con1, empty2 = st.columns(3)

만약 이렇게 코딩하면

일정한 간격의 세로 3칸이

나눠지는 것이구요.

(변수는 그냥 자기가 정한거~)

 

empty1, con1, empty2 = st.columns([3, 1])

(3칸으로 나눴을때 2 :1)로

영역을 사용하겠다는 표현도 되는데

저는 레이아웃을 조합했을때

원하는 결과가 안나오더라구요.

그래서 패쓰했어요~^^

 

st.set_page_config(layout="wide")
empty1,con1,empty2 = st.columns([0.3,1.0,0.3])

 

empty1, con1, empty2 = st.columns([0.3,1.0,0.3])

이렇게 코딩하면 여백과 컨텐츠를

비율로 나눌수가 있어요.

 

여기까지는 맨 위에 상단 1줄

레이아웃을 잡는 코딩이에요.

 

empty1,con2,con3,empty2 = st.columns([0.3,0.5,0.5,0.3])
empty1,con4,empty2 = st.columns([0.3,1.0,0.3])
empty1,con5,con6,empty2 = st.columns([0.3,0.5,0.5,0.3])
empty1,con7,empty2 = st.columns([0.3,1.0,0.3])

 

두번째는 세번째 네번째 영역도

따로 컬럼을 잡아줘야 합니다.

(이게 정석이라고는 할수 없어요.

이렇게 저렇게 해봤는데

다 에러가 나고 따로 해주니까

그때서야 제대로 적용이 되더라구요^^)

 

여기까지는 컬럼을 정해주고

이제 메인부분에 적용해주면 되는데요.

아래는 전체 코드 입니다.

 

from tkinter.tix import COLUMN
from pyparsing import empty
import streamlit as st
import numpy as np
import pandas as pd
from PIL import Image

st.set_page_config(layout="wide")
empty1,con1,empty2 = st.columns([0.3,1.0,0.3])
empyt1,con2,con3,empty2 = st.columns([0.3,0.5,0.5,0.3])
empyt1,con4,empty2 = st.columns([0.3,1.0,0.3])
empyt1,con5,con6,empty2 = st.columns([0.3,0.5,0.5,0.3])

def main() :

    with empty1 :
        empty() # 여백부분1
   
    with con1 :
        이미지

    with con2 :
        셀렉트박스
        라디오버튼
        라디오버튼

    with con3 :
     	데이터프레임

    with con4 :
		긴 셀렉트박스

    with con5 :
		동영상 
     
    with con6 :
		동영상 제목
        동영상 설명

    with empty2 :
	   empty() # 여백부분2

 

힐링아무의 코딩일기 힐코딩!!