File size: 4,443 Bytes
0bd62e5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
# 控制布局 (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()
```
|