ReflexKR

Reflex 官方文档

组件工坊：Reflex 组件库 100 例

课程概览

布局

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

排版

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

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

组件工坊：Reflex 组件库 100 例

展开与切换

Segmented Control

rx.segmented_control.rootrx.segmented_control.item

官方文档

工坊订单

请在商品列表上方加一个“网格 / 列表”视图切换，并按选中的方式展示商品。

分段控件是一组按钮，用来从固定的几个值或视图中选出一个。像 "Inbox / Drafts / Sent" 这样只能打开一个的选择，它能表达得一清二楚。下拉框只显示选中的值，几个独立按钮又不容易看出哪个是打开的，而分段控件能同时展示全部选项和当前的选择。

rx.segmented_control.root 包住若干 rx.segmented_control.item，每个 item 都有显示的文字和唯一的 value。

rx.segmented_control.root(
    rx.segmented_control.item("Inbox", value="inbox"),
    rx.segmented_control.item("Drafts", value="drafts"),
    rx.segmented_control.item("Sent", value="sent"),
    default_value="inbox",
)

试着改属性

size

variant

color

radius

rx.segmented_control.root(
    rx.segmented_control.item("Inbox", value="inbox"),
    rx.segmented_control.item("Drafts", value="drafts"),
    rx.segmented_control.item("Sent", value="sent"),
    default_value="inbox",
    size="2",
    variant="surface",
    color_scheme="indigo",
    radius="medium",
)

size 决定大小，variant 决定底色样式，color_scheme 决定选中格的颜色，radius 决定圆角。

部件	属性	取值	用途
`root`	`default_value`	item 的 value	初始选中的值（非受控）
`root`	`value` + `on_change`	State 值、事件	用 State 管理选中的值（受控）
`root`	`type`	`"single"`（默认） `"multiple"`	只能选一个，还是可以选多个
`root`	`size`	`"1"` `"2"`（默认） `"3"`	大小
`root`	`variant`	`"surface"`（默认） `"classic"`	底色样式
`root`	`color_scheme` · `radius`	Radix 颜色名、圆角值	颜色与圆角
`item`	`value`	字符串（唯一）	这一格的值

与 State 连接

和官方文档的基本示例一样，把 State 值连到 value，把修改这个值的事件连到 on_change。选中一格时，on_change 会传入所选 item 的 value；State 一变，页面上其他地方也跟着变。这里用选中的值来改变文字的对齐方式。

on_change 会根据 type 传入字符串或字符串列表，所以处理函数的参数类型要写成 str | list[str]。只写 str 的话，Reflex 会报类型不匹配的错误。

Aligned left

class SegmentedAlignState(rx.State):
    control: str = "left"

    @rx.event
    def set_segmented_align(self, value: str | list[str]):
        if isinstance(value, str):
            self.control = value


rx.vstack(
    rx.segmented_control.root(
        rx.segmented_control.item("Left", value="left"),
        rx.segmented_control.item("Center", value="center"),
        rx.segmented_control.item("Right", value="right"),
        value=SegmentedAlignState.control,
        on_change=SegmentedAlignState.set_segmented_align,
    ),
    rx.card(
        rx.text("Aligned " + SegmentedAlignState.control, align=SegmentedAlignState.control),
        width="100%",
    ),
    width="100%",
)

多选

设置 type="multiple" 后可以同时打开多格，值会变成列表。item 里也可以用图标代替文字。下面是粗体、斜体、下划线按钮。Reflex 0.10 在创建组件时会直接检查 type 是否为 "multiple"，所以 type 要传固定值而不是 State 值。因此实习台里也没有放它。

Sample text

value = bold

class SegmentedStyleState(rx.State):
    styles: list[str] = ["bold"]

    @rx.event
    def set_segmented_styles(self, value: str | list[str]):
        self.styles = [value] if isinstance(value, str) else list(value)


rx.vstack(
    rx.segmented_control.root(
        rx.segmented_control.item(rx.icon("bold", size=16), value="bold"),
        rx.segmented_control.item(rx.icon("italic", size=16), value="italic"),
        rx.segmented_control.item(rx.icon("underline", size=16), value="underline"),
        type="multiple",
        value=SegmentedStyleState.styles,
        on_change=SegmentedStyleState.set_segmented_styles,
    ),
    rx.text(
        "Sample text",
        weight=rx.cond(SegmentedStyleState.styles.contains("bold"), "bold", "regular"),
        font_style=rx.cond(SegmentedStyleState.styles.contains("italic"), "italic", "normal"),
        text_decoration=rx.cond(SegmentedStyleState.styles.contains("underline"), "underline", "none"),
    ),
    rx.text("value = ", SegmentedStyleState.styles.join(", "), size="1", color_scheme="gray"),
)

完成订单

根据选中的值，用 rx.cond 切换显示网格或列表。item 里同时放了图标和文字。

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

class SegmentedViewState(rx.State):
    view: str = "grid"

    @rx.event
    def set_segmented_view(self, value: str | list[str]):
        if isinstance(value, str):
            self.view = value


rx.vstack(
    rx.segmented_control.root(
        rx.segmented_control.item(rx.icon("layout-grid", size=14), "Grid", value="grid"),
        rx.segmented_control.item(rx.icon("list", size=14), "List", value="list"),
        value=SegmentedViewState.view,
        on_change=SegmentedViewState.set_segmented_view,
        size="1",
    ),
    rx.cond(
        SegmentedViewState.view == "grid",
        rx.grid(*[rx.card(rx.text("Item ", i), height="60px") for i in range(1, 7)], columns="3", spacing="2", width="100%"),
        rx.vstack(*[rx.card(rx.text("Item ", i), width="100%") for i in range(1, 7)], spacing="2", width="100%"),
    ),
    width="100%",
    max_width="420px",
)

工坊笔记

在 segmented_control.root 里放入 segmented_control.item("文字", value=…)。
default_value 为非受控，value + on_change 交给 State 管理（受控）。
on_change 处理函数的参数类型是 str | list[str]。
type="multiple" 时可以打开多格，值会变成列表。
用 size · variant（surface · classic）· color_scheme · radius 决定外观。

← 上一课

展开与切换 · Accordion

下一课 →

浮层 · Tooltip

订阅新课时和新课程通知

本课程新增课时或推出后续课程时，我们会发邮件通知你。

问答

关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。

ReflexKR

动手学 Python 和 Reflex。所有示例均已在 Reflex 0.10.0 上实际运行验证。

ReflexKR 免费，没有横幅广告。如果对你有帮助，欢迎请我们喝杯咖啡。 ☕ 请我们喝杯咖啡

联盟链接与赞助说明

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex