更新记录

2（2026-01-20） 下载此版本

加了注释

1.0.0（2026-01-06） 下载此版本

1

平台兼容性

uni-app

uni-app x(4.86)

安卓原生灵动岛 (UTS)

本插件使用 Uniapp x 的 UTS 原生混编功能，调用 Android WindowManager 实现系统级悬浮灵动岛。

即使 APP 退到后台，灵动岛依然悬浮在屏幕顶部，类似 iOS 实况活动。

功能特点

• 🚀 原生混编：UTS调用Kotlin代码
• 🎨 支持图文：左侧图标 + 右侧文字。
• 📏 超级校准：内置 API 可调节灵动岛的 Y 轴位置、宽度、高度（解决安卓机型挖孔位置不一的问题）。
• 👆 无视边界：支持覆盖状态栏，遮挡前置摄像头。

平台支持

• Android: ✅ (Android 6.0+)
• iOS: ❌
• Web: ❌

使用文档

1. 引入插件

import { 
    showDynamicIsland, 
    hideDynamicIsland, 
    setIslandContent, 
    updateIslandLayout,
    requestOverlayPermission
} from "@/uni_modules/ling-dynamic-island";

2. API 说明

使用示例（下载插件后直接粘贴下面的代码就可以运行）：

<template>
  <view class="container">
    <text class="title">安卓灵动岛</text>

    <view class="row">
        <button class="mini-btn" size="mini" type="primary" @click="handleOpen">开启</button>
        <button class="mini-btn" size="mini" type="warn" @click="handleClose">关闭</button>
    </view>
    <view class="divider"></view>

    <!-- 1. Y轴位置 (允许负数) -->
    <text class="label">垂直位置 (Y): {{ sliderY }}</text>
    <!-- 设置负数让它往上跑 -->
    <slider :value="sliderY" :min="-100" :max="100" show-value @change="onYChange" />
    <text class="desc">向左拉=上移，向右拉=下移</text>

    <view class="divider"></view>

    <!-- 2. 高度调节 (变肥) -->
    <text class="label">岛的高度/肥度: {{ islandHeight }}</text>
    <slider :value="islandHeight" :min="30" :max="60" show-value @change="onHeightChange" />

    <view class="divider"></view>

    <!-- 3. 宽度调节 -->
    <text class="label">宽度增加: {{ sliderWidth }}</text>
    <slider :value="sliderWidth" :min="10" :max="100" show-value @change="onWidthChange" />

    <image src="/static/logo.png" style="width:0;height:0"></image>
  </view>
</template>

<script setup lang="uts">
  import { 
      showDynamicIsland, 
      hideDynamicIsland, 
      updateIslandLayout
  } from "@/uni_modules/ling-Dong"; 
import { ref } from 'vue'; 
  const sliderY = ref(0);         // Y轴
  const sliderWidth = ref(30);    // 宽度
  const islandHeight = ref(40);   // 高度

  const handleOpen = () => { 
      showDynamicIsland(); 
  }

  const handleClose = () => {
      hideDynamicIsland();
  }

  // === 滑动事件 ===

  const onYChange = (e: UniSliderChangeEvent) => {
      sliderY.value = e.detail.value;
      // 仅修改 Y，宽度传 0 (保持不变)
      updateIslandLayout(sliderY.value, 0);
  }

  // 修改高度（变肥）
  const onHeightChange = (e: UniSliderChangeEvent) => {
      islandHeight.value = e.detail.value;
      const magicNum = 500 + islandHeight.value;
      updateIslandLayout(sliderY.value, magicNum);
  }

  // 修改宽度
  const onWidthChange = (e: UniSliderChangeEvent) => {
      sliderWidth.value = e.detail.value;
      // 正常数字，修改 padding
      updateIslandLayout(sliderY.value, sliderWidth.value);
  }

</script>

<style>
  .container { padding: 30px; }
  .title { text-align: center; font-weight: bold; margin-bottom: 20px;}
  .row { flex-direction: row; justify-content: center; }
  .mini-btn { margin: 0 10px; width: 40%; }
  .divider { height: 1px; background-color: #eee; margin: 20px 0; }
  .label { font-size: 14px; margin-top: 10px; font-weight: bold;}
  .desc { font-size: 12px; color: #999; margin-bottom: 5px; }
</style>