组件工坊：Reflex 组件库 100 例
·
课程概览
布局
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
排版
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
Kbd
表单
·
Button
·
Input
·
Text Area
·
Checkbox
·
Switch
·
Radio Group
·
Select
·
Slider
·
Form
·
Upload
数据展示
·
Badge
·
Avatar
·
Icon
·
Callout
·
List
·
Data List
·
Code Block
·
Progress
·
Spinner
·
Scroll Area
·
Moment
展开与切换
·
Tabs
·
Accordion
·
Segmented Control
浮层
·
Tooltip
·
Popover
·
Hover Card
·
Dialog
·
Alert Dialog
·
Drawer
·
Dropdown Menu
·
Context Menu
·
Toast
动态渲染
·
Cond
·
Match
·
Foreach
·
Auto Scroll
媒体
·
Image
·
Audio
·
Video
表格与数据网格
·
Table
·
Data Table
·
Data Editor
图表
·
Area Chart
·
Bar Chart
·
Line Chart
·
Composed Chart
·
Pie Chart
·
Radar Chart
·
Radial Bar Chart
·
Scatter Chart
·
Funnel Chart
·
Treemap
·
Sankey Chart
·
Error Bar
图表部件
·
Axis
·
Cartesian Grid
·
Chart Tooltip
·
Legend
·
Label
·
Reference
·
Brush
其他图表库
·
Plotly
·
Pyplot
HTML 元素
·
HTML
·
HTML Text
·
HTML Layout
·
HTML Forms
·
HTML Media
·
HTML Tables
·
SVG
其他工具
·
Theme
·
Skeleton
·
Clipboard
·
Html Embed
·
Script
·
Memo
rx.switch官方文档
工坊订单
请在应用设置页加三个通知开关。当前打开的项目要在下方汇总显示。
rx.switch 以开关的样子接收和复选框一样的“是/否”值。适合“立即生效的设置”这类一打开就有变化的地方。像同意条款、从列表中挑选这类在提交时一起发送的值，用 Checkbox 更自然。
rx.switch(default_checked=True)试着改属性
size
variant
color
radius
high_contrast
disabled
rx.switch(default_checked=True, size="2", variant="surface", color_scheme="indigo", radius="full", high_contrast=False, disabled=False)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
checked | True / False / Var | 无 | 受控的值（配合 on_change） |
default_checked | True / False | False | 只在开始时设定一次的值 |
size | "1" ~ "3" | "2" | 大小 |
variant | "classic" "surface" "soft" | "surface" | 外观 |
color_scheme, high_contrast | Radix 颜色名 / True | 主题值 | 打开时的颜色与对比度 |
radius | "none" "small" "full" | 主题值 | 圆角 |
disabled | True / False | False | 不让用户点击 |
name, value, required | 字符串 / True | 无 / "on" | 表单提交名·值；必须打开才能提交 |
on_change | 事件 | 打开或关闭时触发，传入 True/False |
每拨动一次开关，on_change 都会传入新值。把它记到 State 里，页面其他地方就能用这个值。
class SwitchBasicState(rx.State):
value: bool = False
@rx.event
def set_value(self, value: bool):
self.value = value
rx.hstack(
rx.switch(on_change=SwitchBasicState.set_value),
rx.badge(SwitchBasicState.value.to_string()),
align="center",
)把 State 的值交给 checked，开关就跟随这个值。两个开关看的是同一个值，拨动一个，两个都会变。第二个开关是 disabled=True，不能直接点，但 checked 变了它也会一起动。像按钮那样在服务器端改值也是一样。
class SwitchControlState(rx.State):
checked: bool = True
@rx.event
def change_checked(self, checked: bool):
self.checked = checked
@rx.event
def flip(self):
self.checked = not self.checked
rx.hstack(
rx.switch(checked=SwitchControlState.checked, on_change=SwitchControlState.change_checked),
rx.switch(checked=SwitchControlState.checked, on_change=SwitchControlState.change_checked, disabled=True),
rx.button("Flip from server", on_click=SwitchControlState.flip, size="1", variant="soft"),
align="center",
spacing="4",
)和 Checkbox 不同，rx.switch 没有标签参数。用 rx.text(..., as_="label") 把开关和文字一起包起来，点文字也能拨动开关。
rx.text(
rx.flex(rx.switch(default_checked=True), "Wi-Fi", spacing="2", align="center"),
as_="label",
size="2",
)有 name 就会进入表单数据。只有打开的开关以 "on"（或 value 给的值）进入，关闭的开关不出现。value 只是要提交的值，开没开由 checked 决定。required=True 的开关必须打开才能提交。
Results:
{}class SwitchFormState(rx.State):
form_data: dict = {}
@rx.event
def handle_submit(self, form_data: dict):
self.form_data = form_data
rx.card(
rx.vstack(
rx.form.root(
rx.vstack(
rx.text(rx.flex(rx.switch(name="email_alerts", value="yes"), "Email alerts", spacing="2"), as_="label", size="2"),
rx.text(rx.flex(rx.switch(name="age_check", required=True), "I am over 14 (required)", spacing="2"), as_="label", size="2"),
rx.button("Submit", type="submit"),
),
on_submit=SwitchFormState.handle_submit,
reset_on_submit=True,
),
rx.divider(),
rx.hstack(rx.text("Results:", weight="bold"), rx.badge(SwitchFormState.form_data.to_string())),
),
)设置名列表是常量，所以不用 rx.foreach，而是用 Python 列表推导式生成每一行。每个开关看的是 settings[name]，on_change 会把名字和新值一起传过去。lambda 里的 n=name 是在每次循环时把名字固定下来的默认参数。
Order updates
Delivery alerts
Coupons
On: Order updates, Delivery alerts
SWITCH_SETTING_NAMES = ["Order updates", "Delivery alerts", "Coupons"]
class SwitchSettingsState(rx.State):
settings: dict[str, bool] = {"Order updates": True, "Delivery alerts": True, "Coupons": False}
@rx.event
def toggle(self, name: str, value: bool):
self.settings = {**self.settings, name: value}
@rx.var
def summary(self) -> str:
on = [k for k in SWITCH_SETTING_NAMES if self.settings.get(k)]
return ", ".join(on) if on else "Nothing"
rx.card(
rx.vstack(
*[
rx.hstack(
rx.text(name, size="2"),
rx.spacer(),
rx.switch(
checked=SwitchSettingsState.settings[name],
on_change=lambda v, n=name: SwitchSettingsState.toggle(n, v),
),
width="100%",
align="center",
)
for name in SWITCH_SETTING_NAMES
],
rx.divider(),
rx.text("On: ", SwitchSettingsState.summary, size="1", color_scheme="gray"),
width="260px",
),
)工坊笔记
rx.switch 用于打开即生效的设置，提交时一起收集的值用 Checkbox。
on_change 传入 True/False。要受控就用 checked + on_change。
disabled 只挡住用户。checked 变了，开关也会变。
标签用 rx.text(..., as_="label") 包起来加上。
在表单中只有打开的开关以 name: "on"（或 value）进入数据。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。