组件工坊：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.aspect_ratio官方文档
工坊订单
请按 16:9 的比例留出视频缩略图的位置，屏幕宽度变化时也保持这个比例。
rx.aspect_ratio 按固定的宽高比显示内部内容。给 ratio 传入“宽 ÷ 高”的值，它会根据给定的宽度自动算出高度。缩略图、视频位、地图等在屏幕宽度变化时也不能变形的地方都用它。
rx.box(
rx.aspect_ratio(
rx.center("16:9", background_color="var(--accent-4)", width="100%", height="100%"),
ratio=16 / 9,
),
width="240px",
)试着改属性
只要定下外层盒子的宽度，高度就由 ratio 决定。选择与图片原始比例（4:3）不同的比例时，会根据 object_fit 裁切图片或留出空白。
试着改属性
ratio
1.75
width
fit
rx.box(
rx.aspect_ratio(
rx.image(
src="https://picsum.photos/id/1025/400/300",
width="100%",
height="100%",
object_fit="cover",
background_color="var(--gray-4)",
),
ratio=1.75,
),
width="200px",
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
ratio | 数字（16 / 9、4 / 3、1） | 1 | 宽 ÷ 高。按此比例决定高度 |
内部内容的 width height | "100%" | 无 | 让内容撑满比例盒子 |
图片的 object_fit | "cover" "contain" "fill" | "fill" | 比例不同的图片是裁切、留白还是拉伸 |
ratio 可以直接写 Python 表达式 16 / 9（值为 1.777…）。
各种比例
这是官方文档的示例。在同样的宽度下，只有高度随比例变化。给内部盒子设置 width="100%"、height="100%"，让它撑满比例盒子。
rx.grid(
rx.aspect_ratio(
rx.box("Widescreen 16:9", background_color="papayawhip", width="100%", height="100%"),
ratio=16 / 9,
),
rx.aspect_ratio(
rx.box("Letterbox 4:3", background_color="orange", width="100%", height="100%"),
ratio=4 / 3,
),
rx.aspect_ratio(
rx.box("Square 1:1", background_color="green", width="100%", height="100%"),
ratio=1,
),
rx.aspect_ratio(
rx.box("Portrait 5:7", background_color="lime", width="100%", height="100%"),
ratio=5 / 7,
),
spacing="2",
width="160px",
)尺寸由外部决定
直接给 aspect_ratio 本身或其内容设置像素 width·height，比例就会被破坏。正确做法是用 rx.box 包住 aspect_ratio，由这个盒子决定宽度（或高度），内容的宽高则设为 "100%"。下面是在四个宽度为 20% 的盒子里，以不同比例放入同一张图片。为了不让图片变形，设置了 object_fit="cover"。
rx.flex(
*[
rx.box(
rx.aspect_ratio(
rx.image(
src="https://picsum.photos/id/237/400/400",
alt="Dog",
width="100%",
height="100%",
object_fit="cover",
),
ratio=ratio,
),
width="20%",
)
for ratio in [16 / 9, 3 / 2, 2 / 3, 1]
],
justify="between",
align="start",
width="100%",
)完成订单
外层盒子在 max_width 以内随屏幕宽度变化，高度由 16:9 的比例决定。缩略图上的播放按钮用 position="absolute" 叠放在正中央。
rx.box(
rx.aspect_ratio(
rx.box(
rx.image(
src="https://picsum.photos/id/1039/800/450",
alt="Waterfall",
width="100%",
height="100%",
object_fit="cover",
),
rx.center(
rx.icon("play", size=28, color="white"),
width="56px",
height="56px",
border_radius="9999px",
background_color="rgba(0, 0, 0, 0.55)",
position="absolute",
top="50%",
left="50%",
transform="translate(-50%, -50%)",
),
position="relative",
width="100%",
height="100%",
border_radius="8px",
overflow="hidden",
),
ratio=16 / 9,
),
width="100%",
max_width="420px",
)工坊笔记
用 rx.aspect_ratio(内容, ratio=16 / 9) 固定宽 ÷ 高的比例。
尺寸由外层 rx.box 决定，内容设为 width·height "100%"。
不要直接给 aspect_ratio 或其内容设置像素尺寸。
图片用 object_fit="cover" 填满而不变形。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。