控制布局 (Controlling Layout)

默认情况下，块中的组件是垂直排列的。让我们看看如何重新排列组件。在幕后，这种布局结构使用了Web 开发的 flexbox 模型。

Row 行

with gr.Row 下的元素将水平显示。例如，要并排显示两个按钮：

with gr.Blocks() as demo:
    with gr.Row():
        btn1 = gr.Button("按钮1")
        btn2 = gr.Button("按钮2")

要使行中的每个元素具有相同的高度，请使用 style 方法的 equal_height 参数。

with gr.Blocks() as demo:
    with gr.Row(equal_height=True):
        textbox = gr.Textbox()
        btn2 = gr.Button("按钮2")

可以通过每个组件中存在的 scale 和 min_width 参数来控制行中元素的宽度。

scale 是一个整数，定义了元素在行中的占用空间。如果将 scale 设置为 0，则元素不会扩展占用空间。如果将 scale 设置为 1 或更大，则元素将扩展。行中的多个元素将按比例扩展。在下面的示例中，btn1 将比 btn2 扩展两倍，而 btn0 将根本不会扩展：

with gr.Blocks() as demo:
    with gr.Row():
        btn0 = gr.Button("按钮0", scale=0)
        btn1 = gr.Button("按钮1", scale=1)
        btn2 = gr.Button("按钮2", scale=2)

min_width 将设置元素的最小宽度。如果没有足够的空间满足所有的 min_width 值，行将换行。

在文档中了解有关行的更多信息。

列和嵌套 (Columns and Nesting)

列中的组件将垂直放置在一起。由于默认布局对于块应用程序来说是垂直布局，因此为了有用，列通常嵌套在行中。例如：

$code_rows_and_columns $demo_rows_and_columns

查看第一列如何垂直排列两个文本框。第二列垂直排列图像和按钮。注意两列的相对宽度由 scale 参数设置。具有两倍 scale 值的列占据两倍的宽度。

在文档中了解有关列的更多信息。

选项卡和手风琴 (Tabs and Accordions)

您还可以使用 with gr.Tab('tab_name'): 语句创建选项卡。在 with gr.Tab('tab_name'): 上下文中创建的任何组件都将显示在该选项卡中。连续的 Tab 子句被分组在一起，以便一次只能选择一个选项卡，并且只显示该选项卡上下文中的组件。

例如：

$code_blocks_flipper $demo_blocks_flipper

还请注意本示例中的 gr.Accordion('label')。手风琴是一种可以切换打开或关闭的布局。与 Tabs 一样，它是可以选择性隐藏或显示内容的布局元素。在 with gr.Accordion('label'): 内定义的任何组件在单击手风琴的切换图标时都会被隐藏或显示。

在文档中了解有关Tabs和Accordions的更多信息。

可见性 (Visibility)

组件和布局元素都有一个 visible 参数，可以在初始时设置，并使用 gr.update() 进行更新。在 Column 上设置 gr.update(visible=...) 可用于显示或隐藏一组组件。

$code_blocks_form $demo_blocks_form

可变数量的输出 (Variable Number of Outputs)

通过以动态方式调整组件的可见性，可以创建支持 可变数量输出 的 Gradio 演示。这是一个非常简单的例子，其中输出文本框的数量由输入滑块控制：

例如：

$code_variable_outputs $demo_variable_outputs

分开定义和渲染组件 (Defining and Rendering Components Separately)

在某些情况下，您可能希望在实际渲染 UI 之前定义组件。例如，您可能希望在相应的 gr.Textbox 输入上方显示示例部分，使用 gr.Examples。由于 gr.Examples 需要一个参数作为输入组件对象，您需要先定义输入组件，然后在定义 gr.Examples 对象之后再渲染它。

解决方法是在 gr.Blocks() 范围之外定义 gr.Textbox，并在 UI 中想要放置它的位置使用组件的 .render() 方法。

这是一个完整的代码示例：

input_textbox = gr.Textbox()

with gr.Blocks() as demo:
    gr.Examples(["hello", "bonjour", "merhaba"], input_textbox)
    input_textbox.render()