定制你的Blocks UI布局：Gradio的Block Layouts模块介绍

---

❤️觉得内容不错的话，欢迎点赞收藏加关注，后续会继续输入更多优质内容❤️
有问题欢迎大家加关注私戳或者评论（包括但不限于NLP算法相关，linux学习相关，读研读博相关......）

---

博主原文链接：https://www.yourmetaverse.cn/nlp/252/

（封面图由文心一格生成）

定制你的Blocks UI布局：Gradio的Block Layouts模块介绍

Gradio是一个功能强大的Python库，用于构建交互式的Web应用和演示。它提供了多种布局选项，使用户能够自定义Blocks UI的布局。在本文中，我们将介绍Gradio的Block Layouts模块，探讨如何使用其中的布局类来定制你的Blocks UI。无论你是想水平排列组件、垂直排列组件、创建选项卡布局还是实现其他自定义布局，Block Layouts模块都能满足你的需求。

1. Row

Row是Blocks模块中的一个布局元素，它将所有子组件水平排列。

参数：

• variant：行类型，可选值为’default’（无背景），‘panel’（灰色背景和圆角）或’compact’（圆角且无内部间隔）。
• visible：是否显示行，默认为True。
• elem_id：可选的HTML DOM的ID，可用于定位CSS样式。
• equal_height：是否使每个子元素具有相等的高度，默认为True。

2. Column

Column是Blocks模块中的一个布局元素，它将所有子组件垂直排列。可以通过scale和min_width参数设置列的宽度。

参数：

• scale：相对于相邻列的宽度比例，默认为1。例如，如果列A的scale为2，列B的scale为1，则A的宽度是B的两倍。
• min_width：列的最小像素宽度，默认为320。如果某个scale值导致列宽度小于min_width，则将尊重min_width参数。
• variant：列类型，可选值为’default’（无背景），‘panel’（灰色背景和圆角）或’compact’（圆角且无内部间隔）。
• visible：是否显示列，默认为True。
• elem_id：可选的HTML DOM的ID，可用于定位CSS样式。

3. Tab

Tab（或其别名TabItem）是Blocks模块中的一个布局元素，组件定义在选中的标签页中可见。

参数：

• label：选项卡的可视标签，必填项。
• id：选项卡的标识符，如果希望从预测函数控制选定的选项卡，则必填。
• elem_id：可选的HTML DOM的ID，可用于定位CSS样式。

4. Group

Group是Blocks模块中的一个布局元素，用于将子组件组合在一起，没有间距。

参数：

• visible：是否显示组，默认为True。
• elem_id：可选的HTML DOM的ID

，可用于定位CSS样式。

5. Box

Box是Blocks模块中的一个布局元素，将子组件放在一个带有圆角和一些填充的框中。

参数：

• visible：是否显示框，默认为True。
• elem_id：可选的HTML DOM的ID，可用于定位CSS样式。

6. Accordion

Accordion是Blocks模块中的一个布局元素，可以切换显示/隐藏所包含的内容。

参数：

• label：手风琴部分的名称，必填项。
• open：如果为True，则手风琴默认展开。
• visible：是否显示手风琴，默认为True。
• elem_id：可选的HTML DOM的ID，可用于定位CSS样式。

通过使用这些布局类，你可以根据需要创建出令人惊叹的用户界面，自定义布局，使你的Blocks UI与众不同。

7. 参数介绍

下面是关于Row、Column、Tab、Group、Box和Accordion方法以及Tab的select方法的参数的表格：

方法	参数	数据类型	默认值	描述
Row	variant	str	“default”	行类型，可选值为’default’、‘panel’或’compact’。
	visible	bool	True	是否显示行。
	elem_id	str|None	None	HTML DOM的ID，可用于定位CSS样式。
	equal_height	bool	True	是否使每个子元素具有相等的高度。
Column	scale	int	1	相对于相邻列的宽度比例。
	min_width	int	320	列的最小像素宽度，如果列宽度小于该值，将进行换行。
	variant	str	“default”	列类型，可选值为’default’、‘panel’或’compact’。
	visible	bool	True	是否显示列。
	elem_id	str|None	None	HTML DOM的ID，可用于定位CSS样式。
Tab	label	str	必填	选项卡的可视标签。
	id	int|str|None	None	选项卡的标识符，用于控制选定的选项卡。
	elem_id	str|None	None	HTML DOM的ID，可用于定位CSS样式。
Group	visible	bool	True	是否显示组。
	elem_id	str|None	None	HTML DOM的ID，可用于定位CSS样式。
Box	visible	bool	True	是否显示框。
	elem_id	str|None	None	HTML DOM的ID，可用于定位CSS样式。
Accordion	label	必填	None	手风琴部分的名称。
	open	bool	True	手风琴是否默认展开。
	visible	bool	True	是否显示手风琴。
	elem_id	str|None	None	HTML DOM的ID，可用于定位CSS样式。
Tab.select	fn	Callable|None	必填	在选项卡中选择时触发的函数。
	inputs	Component|list[Component]|set[Component]|None	None	作为输入使用的组件列表。如果函数不需要输入，应为一个空列表。
	outputs	Component|list[Component]|None	None	作为输出使用的组件列表。如果函数没有输出，应为一个空列表。
	api_name	str|None	None	定义此参数将在API文档中公开该端点。
	status_tracker	None	None
	scroll_to_output	bool	False	如果为True，将在完成后滚动到输出组件。
	show_progress	“full”|“minimal”|“hidden”	“full”	如果为True，在等待期间显示进度动画。
	queue	bool|None	None	如果为True，将请求放入队列中（如果队列已启用）。如果为False，即使启用了队列，也不会将此事件放入队列中。
	batch	bool	False	如果为True，则函数应处理一批输入，即应为每个参数接受一个输入值列表。
	max_batch_size	int	4	如果从队列中调用此方法，则将批处理在一起的最大输入数（仅在batch=True时有效）。
	preprocess	bool	True	如果为False，则在运行’fn’之前不会运行组件数据的预处理。
	postprocess	bool	True	如果为False，则在将’fn’的输出返回给浏览器之前不会运行组件数据的后处理。
	cancels	dict[str, Any]|list[dict[str, Any]]|None	None	触发此监听器时要取消的其他事件的列表。
	every	float|None	None	在客户端连接打开时每隔多少秒运行此事件。

8. 总结

无论你是想创建一个简单的表单、一个复杂的仪表盘还是一个具有吸引力的交互式演示，Gradio的Block Layouts模块提供了丰富的选项，以满足你的布局需求。开始使用Gradio的Block Layouts模块，定制你的Blocks UI吧！

---

❤️觉得内容不错的话，欢迎点赞收藏加关注，后续会继续输入更多优质内容❤️
有问题欢迎大家加关注私戳或者评论（包括但不限于NLP算法相关，linux学习相关，读研读博相关......）

---