# @capawesome/capacitor-android-edge-to-edge-support 中文文档

规范地址：https://npmcn.com/package/%40capawesome/capacitor-android-edge-to-edge-support/

版本：8\.0\.8
npm 元数据更新时间：2026-04-13T15:24:40.884Z
中文译文更新时间：2026-11-09T01:54:43.748Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40capawesome/capacitor-android-edge-to-edge-support
原文对照：https://npmcn.com/package/%40capawesome/capacitor-android-edge-to-edge-support/?lang=original
项目主页：https://capawesome.io/plugins/android-edge-to-edge-support/
源码仓库：https://github.com/capawesome-team/capacitor-plugins

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

- 包体积（解压后）：54.5 kB，23 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@capacitor/core \>=8\.0\.0
- 首次发布：2025-02-06T12:53:17.593Z
- 最新版本发布：2026-04-13T15:24:40.573Z
- 近 30 天下载量：412871（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：18（近 12 个月 10 个）

## 中文简介

在Android上支持边缘到边缘显示的电容插件.

## 安装

```sh
npm install @capawesome/capacitor-android-edge-to-edge-support
```

也可以使用：`pnpm add @capawesome/capacitor-android-edge-to-edge-support`、`yarn add @capawesome/capacitor-android-edge-to-edge-support`、`bun add @capawesome/capacitor-android-edge-to-edge-support`

## README

# @capawesome/电容-android-edge-toe-toe-support 页面存档备份,存于互联网档案馆

支持的电容插件 [边对边](https://developer.android.com/develop/ui/views/layout/edge-to-edge) 在Android上显示高级特性,例如设置状态栏和导航栏的背景颜色.

[![Deliver Live Updates to your Capacitor app with Capawesome Cloud](https://cloud.capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.png?t=1)](https://cloud.capawesome.io/)

| 在此之前 | 之后 | 在此之前 | 之后 |
| --- | --- | --- | --- |
| ![](https://github.com/user-attachments/assets/1c42aa63-1191-4b9b-860f-ffc47881d815) | ![](https://github.com/user-attachments/assets/a4df4e58-0c21-45b5-aadd-ca197308016a) | ![](https://github.com/user-attachments/assets/22c94f95-a0c4-4ace-8a3b-3a0feabf9191) | ![](https://github.com/user-attachments/assets/21ece022-fb74-4067-889b-6922ecd0e2a5) |

**请注意:** 尽管它的名称,但这个插件默认不会启用边缘到边缘模式. 相反地,它通过在网页视图中应用适当的套接字来保留传统的应用行为,防止了Android的边缘到尖端变化影响还没有设计支持它的应用.

## 通讯

随时更新有关卡帕韦索姆、Capacitor和Ionic生态系统的最新消息和最新消息,因为我们 [《卡帕索克通讯》](https://cloud.capawesome.io/newsletter/)。 。 。 .

## 兼容性

| 插件版本 | 电容版本 | 状态 |
| --- | --- | --- |
| 8.x.x (英语) | \>=8.x.x | 积极支持 |
| 7.x.x (中文(简体) ) | 7.x.x (中文(简体) ) | 折旧 |

## 安装

你可以用我们的 **AI 辅助设置** 以安装插件. 添加数据 [超级技能](https://github.com/capawesome-team/skills) 至您的 AI 工具,使用以下命令:

```bash
npx skills add capawesome-team/skills --skill capacitor-plugins
```

然后使用下列提示:

```
 Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-android-edge-to-edge-support` plugin in my project.
```

如果你喜欢 **手动设置**,通过运行以下命令来安装插件,并遵循下面的平台特定指令:

```bash
npm install @capawesome/capacitor-android-edge-to-edge-support
npx cap sync
```

### 机器人

#### 电容系统列插件

确保禁用内置套件处理 [电容系统列](https://capacitorjs.com/docs/apis/system-bars) 您的插件 [电容配置](https://capacitorjs.com/docs/config) 文件 :

```json
{
  "plugins": {
    "SystemBars": {
      "insetsHandling": "disable"
    }
  }
}
```

请注意,这个插件是Capacitor核心的一部分,而套接字处理是 **总是默认启用**。 。 。 .

#### 电容键盘插件

如果你正在使用 [电容键盘](https://capacitorjs.com/docs/apis/keyboard) 插件,确保设置 `resizeOnFullScreen` 属性改为 `false` (默认) [电容配置](https://capacitorjs.com/docs/config) 文件 :

```json
{
  "plugins": {
    "Keyboard": {
      "resizeOnFullScreen": false
    }
  }
}
```

否则会调整网页视图的大小以适应屏幕, 这可能会给此插件带来问题, 查看 [本评论](https://github.com/capawesome-team/capacitor-plugins/issues/490#issuecomment-2826435796)。 。 。 .

## 配置

| Prop | 类型 | 说明 | 自兹 |
| --- | --- | --- | --- |
| **`backgroundColor`** | `string` | 要设置的十六进制颜色为状态栏和导航栏的背景颜色. | 7.1.0 (中文(简体) ) |
| **`navigationBarColor`** | `string` | 要设置为导航栏区域背景颜色的十六进制颜色 。 只能从Android上找到. | 8.0.0 (单位:千美元) |
| **`statusBarColor`** | `string` | 要设置的十六进制颜色为状态栏区域的背景颜色 。 只能从Android上找到. | 8.0.0 (单位:千美元) |

### 实例

单位 `capacitor.config.json`数字 :

```json
{
  "plugins": {
    "EdgeToEdge": {
      "backgroundColor": "#ffffff",
      "navigationBarColor": "#000000",
      "statusBarColor": "#ffffff"
    }
  }
}
```

单位 `capacitor.config.ts`数字 :

```ts
/// <reference types="@capawesome/capacitor-android-edge-to-edge-support" />

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    EdgeToEdge: {
      backgroundColor: "#ffffff",
      navigationBarColor: "#000000",
      statusBarColor: "#ffffff",
    },
  },
};

export default config;
```

## 使用量

插件 **只需要安装**。它应用在网络视图中的设置来支持在Android上的边缘到边缘显示。 该插件还提供了一个设置状态栏和导航栏背景颜色的方法. 建议结合使用这种方法 [系统条](https://capacitorjs.com/docs/apis/system-bars) 插件 .

```typescript
import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support';
import { SystemBars, SystemBarsStyle } from '@capacitor/core';

const enable = async () => {
  await EdgeToEdge.enable();
};

const disable = async () => {
  await EdgeToEdge.disable();
};

const getInsets = async () => {
  const result = await EdgeToEdge.getInsets();
  console.log('Insets:', result);
};

const setDarkStyle = async () => {
  await SystemBars.setStyle({ style: SystemBarsStyle.Dark });
  await EdgeToEdge.setBackgroundColor({ color: '#000000' });
};

const setLightStyle = async () => {
  await SystemBars.setStyle({ style: SystemBarsStyle.Light });
  await EdgeToEdge.setBackgroundColor({ color: '#FFFFFF' });
};
```

## API 密码

-   [`disable()`](https://npmcn.com/package/%40capawesome/capacitor-android-edge-to-edge-support/#readme-disable)
-   [`enable()`](https://npmcn.com/package/%40capawesome/capacitor-android-edge-to-edge-support/#readme-enable)
-   [`getInsets()`](https://npmcn.com/package/%40capawesome/capacitor-android-edge-to-edge-support/#readme-getinsets)
-   [`setBackgroundColor(...)`](https://npmcn.com/package/%40capawesome/capacitor-android-edge-to-edge-support/#readme-setbackgroundcolor)
-   [`setNavigationBarColor(...)`](https://npmcn.com/package/%40capawesome/capacitor-android-edge-to-edge-support/#readme-setnavigationbarcolor)
-   [`setStatusBarColor(...)`](https://npmcn.com/package/%40capawesome/capacitor-android-edge-to-edge-support/#readme-setstatusbarcolor)
-   [接口](https://npmcn.com/package/%40capawesome/capacitor-android-edge-to-edge-support/#readme-interfaces)

### 禁用( c)

```typescript
disable() => Promise<void>
```

禁用边缘到边缘模式 .

只能从Android上找到.

**自:** 7.2.0 联合国

* * *

### 启用( )

```typescript
enable() => Promise<void>
```

启用边缘到边缘模式 .

只能从Android上找到.

**自:** 7.2.0 联合国

* * *

### 获取 Insets ()

```typescript
getInsets() => Promise<GetInsetsResult>
```

返回当前应用于网页视图的套件 .

只能从Android上找到.

**回返情况:** `Promise<[GetInsetsResult](https://npmcn.com/package/%40capawesome/capacitor-android-edge-to-edge-support/#readme-getinsetsresult)>`

**自:** 7.2.0 联合国

* * *

### 设置背景颜色(...)

```typescript
setBackgroundColor(options: SetBackgroundColorOptions) => Promise<void>
```

设置状态栏和导航栏的背景颜色.

只能从Android上找到.

| 参数 | 类型 |
| --- | --- |
| **`options`** | `[SetBackgroundColorOptions](https://npmcn.com/package/%40capawesome/capacitor-android-edge-to-edge-support/#readme-setbackgroundcoloroptions)` |

**自:** 7.0.0 (单位:千美元)

* * *

### 设置导航Bar Color (...)

```typescript
setNavigationBarColor(options: SetNavigationBarColorOptions) => Promise<void>
```

设置导航栏区域的背景颜色.

只能从Android上找到.

| 参数 | 类型 |
| --- | --- |
| **`options`** | `[SetNavigationBarColorOptions](https://npmcn.com/package/%40capawesome/capacitor-android-edge-to-edge-support/#readme-setnavigationbarcoloroptions)` |

**自:** 8.0.0 (单位:千美元)

* * *

### 状态Bar Color (...)

```typescript
setStatusBarColor(options: SetStatusBarColorOptions) => Promise<void>
```

设置状态栏区域的背景颜色 .

只能从Android上找到.

| 参数 | 类型 |
| --- | --- |
| **`options`** | `[SetStatusBarColorOptions](https://npmcn.com/package/%40capawesome/capacitor-android-edge-to-edge-support/#readme-setstatusbarcoloroptions)` |

**自:** 8.0.0 (单位:千美元)

* * *

### 接口

#### 获取集结果

| Prop | 类型 | 说明 | 自兹 |
| --- | --- | --- | --- |
| **`bottom`** | `number` | 用于网页视图的下方设置 。 只能从Android上找到. | 7.2.0 联合国 |
| **`left`** | `number` | 应用到网页视图的左侧设置 。 只能从Android上找到. | 7.2.0 联合国 |
| **`right`** | `number` | 适用于网页视图的右侧设置 。 只能从Android上找到. | 7.2.0 联合国 |
| **`top`** | `number` | 用于网页视图的顶部设置 。 只能从Android上找到. | 7.2.0 联合国 |

#### 设置背景颜色选项

| Prop | 类型 | 说明 | 自兹 |
| --- | --- | --- | --- |
| **`color`** | `string` | 要设置的十六进制颜色为状态栏和导航栏的背景颜色. | 7.0.0 (单位:千美元) |

#### 设置导航栏颜色选项

| Prop | 类型 | 说明 | 自兹 |
| --- | --- | --- | --- |
| **`color`** | `string` | 要设置为导航栏区域背景颜色的十六进制颜色 . | 8.0.0 (单位:千美元) |

#### 设置状态栏颜色选项

| Prop | 类型 | 说明 | 自兹 |
| --- | --- | --- | --- |
| **`color`** | `string` | 要设置的十六进制颜色为状态栏区域的背景颜色 . | 8.0.0 (单位:千美元) |

## 财务问题

### 8号控制器的内置边缘对接支援呢?

8号电容通过内部引入了本地边缘到边缘的功能 `SystemBars` 插件 。 虽然这涵盖了许多常见的情况,但这个插件解决了Capacitor核心执行中尚未完全解决的额外边缘案例. 我们计划一旦所有边缘案件在Capacitor核心得到妥善处理后,就对该插件进行贬值.

### 这个插件是否兼容 Capacitor 的 SystemBars API ?

是, 此插件与新插件部分兼容 [系统条 API](https://capacitorjs.com/docs/apis/system-bars) 8. 例如: `setStyle()` 从SystemBars API得到支持,可以与此插件并用,而无需冲突.

## 更改日志

见 [变动情况](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/android-edge-to-edge-support/CHANGELOG.md)。 。 。 .

## 许可证

见 [自由主义](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/android-edge-to-edge-support/LICENSE)。 。 。 .

## 常见问题

### @capawesome/capacitor-android-edge-to-edge-support 是什么？

在Android上支持边缘到边缘显示的电容插件\.

### 如何安装 @capawesome/capacitor-android-edge-to-edge-support？

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

### @capawesome/capacitor-android-edge-to-edge-support 支持 TypeScript 吗？

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

### @capawesome/capacitor-android-edge-to-edge-support 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @capawesome/capacitor-android-edge-to-edge-support 可以商用吗？

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

### @capawesome/capacitor-android-edge-to-edge-support 的下载量有多少？

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

### @capawesome/capacitor-android-edge-to-edge-support 还在维护吗？

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