| # 控制布局 (Controlling Layout) | |
| 默认情况下，块中的组件是垂直排列的。让我们看看如何重新排列组件。在幕后，这种布局结构使用了[Web 开发的 flexbox 模型](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)。 | |
| ## Row 行 | |
| `with gr.Row` 下的元素将水平显示。例如，要并排显示两个按钮： | |
| ```python | |
| with gr.Blocks() as demo: | |
| with gr.Row(): | |
| btn1 = gr.Button("按钮1") | |
| btn2 = gr.Button("按钮2") | |
| ``` | |
| 要使行中的每个元素具有相同的高度，请使用 `style` 方法的 `equal_height` 参数。 | |
| ```python | |
| 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` 将根本不会扩展： | |
| ```python | |
| 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` 值，行将换行。 | |
| 在[文档](https://gradio.app/docs/row)中了解有关行的更多信息。 | |
| ## 列和嵌套 (Columns and Nesting) | |
| 列中的组件将垂直放置在一起。由于默认布局对于块应用程序来说是垂直布局，因此为了有用，列通常嵌套在行中。例如： | |
| $code_rows_and_columns | |
| $demo_rows_and_columns | |
| 查看第一列如何垂直排列两个文本框。第二列垂直排列图像和按钮。注意两列的相对宽度由 `scale` 参数设置。具有两倍 `scale` 值的列占据两倍的宽度。 | |
| 在[文档](https://gradio.app/docs/column)中了解有关列的更多信息。 | |
| ## 选项卡和手风琴 (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](https://gradio.app/docs/tab)和[Accordions](https://gradio.app/docs/accordion)的更多信息。 | |
| ## 可见性 (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()` 方法。 | |
| 这是一个完整的代码示例： | |
| ```python | |
| input_textbox = gr.Textbox() | |
| with gr.Blocks() as demo: | |
| gr.Examples(["hello", "bonjour", "merhaba"], input_textbox) | |
| input_textbox.render() | |
| ``` | |