用Python开发web应用—Streamlit框架解析：组件

Streamlit的组件Components是一系列第三方的Python模块，其极大地扩展了Streamlit的功能。

Components带来了无穷的想象力和可能性，比如与React、Vue等前端框架联动、创建自定义风格和行为的新部件、以及增加新的可视化图表类型等。

使用组件

查找可用组件

查找组件有个常用的途径：

 Component Gallery ，这是官方挑选出来的特色组件；

安装组件

安装这些组件，只需：

pip install some_cool_component

以 AgGrid 组件为例，安装命令为：

pip install streamlit-aggrid

使用组件

查看组件的使用文档，还是以AgGrid为例：

from st_aggrid import AgGrid
AgGrid(my_dataframe)

创建组件

如果已有的组件不满足自己的需求，还可以自己创建组件。

先来看一下插件的类型：

import streamlit as st

x = st.slider('x')
st.markdown(f'`{x}` squared is `{x * x}`')

如上代码中有两种组件：

（1）静态组件static components，即 st.markdown ，它是无状态的，仅向浏览器发送和渲染数据；

（2）双向组件bidirectional components，即 st.slider

，它有内部状态，会从浏览器中返回数据，也可以向浏览器发送和渲染数据，即在后台Python代码和前端JavaScript代码之间交换数据。

对于组件开发，Streamlit提供了 streamlit.components.v1 这个包：

importstreamlit.components.v1 as components

这个略显冗长的导入声明对组件API明确地指明了版本号，这样以后升级后就不会破坏已有的组件。

具体地，对于静态组件，有两种方法可供使用：

（1） html(...) 可以基于HTML、JavaScript和CSS来创建组件；

（2） iframe(...) 可以嵌入外部网站。

对于双向组件：

declare_component(...) 可以创建在Streamlit和浏览器之间双向交换数据的动态部件。

创建静态组件

如果创建的组件目的是为了仅仅展示HTML代码或从Python可视化库中渲染图表，那么可以有两种很简单的方法实现 components.html() 和 components.iframe() 。

示例1：Gist代码段

比如想在页面中嵌入如下这种Github Gist代码段：

那么，可以这样写：

import streamlit as st
import streamlit.components.v1 as components

def github_gist(gist_creator, gist_id, height=600, scrolling=True)