QiuYe UI
内容与媒体

HoneycombView

Apple Watch 风格的蜂窝图标视图：六边形密排，靠近边缘的图标连续缩小并向内收拢，支持四向自由拖动与仅上下滚动两种模式，带惯性、橡皮筋回弹与吸附。

Apple Watch蜂窝六边形鱼眼拖动惯性列表

快速预览

查看 HoneycombView 组件的基本效果

基本用法

使用 HoneycombView 组件的基础示例

导入组件

1import { HoneycombView } from "@/components/qiuye-ui/honeycomb-view";

使用组件

1<HoneycombView
2  className="h-[360px] w-[300px] rounded-[56px] bg-black"
3  mode="free" // 或 "vertical"
4  items={apps}
5  getItemKey={(app) => app.id}
6  getItemLabel={(app) => app.name}
7  renderItem={(app) => (
8    <span className="flex size-full items-center justify-center rounded-full bg-blue-500 text-white">
9      <app.icon className="size-1/2" />
10    </span>
11  )}
12  onItemSelect={(app) => console.log(app.name)}
13/>

组件演示

查看组件的各种使用方式和效果

Apple Watch 主屏
拖动、甩动、拉过边界再松手；轻点图标打开应用。桌面端也可以用滚轮或触控板。

靠近边缘的图标按「空间被压缩多少就缩小多少」连续缩小并向内收拢。 上下滚动模式参照 watchOS 10 网格：首行 3 个，正中的图标最大、向外逐渐变小。

参数调试
实时调整参数观察效果。白色虚线是满尺寸区域的边界，蓝色虚线是边缘小圆点的渐近线（上下滚动模式中缩放带只作用于上下两端）。
缩放带宽度 edgeWidth47（默认 = 0.65 × itemSize）
球面感 curvature40%（默认 0.4）
图标直径 itemSize72
间距 gap10
视口宽度300
视口高度360
视口圆角 cornerRadius60
图标数量51
任意尺寸
不限于表盘：放进任意矩形容器，边缘缩放带随视口尺寸适配。