第7章 按钮、事件与交互
到目前为止，我们主要用按钮来触发函数。
但按钮只是事件的一种。
现代交互应用都是围绕事件构建的：发生了某件事，应用就做出响应。
用户修改输入，一个函数运行；用户上传文件，另一个函数运行；用户选择某个选项，界面随之更新。
理解了事件，你才能从一堆静态组件走向真正可交互的 Gradio 应用。
什么是事件？
事件就是界面中发生的、能触发某个函数的事情。
例如：
点击按钮
修改数值
提交文本框
选择某一项
上传文件
清空组件
加载应用
事件告诉 Gradio："这件事发生时，就执行这个动作。"
.click() 事件
最常见的事件是：
button.click(...)
例如：
import gradio as gr
def greet(name):
return f"Hello, {name}!"
with gr.Blocks() as demo:
name = gr.Textbox(label="Name")
button = gr.Button("Greet")
output = gr.Textbox(label="Greeting")
button.click(
fn=greet,
inputs=name,
outputs=output
)
demo.launch()
这里按钮是事件源，函数是要执行的动作，文本框提供输入，输出组件接收结果。
事件函数
fn 参数指定了要执行什么。
button.click(
fn=greet,
inputs=name,
outputs=output
)
你可以把它理解成一条配置规则：当 button 被点击时，用 name 作为输入运行 greet，并把结果放进 output。
.change() 事件
有时你希望组件的值发生变化时就运行某个函数。
例如：
name.change(
fn=greet,
inputs=name,
outputs=output
)
这样，修改文本框就能触发该函数。
适用于需要输出自动更新的场景。
.input() 与 .change()
这两个事件看似相似，但代表不同的交互概念。
input 事件与用户输入操作引起的变更相关；change 事件则用于组件值发生更一般性变化的场景。
根据应用中值的更新方式不同，这个区别可能会影响行为。
构建更复杂的界面时，请查阅 Gradio 最新的事件文档，了解各事件的具体行为。
文本框提交
文本框还能响应用户的提交操作。
例如：
textbox.submit(
fn=greet,
inputs=textbox,
outputs=output
)
这在聊天界面中尤其实用。
用户输入消息后按下回车，提交事件即触发函数。
上传事件
文件和媒体组件在内容上传完成时也能触发事件。
例如：
file.upload(
fn=process_file,
inputs=file,
outputs=output
)
这样应用就能在用户上传内容后立即开始处理。
选择事件
部分组件能响应用户选中某个项目的操作。
在需要展示更多信息的选择型界面中，这非常有用。
清除事件
组件还可以响应清除操作。
例如，用户清除输入时，你可能希望同时重置相关输出。
加载应用
Gradio 应用还能在界面加载时执行操作。
这在初始化任务中很有用，比如应用启动时加载模型列表。
事件可以同时更新多个输出
一个函数可以同时更新多个组件。
例如：
def calculate(a, b):
total = a + b
product = a * b
return total, product
接着：
button.click(
fn=calculate,
inputs=[a, b],
outputs=[total_output, product_output]
)
因此，一个事件可以同时触发多处更新。
事件可以更新组件属性
到这里事情变得更有意思了。
假设用户选择了一个类别，你希望 Dropdown 的选项随之改变。函数可以返回更新后的组件配置。
概念上可以这样写：
def update_options(category):
if category == "Programming":
return gr.Dropdown(
choices=["Python", "JavaScript", "Java"]
)
return gr.Dropdown(
choices=["Math", "Physics", "Chemistry"]
)
然后事件就能更新该 Dropdown。
具体更新机制因 Gradio 版本而异，实现动态组件时请以当前 API 为准。
为什么事件重要
没有事件，你的应用不过是一堆界面元素的堆砌。
事件赋予它们行为。
比如有一个表单：
name = gr.Textbox()
email = gr.Textbox()
button = gr.Button()
这些组件已经存在。
但在把它们关联起来之前，什么有意义的事情都不会发生。
button.click(
fn=submit_form,
inputs=[name, email],
outputs=result
)
至此，界面才真正有了行为。
多个事件可以共用同一个函数
假设：
def greet(name):
return f"Hello, {name}!"
可以把它绑定到按钮：
button.click(
fn=greet,
inputs=name,
outputs=output
)
也可以绑定到 Textbox 的提交：
name.submit(
fn=greet,
inputs=name,
outputs=output
)
同一个 Python 函数因此能响应不同的用户操作。
一个事件可以触发不同函数
假设你想让一个按钮执行多项操作。
你可能会写：
def clean_text(text):
return text.strip()
def count_words(text):
return len(text.split())
你可以创建各自独立的事件链，也可以把逻辑封装到一个函数里，统一协调这两个操作。
例如：
def process(text):
cleaned = clean_text(text)
count = count_words(cleaned)
return cleaned, count
这样只需一次点击，就能同时更新两个输出。
事件链
Gradio 支持创建一系列按顺序执行的动作。
假设第一个函数负责处理输入：
def preprocess(text):
return text.strip()
第二个函数负责分析：
def analyze(text):
return len(text.split())
你可以把这两个操作在逻辑上串联起来，让第一步的输出作为下一步的输入。
这对多阶段的工作流特别有用。
比如：
输入
↓
清洗
↓
分析
↓
展示
具体的事件链语法要参考你所用版本的 Gradio 文档，但核心概念很简单：一个事件可以触发另一个事件。
事件链为什么有用
设想用户上传了一个 CSV 文件。
你可能需要：
读取文件
校验列名
清洗数据
计算统计值
展示结果
与其把这一切塞进一个巨大的函数，不如把工作流拆成几个逻辑阶段，这样代码更容易测试和维护。
函数可以从多个组件接收值
例如：
def generate_message(name, tone, length):
...
事件可以这样传参：
inputs=[name, tone, length]
这样用户就能控制函数的多个方面。
示例：写作助手
import gradio as gr
def write_message(topic, tone):
return f"Write a {tone.lower()} message about {topic}."
with gr.Blocks() as demo:
topic = gr.Textbox(
label="Topic"
)
tone = gr.Dropdown(
choices=["Professional", "Friendly", "Casual"],
label="Tone"
)
button = gr.Button("Generate")
output = gr.Textbox(
label="Result",
lines=6
)
button.click(
fn=write_message,
inputs=[topic, tone],
outputs=output
)
demo.launch()
用户控制两个输入组件。事件同时收集它们的值，函数也同时接收，然后输出组件随之更新。
事件监听器本质上是一种配置
最有用的一种思维转变是意识到：
button.click(...)
主要目的并不是执行 Python。
它是在声明行为。你是在配置应用，相当于在说：
"当这个事件触发时，用这些输入调用这个函数，然后更新这些输出。"
当应用涉及几十种交互时，这个区分尤为重要。
避免不必要的执行
假设应用需要执行一个高开销的操作。
在用户还没配置完应用时，你不想每次拖动滑块都触发函数执行。
按钮可以让用户控制何时触发处理：
button.click(
fn=expensive_operation,
inputs=[...],
outputs=[...]
)
这也是事件设计同时也是性能考量的原因之一。
按钮可以承担不同角色
不是所有按钮都该执行同一类操作。
常见示例包括：
Generate
Analyze
Submit
Clear
Reset
Download
Run
Search
Summarize
Translate
标签应该明确表达所执行的动作。
与其写成：
gr.Button("Click Me")
不如写成：
gr.Button("Analyze Document")
——前提是按钮确实做的就是分析文档这件事。
清除与重置交互
好的界面应当让用户轻松从误操作中恢复。
例如，一个"清除"按钮可以重置以下内容：
文本输入
已上传的文件
生成的结果
聊天记录
具体需要重置哪些组件，取决于你的应用。
加载状态
某些操作需要时间。
AI 模型可能需要数秒才能响应，文档解析器可能需要处理大文件，机器学习模型推理也需要一定时间。
一个良好的 Gradio 界面应当让用户明确感知到正在发生的事情。
Gradio 提供了进度展示和任务排队机制，后文会详细介绍。
错误处理也是交互的一部分
假设：
def divide(a, b):
return a / b
用户给 b 输入了零，函数就会报错。
健壮的应用应当预判这种情况：
def divide(a, b):
if b == 0:
return "请输入非零的分母。"
return a / b
交互式应用需要处理真实用户行为，而非只应对理想输入。
动手试试
做一个实时词数统计器。
创建以下组件：
一个大文本框
词数输出
字符数输出
不用按钮，而是用一个事件在用户修改文本时实时更新结果。然后再加一个按钮，手动触发同样的计算。
对比两种体验，思考什么时候自动更新更合适，什么时候按钮能给用户更好的控制感。
本节要点
事件让 Gradio 界面具备交互能力。
.click()响应按钮点击。.change()和.input()可以响应组件值的变化。.submit()适用于文本提交和聊天交互场景。上传和选择事件可以触发后续处理。
一个事件可以同时更新多个输出。
事件可以串联成多步工作流。
事件设计同时影响可用性和性能。
好的界面会响应真实用户的行为，包括无效输入和缓慢操作。
