[已解决]streamlit 的layout问题

rsj0315

streamlit 如何控制第一行放两个2按钮布局，第二行放3个按钮布局，第三行放4下拉框布局

这种如何实现？
如果都按照某一个分列原则可以用st.col控制，当遇到每行列数不一样的布局咋办？

最佳答案

月排行榜 / 总排行榜

歌者文明清理员

2023-5-31 22:18:55

rsj0315 发表于 2023-5-31 22:03
如何控制label和控制在一行上呢？

在Streamlit中，可以使用st.write方法将文本和控件写入同一行。例如，您可以使用以下代码将标签和文本框放在同一行上：

1. import streamlit as st
   
2. 
   
3. st.write("姓名：", st.text_input(""))

复制代码

在这个例子中，我们将"姓名："标签和文本框放在了同一行上，这样用户可以直接在文本框中输入姓名。您可以根据需要自定义标签和控件类型以实现各种布局需求。

注意：如果您希望在同一行上放置多个控件，您需要在每个控件之间加上空格或者其他分隔符。您也可以使用CSS来进一步控制布局，在Streamlit中使用CSS可以通过st.write和st.markdown方法以HTML的形式直接嵌入CSS代码。以下是一个示例：

1. import streamlit as st
   
2. 
   
3. css = """
   
4. <style>
   
5. .my-class {
   
6.     color: red !important;
   
7. }
   
8. </style>
   
9. """
   
10. 
    
11. st.markdown(css, unsafe_allow_html=True)
    
12. 
    
13. st.write('<p class="my-class">这段文字将会是红色的。</p>', unsafe_allow_html=True)

复制代码

在上面的例子中，我们首先定义了一个CSS类.my-class，并设置它的颜色为红色。然后，在st.markdown方法中以不安全模式（即设置unsafe_allow_html=True）解析CSS代码，最后使用st.write方法在页面中输出一个带有.my-class类的段落标签，从而使文本呈现为红色。

使用CSS时需要注意安全问题。请确保您只使用可靠的CSS代码，并使用不安全模式时仅允许来自受信任来源的代码。

跳转到最佳答案楼层

歌者文明清理员

实现该布局可以使用 Streamlit 的 beta_columns 和 beta_expander 方法。beta_columns 可以将页面分成多列，并在每列中放置控件，而 beta_expander 则可以收起或展开一组控件。

以下是示例代码：

1. import streamlit as st
   
2. 
   
3. # 第一行
   
4. col1, col2 = st.beta_columns(2)
   
5. with col1:
   
6.     st.button("按钮1")
   
7. with col2:
   
8.     st.button("按钮2")
   
9. 
   
10. # 第二行
    
11. col1, col2, col3 = st.beta_columns(3)
    
12. with col1:
    
13.     st.button("按钮1")
    
14. with col2:
    
15.     st.button("按钮2")
    
16. with col3:
    
17.     st.button("按钮3")
    
18. 
    
19. # 第三行
    
20. col1, col2, col3, col4 = st.beta_columns(4)
    
21. with col1:
    
22.     st.selectbox("下拉框1", options=["选项1", "选项2", "选项3"])
    
23. with col2:
    
24.     st.selectbox("下拉框2", options=["选项1", "选项2", "选项3"])
    
25. with col3:
    
26.     st.selectbox("下拉框3", options=["选项1", "选项2", "选项3"])
    
27. with col4:
    
28.     st.selectbox("下拉框4", options=["选项1", "选项2", "选项3"])
    

复制代码

在上述代码中，beta_columns方法被用来分成了不同数量的列，每个列中包含了不同类型的控件。通过这种方式，可以轻松实现多行、多列的复杂布局。

rsj0315

歌者文明清理员 发表于 2023-5-31 21:45
实现该布局可以使用 Streamlit 的 beta_columns 和 beta_expander 方法。beta_columns 可以将页面分成多列 ...

import streamlit as st



# 第一行
col1, col2 = st.columns(2)
with col1:
    st.button("按钮1")
with col2:
    st.button("按钮2")

# 第二行
col1, col2, col3 = st.columns(3)
with col1:
    st.button("按钮11")
with col2:
    st.button("按钮12")
with col3:
    st.button("按钮3")

# 第三行
col1, col2, col3, col4 = st.columns(4)
with col1:
    st.selectbox("下拉框1", options=["选项1", "选项2", "选项3"])
with col2:
    st.selectbox("下拉框2", options=["选项1", "选项2", "选项3"])
with col3:
    st.selectbox("下拉框3", options=["选项1", "选项2", "选项3"])
with col4:
    st.selectbox("下拉框4", options=["选项1", "选项2", "选项3"])

rsj0315

如何控制label和控制在一行上呢？

歌者文明清理员

rsj0315 发表于 2023-5-31 22:03
如何控制label和控制在一行上呢？

在Streamlit中，可以使用st.write方法将文本和控件写入同一行。例如，您可以使用以下代码将标签和文本框放在同一行上：

1. import streamlit as st
   
2. 
   
3. st.write("姓名：", st.text_input(""))

复制代码

在这个例子中，我们将"姓名："标签和文本框放在了同一行上，这样用户可以直接在文本框中输入姓名。您可以根据需要自定义标签和控件类型以实现各种布局需求。

注意：如果您希望在同一行上放置多个控件，您需要在每个控件之间加上空格或者其他分隔符。您也可以使用CSS来进一步控制布局，在Streamlit中使用CSS可以通过st.write和st.markdown方法以HTML的形式直接嵌入CSS代码。以下是一个示例：

1. import streamlit as st
   
2. 
   
3. css = """
   
4. <style>
   
5. .my-class {
   
6.     color: red !important;
   
7. }
   
8. </style>
   
9. """
   
10. 
    
11. st.markdown(css, unsafe_allow_html=True)
    
12. 
    
13. st.write('<p class="my-class">这段文字将会是红色的。</p>', unsafe_allow_html=True)

复制代码

在上面的例子中，我们首先定义了一个CSS类.my-class，并设置它的颜色为红色。然后，在st.markdown方法中以不安全模式（即设置unsafe_allow_html=True）解析CSS代码，最后使用st.write方法在页面中输出一个带有.my-class类的段落标签，从而使文本呈现为红色。

使用CSS时需要注意安全问题。请确保您只使用可靠的CSS代码，并使用不安全模式时仅允许来自受信任来源的代码。

sfqxx

歌者文明清理员 发表于 2023-5-31 22:18
在Streamlit中，可以使用st.write方法将文本和控件写入同一行。例如，您可以使用以下代码将标签和文本框 ...

歌者文明清理员

sfqxx 发表于 2023-5-31 22:33

你一会儿不在我就蹲点，一边刷视频

isdkz

歌者文明清理员 发表于 2023-5-31 22:52
你一会儿不在我就蹲点，一边刷视频

别蹲了你，明天晚上，别把最后一次给浪费了

歌者文明清理员

isdkz 发表于 2023-5-31 23:02
别蹲了你，明天晚上，别把最后一次给浪费了

不听不听

isdkz

在Streamlit中，可以使用 beta_columns 函数来创建多个并排的列，实现一个行内的多个控件布局。然而，这个方法在2021年我更新的知识库中的版本里面还处于beta阶段，可能在更后续的版本中有所改变。此外，Streamlit目前没有内建的grid系统，因此每行的列数无法直接控制。如果你想要在一行中创建不同数量的元素，你需要在每行中分别创建这些列。

这是一个例子，演示如何在不同的行中创建不同数量的按钮和下拉框：

1. import streamlit as st
   
2. 
   
3. # 第一行，放两个按钮
   
4. col1, col2 = st.beta_columns(2)
   
5. col1.button('按钮1')
   
6. col2.button('按钮2')
   
7. 
   
8. # 第二行，放三个按钮
   
9. col1, col2, col3 = st.beta_columns(3)
   
10. col1.button('按钮3')
    
11. col2.button('按钮4')
    
12. col3.button('按钮5')
    
13. 
    
14. # 第三行，放四个下拉框
    
15. col1, col2, col3, col4 = st.beta_columns(4)
    
16. col1.selectbox('下拉框1', ['选项1', '选项2', '选项3'])
    
17. col2.selectbox('下拉框2', ['选项1', '选项2', '选项3'])
    
18. col3.selectbox('下拉框3', ['选项1', '选项2', '选项3'])
    
19. col4.selectbox('下拉框4', ['选项1', '选项2', '选项3'])
    

复制代码

这个代码在每一行中分别创建了2个、3个和4个列，并在这些列中添加了按钮或下拉框。注意，这种方法仅在Streamlit的每个新版本中有效，可能在未来的版本中有所改变。