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 例

数据展示

Data List

rx.data_list.rootrx.data_list.itemrx.data_list.labelrx.data_list.value

官方文档

工坊订单

请在订单详情页面上，把状态、下单日期、运单号、合计按“名称：值”的形式整齐排列。

rx.data_list 把名称和值成对地逐行展示，适合整理用户信息、订单详情、文件属性这类元数据。在 rx.data_list.root 里放入 rx.data_list.item，每个条目各放一个 label（名称）和 value（值）。

Status: Authorized
ID: U-474747

rx.data_list.root(
    rx.data_list.item(
        rx.data_list.label("Status"),
        rx.data_list.value("Authorized"),
    ),
    rx.data_list.item(
        rx.data_list.label("ID"),
        rx.data_list.value("U-474747"),
    ),
)

试着改属性

orientation、size、trim 写在 root 上，align 写在 item 上，color_scheme 写在 label 上。

试着改属性

Status: Authorized
Name: Developer Success
Email: success@reflex.dev

orientation

size

trim

align

label_color

rx.data_list.root(
    rx.data_list.item(
        rx.data_list.label("Status", color_scheme="gray"),
        rx.data_list.value(rx.badge("Authorized", radius="full")),
        align="center",
    ),
    rx.data_list.item(
        rx.data_list.label("Name", color_scheme="gray"),
        rx.data_list.value("Developer Success"),
        align="center",
    ),
    rx.data_list.item(
        rx.data_list.label("Email", color_scheme="gray"),
        rx.data_list.value(rx.link("success@reflex.dev", href="mailto:success@reflex.dev")),
        align="center",
    ),
    orientation="horizontal",
    size="2",
    trim="normal",
)

把 orientation 改成 vertical，名称就会移到值的上方。align 是条目内名称与值的垂直对齐方式。

部件	属性	取值	用途
`root`	`orientation`	`"horizontal"`（默认） `"vertical"`	名称和值左右并排还是上下排列
`root`	`size`	`"1"` `"2"`（默认） `"3"`	字号与行距
`root`	`trim`	`"normal"` `"start"` `"end"` `"both"`	修整首行上方、末行下方的文字留白
`item`	`align`	`"start"` `"center"` `"end"` `"baseline"` `"stretch"`	名称与值的垂直对齐
`label`	`width` `min_width` `max_width`	CSS 长度	名称栏的宽度
`label`	`color_scheme`	Radix 颜色名	名称文字的颜色
`value`	（无）		接受任意组件作为子元素

值的位置可以放任何东西

value 里不仅能放文字，还能放徽章、代码、链接等组件。像官方文档的示例那样放进卡片，就成了一个信息框。如果有徽章这类高度不同的值，就给那个条目设置 align="center"，让它与名称居中对齐。

Status: Authorized
ID: U-474747
Name: Developer Success
Email: success@reflex.dev
Company: Reflex

rx.card(
    rx.data_list.root(
        rx.data_list.item(
            rx.data_list.label("Status"),
            rx.data_list.value(rx.badge("Authorized", variant="soft", radius="full")),
            align="center",
        ),
        rx.data_list.item(
            rx.data_list.label("ID"),
            rx.data_list.value(rx.code("U-474747")),
        ),
        rx.data_list.item(
            rx.data_list.label("Name"),
            rx.data_list.value("Developer Success"),
            align="center",
        ),
        rx.data_list.item(
            rx.data_list.label("Email"),
            rx.data_list.value(rx.link("success@reflex.dev", href="mailto:success@reflex.dev")),
        ),
        rx.data_list.item(
            rx.data_list.label("Company"),
            rx.data_list.value(rx.link("Reflex", href="https://reflex.dev", is_external=True)),
        ),
    ),
)

方向

orientation 写在 root 上。窄屏上上下排列（vertical）更易读。也可以像第三个那样按屏幕宽度给不同的值（窄屏时 vertical，sm 以上时 horizontal）。

Plan: Pro
Seats: 12

Plan: Pro
Seats: 12

Plan: Pro
Seats: 12

rx.flex(
    rx.data_list.root(
        rx.data_list.item(rx.data_list.label("Plan"), rx.data_list.value("Pro")),
        rx.data_list.item(rx.data_list.label("Seats"), rx.data_list.value("12")),
        orientation="horizontal",
    ),
    rx.data_list.root(
        rx.data_list.item(rx.data_list.label("Plan"), rx.data_list.value("Pro")),
        rx.data_list.item(rx.data_list.label("Seats"), rx.data_list.value("12")),
        orientation="vertical",
    ),
    rx.data_list.root(
        rx.data_list.item(rx.data_list.label("Plan"), rx.data_list.value("Pro")),
        rx.data_list.item(rx.data_list.label("Seats"), rx.data_list.value("12")),
        orientation={"initial": "vertical", "sm": "horizontal"},
    ),
    spacing="6",
    wrap="wrap",
)

调整名称栏

用 label 的 width 固定名称栏宽度，多个列表的值就会从同一条线开始。color_scheme 改变名称文字的颜色。

Owner: Ada Lovelace
Repository: reflex-dev/reflex

rx.data_list.root(
    rx.data_list.item(
        rx.data_list.label("Owner", width="80px", color_scheme="indigo"),
        rx.data_list.value("Ada Lovelace"),
    ),
    rx.data_list.item(
        rx.data_list.label("Repository", width="80px", color_scheme="indigo"),
        rx.data_list.value("reflex-dev/reflex"),
    ),
)

用数据生成条目

条目来自数据时，用 rx.foreach 逐行生成。官方文档的属性预览也是这么做的。

Status: Authorized
ID: U-474747
Name: Developer Success
Email: foo@reflex.dev

class DataListUserState(rx.State):
    fields: list[list[str]] = [
        ["Status", "Authorized"],
        ["ID", "U-474747"],
        ["Name", "Developer Success"],
        ["Email", "foo@reflex.dev"],
    ]


rx.data_list.root(
    rx.foreach(
        DataListUserState.fields,
        lambda f: rx.data_list.item(rx.data_list.label(f[0]), rx.data_list.value(f[1])),
    ),
)

完成订单

把订单号作为标题，状态用徽章、运单号用代码、合计用粗体显示。

Order #1024

Status: Shipped
Placed: 2026-10-20
Tracking: 1Z999AA10123456784
Total: $48.00

rx.card(
    rx.heading("Order #1024", size="4", margin_bottom="3"),
    rx.data_list.root(
        rx.data_list.item(
            rx.data_list.label("Status"),
            rx.data_list.value(rx.badge("Shipped", color_scheme="green", radius="full")),
            align="center",
        ),
        rx.data_list.item(rx.data_list.label("Placed"), rx.data_list.value("2026-10-20")),
        rx.data_list.item(rx.data_list.label("Tracking"), rx.data_list.value(rx.code("1Z999AA10123456784"))),
        rx.data_list.item(rx.data_list.label("Total"), rx.data_list.value(rx.text("$48.00", weight="bold"))),
    ),
    max_width="420px",
)

工坊笔记

结构是 data_list.root > data_list.item > (data_list.label, data_list.value)。
root：orientation · size · trim，item：align，label：width · color_scheme。
value 里可以放徽章、代码、链接等任意组件。
数据是列表时，用 rx.foreach 生成 item。

← 上一课

数据展示 · List

下一课 →

数据展示 · Code Block

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex