# @dschz/solid-auto-sizer 中文文档

规范地址：https://npmcn.com/package/%40dschz/solid-auto-sizer/

版本：0\.1\.3
npm 元数据更新时间：2025-06-05T16:39:30.092Z
中文译文更新时间：2026-11-12T21:16:16.708Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40dschz/solid-auto-sizer
原文对照：https://npmcn.com/package/%40dschz/solid-auto-sizer/?lang=original
项目主页：https://github.com/dsnchz/solid-auto-sizer#readme
源码仓库：https://github.com/dsnchz/solid-auto-sizer

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：16.7 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：solid-js \>=1\.6\.0
- 首次发布：2025-05-27T07:31:17.122Z
- 最新版本发布：2025-06-05T16:39:29.880Z
- 近 30 天下载量：6728（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 0 个）

## 中文简介

SolidJS组件可以自动测量并提供其母的宽度和高度——用于虚拟化列表,网格和图表.

## 安装

```sh
npm install @dschz/solid-auto-sizer
```

也可以使用：`pnpm add @dschz/solid-auto-sizer`、`yarn add @dschz/solid-auto-sizer`、`bun add @dschz/solid-auto-sizer`

## README

![SolidJS AutoSizer](https://assets.solidjs.com/banner?type=Ecosystem&background=tiles&project=solid-auto-sizer)

# @dschz/ 固态自动喷雾器

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://img.shields.io/npm/v/@dschz/solid-auto-sizer?color=blue)](https://www.npmjs.com/package/@dschz/solid-auto-sizer) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/@dschz/solid-auto-sizer)](https://bundlephobia.com/package/@dschz/solid-auto-sizer) [![JSR](https://jsr.io/badges/@dschz/solid-auto-sizer/score)](https://jsr.io/@dschz/solid-auto-sizer) [![CI](https://github.com/dsnchz/solid-auto-sizer/actions/workflows/ci.yaml/badge.svg)](https://github.com/dsnchz/solid-auto-sizer/actions/workflows/ci.yaml)

> 一个SolidJS组件会自动测量并提供其母容器的宽度和高度,使其适合响应性布局和虚拟化组件.

**灵感来自 [React 虚拟化自动监视器](https://github.com/bvaughn/react-virtualized-auto-sizer)**,这个组件为SolidJS带来了同样的强大的自动变速能力,具有诸如调整观察员API等现代改进和反应信号,以提高性能和开发者的经验.

## \* 特性

-   🔍 **现代调整观察员 API** - 提高性能和可靠性
-   ⚡ **反应更新** - 使用SolidJS信号进行高效的再着陆
-   🎛️ **自定义初始尺寸** - 为初始渲染设定默认宽度/ 高度
-   📞 **可选的调用大小** - 大小变化时得到通知
-   🎨 **样式和类道具支持** - 完全灵活
-   📦 **轻巧** - 零依赖最小捆绑大小

## \* 安装

通过您最喜欢的软件包管理器安装 :

```bash
npm install solid-js @dschz/solid-auto-sizer
pnpm install solid-js @dschz/solid-auto-sizer
yarn install solid-js @dschz/solid-auto-sizer
bun install solid-js @dschz/solid-auto-sizer
```

> 这是一个 **同伴依赖**,因此必须手动安装:
> 
> -   `solid-js@>=1.6.0`

## QQ 快速启动

```tsx
import { AutoSizer } from "@dschz/solid-auto-sizer";

function MyComponent() {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <AutoSizer>
        {({ width, height }) => (
          <div style={{ width: `${width}px`, height: `${height}px` }}>
            Content that adapts to container size: {width} × {height}
          </div>
        )}
      </AutoSizer>
    </div>
  );
}
```

## 使用实例

### 基本用途

```tsx
import { AutoSizer } from "@dschz/solid-auto-sizer";

<AutoSizer>{({ width, height }) => <canvas width={width} height={height} />}</AutoSizer>;
```

### 有初始尺寸

```tsx
<AutoSizer initialWidth={400} initialHeight={300}>
  {({ width, height }) => <MyChart width={width} height={height} data={data} />}
</AutoSizer>
```

### 调整回调大小

```tsx
<AutoSizer
  onResize={({ width, height }) => {
    console.log(`Container resized to: ${width}x${height}`);
  }}
>
  {({ width, height }) => <VirtualizedList width={width} height={height} items={items} />}
</AutoSizer>
```

### 带有自定义样式

```tsx
<AutoSizer
  class="my-auto-sizer"
  style={{
    "background-color": "#f0f0f0",
    border: "1px solid #ccc",
    padding: "10px",
  }}
>
  {({ width, height }) => (
    <div>
      Styled container: {width} × {height}
    </div>
  )}
</AutoSizer>
```

## API 参考

### 道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `children` | `(size: Size) => JSX.Element` | **需求** | 接收所测量维度的渲染道具 |
| `initialWidth` | `number` | `0` | 测量前初始渲染的默认宽度 |
| `initialHeight` | `number` | `0` | 测量前初始渲染的默认高度 |
| `onResize` | `(size: Size) => void` | `undefined` | 当容器大小改变时调用已发射 |
| `class` | `string` | `undefined` | 集装箱元件的CSS类 |
| `style` | `JSX.CSSProperties` | `undefined` | 容器的内置样式( 宽度/ 高度保留) |

### 类型

```tsx
type Size = {
  readonly width: number;
  readonly height: number;
};

type AutoSizerProps = {
  readonly class?: string;
  readonly style?: Omit<JSX.CSSProperties, "width" | "height">;
  readonly initialWidth?: number;
  readonly initialHeight?: number;
  readonly onResize?: (size: Size) => void;
  readonly children: (size: Size) => JSX.Element;
};
```

## 互动游戏场

探索AutoSizer能力 与我们的综合操场应用! 游乐场包括:

-   **基本实例** - 简单的响应内容、调整召回大小、自定义尺寸、弹性框集成
-   **图表和可视化** - 对应的条形图、线形图、馅饼图和仪表板
-   **虚拟列表和网格** - 具有1K-100K项目、可搜索列表、可变高度的性能演示
-   **实时演示** - 可以调整大小和修改的交互式实例

### 运行游戏场

```bash
# Clone the repository
git clone https://github.com/dsnchz/solid-auto-sizer.git
cd solid-auto-sizer

# Install dependencies
npm|pnpm|yarn|bun install

# Start the development server
npm|pnpm|yarn|bun start
```

游乐场将在 `http://localhost:3000` 并展示现实世界使用的案例包括:

-   📊 **图表整合** - 看看AutoSizer如何与数据可视化工作
-   📋 **虚拟滚动** - 用大型数据集进行性能测试
-   🎨 **样式示例** - 自定义主题和响应性设计
-   ⚡ **业绩监测** - 实时调整活动规模跟踪

## 常见案件

### 图表和可视化

```tsx
import { AutoSizer } from "@dschz/solid-auto-sizer";
import { LineChart } from "my-chart-library";

<div style={{ width: "100%", height: "400px" }}>
  <AutoSizer>
    {({ width, height }) => <LineChart width={width} height={height} data={chartData} />}
  </AutoSizer>
</div>;
```

### 虚拟列表

```tsx
import { AutoSizer } from "@dschz/solid-auto-sizer";
import { VirtualList } from "my-virtualization-library";

<div style={{ width: "100%", height: "600px" }}>
  <AutoSizer>
    {({ width, height }) => (
      <VirtualList
        width={width}
        height={height}
        itemCount={items.length}
        itemSize={50}
        renderItem={({ index }) => <div>{items[index].name}</div>}
      />
    )}
  </AutoSizer>
</div>;
```

### 响应网格

```tsx
import { AutoSizer } from "@dschz/solid-auto-sizer";

<AutoSizer>
  {({ width }) => {
    const columns = Math.floor(width / 200); // 200px per column
    return (
      <div
        style={{
          display: "grid",
          "grid-template-columns": `repeat(${columns}, 1fr)`,
          gap: "16px",
        }}
      >
        {items.map((item) => (
          <GridItem key={item.id} {...item} />
        ))}
      </div>
    );
  }}
</AutoSizer>;
```

## QQ 浏览器支持

自动监视器使用 [调整观察员 API 的大小](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver),支持方式为:

-   色调 64+
-   Firefox 69+ (英语)
-   萨法里13.1+
-   边缘79+

对于更古老的浏览器,您可以使用 [调整观察员多填充的大小](https://github.com/que-etc/resize-observer-polyfill)。 。 。 .

## 许可证

麻省理工学院执照 - 看 [自由主义](https://npmcn.com/package/%40dschz/solid-auto-sizer/LICENSE) 详细文件.

## 承认

-   灵感来自 [React 虚拟化自动监视器](https://github.com/bvaughn/react-virtualized-auto-sizer)
-   与 [固态JS](https://www.solidjs.com/)

## 常见问题

### @dschz/solid-auto-sizer 是什么？

SolidJS组件可以自动测量并提供其母的宽度和高度——用于虚拟化列表,网格和图表\.

### 如何安装 @dschz/solid-auto-sizer？

在项目目录运行 npm install @dschz/solid-auto-sizer，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：solid-js（\>=1\.6\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dschz/solid-auto-sizer 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @dschz/solid-auto-sizer 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @dschz/solid-auto-sizer 可以商用吗？

@dschz/solid-auto-sizer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @dschz/solid-auto-sizer 的下载量有多少？

根据 npm 官方下载统计，@dschz/solid-auto-sizer 在 2026/10/13 – 2026/11/11 这 30 天内被下载 6,728 次，日均约 224 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @dschz/solid-auto-sizer 还在维护吗？

最新版本 0\.1\.3 发布于 2025/06/06（1\.4 年前）；至今共发布 4 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/05/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。