Streamlit 指标与 delta 对齐

Question

在 Streamlit 中，我有一个主要统计列和一个比较列。比较列的指标组件具有增量，而主要组件则没有。此增量使比较列中的所有以下组件错位。如何使增量指标和非增量指标占据相同的垂直空间，以便指标后面的元素不会错位？

问题（注意水平线如何未对齐）：

import streamlit as st

c1, c2, c3 = st.columns(3)
with c1:
    st.metric("Main", 1, delta=None, delta_color="normal")
    st.write("------------------------")
with c2:
    st.metric("Compare", 1, delta=1, delta_color="normal")
    st.write("------------------------")
with c3:
    st.metric("asdf", 1, delta=None, delta_color="normal")
    st.write("------------------------")

Answer 1

您可以使用自定义CSS来完成您想要的：

import streamlit as st

css = """
<style>
div[data-testid="stMetric"] {
    min-height: 100px;
}
</style>
"""
st.markdown(css, unsafe_allow_html=True)

c1, c2, c3 = st.columns(3)

with c1:
    st.metric("Main", 1, delta=None, delta_color="normal")
    st.markdown("---")
with c2:
    st.metric("Compare", 1, delta=1, delta_color="normal")
    st.markdown("---")
with c3:
    st.metric("asdf", 1, delta=None, delta_color="normal")
    st.markdown("---")

它给出：

我将高度设置为 100px，但如果您喜欢更压缩的版本，则可以减小该值。