python学习

streamlit学习笔记三-----layout

streamlit的页面能不能像写html一样的进行页面布局呢？不会css的程序员咋整呢？ 有以下方法

一. 自动左右排版

我们在streamlit的演示时，streamlit hello就能看到。己经是左右分两列的布局了。这个不用做专门布局，只要在代码中加入sidebar就行。比如要把一个markdown写入左侧栏只要
把st.markdown(xxx)改为st.sidebar.markdown(xxx)就行。

二. streamlit代码形式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
""" 
## 一 streamlit.beta_container()
通过with st.beta_container():，可以Book一个组件模块
将一个不可见的容器插入到你的应用程序中，可以用来保存多个元素。
"""

st.markdown(" - with写法 ")
with st.beta_container():
   st.write("with写法，此句放在这个没有命名的容器中，注意通过缩进来表示范围")
   # You can call any Streamlit command, including custom components:
   st.bar_chart(np.random.randn(50, 3))

st.write("此句放在没有命名的容器外")

st.markdown(" - 常规写法 ")
container_one = st.beta_container()
container_one.write(" 此句写在一个名叫container_one的容器内 ")
st.write(" 没有加容器前缀，所以就只写在容器外了 ")

st.markdown(" - 在另外的地方给一个容器内插一句话 ")
container_one.write("要想在另外的地方给容器内插一句话，容器必须命名，当然这个不符合程序规则，程序结构一塌糊涂 ")

st.markdown(" --- ")
#-------------------------------------------------------------------------------------------------------------
"""
## 二 分列展示
streamlit.beta_columns(spec)

以并排列的形式插入容器。插入多个并排放置的多元素容器，并返回容器对象列表。

要向返回的容器添加元素，可以使用“with”表示法(首选)，或者直接调用返回对象的方法。

"""
st.subheader(" 请参见下面的例子。")

col1, col2, col3 = st.beta_columns(3)

with col1:
   st.header("猫头")
   st.image("/home/frankli/Pictures/cat.jpg", use_column_width=True)

with col2:
   st.header("侧滑手机")
   st.image("/home/frankli/Pictures/cehua3.jpeg", use_column_width=True)

with col3:
   st.header("金色庄园")
   st.image("/home/frankli/Pictures/金色庄园.jpg", use_column_width=True)

st.markdown(" --- ")
#-------------------------------------------------------------------------------------------------------------
"""
## 三 按照比例分列展示
"""

col1, col2 = st.beta_columns([3, 1])
data = np.random.randn(10, 1)

col1.subheader(" 宽列展示图表 ")
col1.line_chart(data)

col2.subheader("  窄列展示数据 ")
col2.write(data)

st.markdown(" --- ")
#-------------------------------------------------------------------------------------------------------------
"""
 ## 4 折叠/展开 
streamlit.beta_expander(label=None, expanded=False)
"""


with st.beta_expander("See explanation"):
    st.write("""
        在这里进行折叠与展开。
    """)
    st.line_chart({"data": [1, 5, 2, 6, 2, 1]})