这是最后一课。我们先看看如何把前面写好的界面函数挂到真正的网址上，然后把第1～5课学到的内容全部用上，完成一个小应用。
Reflex 应用通过 rx.App 创建，再用 add_page 把界面函数绑定到网址（route）上。
def index():
return rx.text("Root Page")
app = rx.App()
app.add_page(index, route="/")app = rx.App() 必须写在主文件的最外层。Reflex 会按 app 这个名字来查找应用。route="/" 是网站的首页。可以像 app.add_page(about, route="/about") 这样继续添加页面。route 时，函数名就是网址。index 对应 /，about 对应 /about。这是一个用按钮放入和取出水果的篮子。代码不长，却涵盖了这门课的所有概念。
FRUITS = ["Apple", "Banana", "Cherry", "Grape", "Mango", "Peach"]
class BasketState(rx.State):
basket: list[str] = []
@rx.event
def add_fruit(self):
# Event handlers run real Python: pick the next fruit in the list.
self.basket.append(FRUITS[len(self.basket) % len(FRUITS)])
@rx.event
def remove_last(self):
if self.basket:
self.basket.pop()
def fruit_basket():
return rx.vstack(
rx.hstack(
rx.heading("My basket", as_="h2", size="5"),
# Var operations: .length() and % work on vars in components.
rx.badge(BasketState.basket.length()),
rx.cond(
BasketState.basket.length() % 2 == 0,
rx.badge("even", color_scheme="green"),
rx.badge("odd", color_scheme="orange"),
),
align="center",
),
rx.cond(
BasketState.basket.length() > 0,
rx.list.unordered(rx.foreach(BasketState.basket, rx.list.item)),
rx.text("The basket is empty.", color_scheme="gray"),
),
rx.hstack(
rx.button("Add fruit", on_click=BasketState.add_fruit),
rx.button("Remove last", on_click=BasketState.remove_last, variant="soft"),
),
align="start",
)
app = rx.App()
app.add_page(fruit_basket, route="/")localhost:3000
动手试试The basket is empty.
我们来逐一看看，代码的每个部分分别是在哪一课学到的。
| 代码 | 概念 | 课次 |
|---|---|---|
basket: list[str] = [] | 存放可变数据的 State var | 第1课 |
on_click=BasketState.add_fruit | 事件触发器与处理器 | 第1课 |
rx.cond(... > 0, 列表, "empty") | 条件渲染 | 第2课 |
rx.foreach(BasketState.basket, rx.list.item) | 列表渲染。也可以直接传入组件函数 | 第3课 |
处理器中的 len(self.basket)、if | 运行时的真正 Python | 第4课 |
界面中的 .length()、% 2 == 0 | 编译时使用的 Var 运算 | 第4课 |
variant="soft"、color_scheme="gray" | 用 props 美化 | 第5课 |
app.add_page(fruit_basket, route="/") | 注册页面 | 第6课 |
请留意：同样是求长度，在处理器里可以用 len，到了界面里就要换成 .length()。只要能回答第4课的那个问题——"这段代码是什么时候执行的？"，你就已经掌握了 Reflex 的基本功。
基础已经打好，接下来就该动手做一个真正的应用了。
add_fruit，让同一种水果不会被放进篮子两次。因为是在处理器里，可以用 if fruit not in self.basket。rx.cond。rx.App 和 add_page 注册页面。订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。