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 例

数据展示

Progress

rx.progress

官方文档

工坊订单

发送文件期间，请用进度条显示已经完成了百分之多少，完成后把它变成绿色。

rx.progress 用进度条展示耗时较长或分多个步骤的任务进行到了哪里。给 value 传 0~100 之间的值。宽度默认是父元素的 100%。

rx.vstack(
    rx.progress(value=0),
    rx.progress(value=50),
    rx.progress(value=100),
    width="50%",
)

试着改属性

value 和 max 只接受整数，所以没有放进这个实习台。让进度值动起来的例子在下文“用 State 驱动”里。

试着改属性

size

variant

color

radius

high_contrast

rx.progress(value=60, size="2", variant="surface", color_scheme="indigo", radius="full", high_contrast=False)

size 选择粗细，variant 选择底色样式，color_scheme 选择颜色。

属性	取值	默认值	用途
`value`	整数	无	当前进度值。不传时是一直移动的进度条
`max`	整数	`100`	填满时的值
`size`	`"1"` `"2"` `"3"`	`"2"`	进度条粗细
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	底色样式
`color_scheme`	Radix 颜色名	主题色	填充的颜色
`high_contrast`	`True` / `False`	`False`	加大对比
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	主题值	圆角大小
`duration`	`"5s"` 这样的时间	无	不给 value 时填满所用的时间
`fill_color`	CSS 颜色	无	直接指定填充部分的颜色

用 max 计步骤

改变 max，就能用 value 按步骤数计数。5 步中的第 3 步就是 value=3, max=5。

3 of 5 steps

rx.vstack(
    rx.text("3 of 5 steps"),
    rx.progress(value=3, max=5),
    width="50%",
)

用 State 驱动

要改变进度值，就把 State 值传给 value。拖动滑块，进度条会跟着动。

30%

class ProgressSliderState(rx.State):
    value: int = 30

    @rx.event
    def set_progress_value(self, value: list[float]):
        self.value = int(value[0])


rx.vstack(
    rx.slider(default_value=[30], on_change=ProgressSliderState.set_progress_value),
    rx.progress(value=ProgressSliderState.value),
    rx.text(ProgressSliderState.value, "%"),
    width="50%",
)

像真实任务那样需要时间的事情，在后台事件（@rx.event(background=True)）里一点点增加值。每次修改 State 都要放在 async with self: 里面，才能立刻推送到页面上。这个例子每 0.1 秒加 5，2 秒结束；运行期间再次点击会被忽略。

import asyncio


class ProgressLiveState(rx.State):
    value: int = 0
    running: bool = False

    @rx.event(background=True)
    async def start_progress(self):
        async with self:
            if self.running:
                return
            self.running = True
            self.value = 0
        while self.value < 100:
            await asyncio.sleep(0.1)
            async with self:
                self.value += 5
        async with self:
            self.running = False


rx.hstack(
    rx.progress(value=ProgressLiveState.value),
    rx.button("Start", on_click=ProgressLiveState.start_progress, loading=ProgressLiveState.running),
    width="60%",
    align="center",
)

不知道进度时

不传 value，进度条会变成来回不停移动的动画，用于不知道还要等多久的情况。传入 duration 时，进度条会在这段时间里模拟填满，时间一过就变成不停移动的样子。

No value: endless animation

duration="5s": fills in 5 seconds, then keeps moving

rx.vstack(
    rx.text("No value: endless animation", size="2"),
    rx.progress(),
    rx.text('duration="5s": fills in 5 seconds, then keeps moving', size="2"),
    rx.progress(duration="5s"),
    width="60%",
)

直接指定填充色

fill_color 用 CSS 颜色直接指定填充部分的颜色。需要 Radix 颜色名列表里没有的颜色时使用。

rx.vstack(
    rx.progress(value=70, fill_color="orange"),
    rx.progress(value=40, fill_color="#2e8b57"),
    width="50%",
)

完成订单

点击按钮后，后台事件每次增加 10%，填满后状态文字变成 "Done"，进度条变成绿色。并不会真的发送文件。

report.pdf

Ready

import asyncio


class ProgressUploadState(rx.State):
    percent: int = 0
    status: str = "Ready"

    @rx.event(background=True)
    async def send_files(self):
        async with self:
            if self.status == "Uploading...":
                return
            self.status = "Uploading..."
            self.percent = 0
        for _ in range(10):
            await asyncio.sleep(0.2)
            async with self:
                self.percent += 10
        async with self:
            self.status = "Done"


rx.card(
    rx.vstack(
        rx.hstack(rx.icon("upload"), rx.text("report.pdf", weight="bold"), rx.spacer(), rx.text(ProgressUploadState.percent, "%"), width="100%", align="center"),
        rx.progress(value=ProgressUploadState.percent, color_scheme=rx.cond(ProgressUploadState.status == "Done", "green", "indigo")),
        rx.hstack(
            rx.text(ProgressUploadState.status, size="2", color_scheme="gray"),
            rx.spacer(),
            rx.button("Upload", size="1", on_click=ProgressUploadState.send_files),
            width="100%",
            align="center",
        ),
        width="100%",
    ),
    max_width="360px",
)

工坊笔记

用 rx.progress(value=…) 制作 0~100 的进度条。用 max 改变基准值。
把 State 值传给 value；耗时任务在 background 事件里用 async with self 增加。
没有 value 时是无限动画，传入 duration 时会在这段时间里填满。
外观用 size · variant · color_scheme · radius · high_contrast，填充色用 fill_color。

← 上一课

数据展示 · Code Block

下一课 →

数据展示 · Spinner

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex