速查手册定位

本文档是快速修正单位转换API弃用警告的实用指南，提供直接可复制的代码示例，适合开发过程中快速查阅和修改。

// ✅ 推荐修正方式（两步操作）
import { UIContext } from '@kit.ArkUI'; // 1. 导入UIContext

@Entry
@Component
struct MyComponent {
  // 2. 提前获取UIContext实例（成员变量缓存，性能最优）
  private uiContext: UIContext = this.getUIContext();

  build() {
    Column() {
      Text("示例文本")
        // 3. 替换全局方法为UIContext调用
        .width(this.uiContext.px2vp(220))
        .height(this.uiContext.px2vp(40))
        .backgroundColor(0xF9CF93)
        .textAlign(TextAlign.Center)
        .fontColor(Color.White)
        .fontSize(this.uiContext.fp2px(12)) // fp单位转换同理
    }
    .margin(5)
  }
}

// ⚡️ 快速修正方式（适合存量代码快速修改）
Text("示例文本")
  .width(px2vp(220))
.width(this.getUIContext().px2vp(220))
  .height(40)

// ❌ 旧写法（弃用）
@Component
struct OldDemo {
  build() {
    Row() {
      Image('test.png')
        .width(px2vp(100))
        .height(px2vp(100))
      
      Text('标题')
        .fontSize(fp2px(18))
        .margin({ left: px2vp(16) })
    }
    .padding(px2vp(12))
  }
}

// ✅ 新写法（推荐）
import { UIContext } from '@kit.ArkUI';

@Component
struct NewDemo {
  private uiContext: UIContext = this.getUIContext();

  build() {
    Row() {
      Image('test.png')
        .width(this.uiContext.px2vp(100))
        .height(this.uiContext.px2vp(100))
      
      Text('标题')
        .fontSize(this.uiContext.fp2px(18))
        .margin({ left: this.uiContext.px2vp(16) })
    }
    .padding(this.uiContext.px2vp(12))
  }
}

// ❌ 旧写法
@Entry
@Component
struct ListDemo {
  build() {
    List() {
      ForEach([1, 2, 3, 4, 5], (item: number) => {
        ListItem() {
          Column() {
            Text(`列表项 ${item}`)
              .height(px2vp(50))
              .padding({ left: px2vp(20) })
          }
          .width('100%')
        }
      })
    }
    .width('100%')
  }
}

// ✅ 新写法
import { UIContext } from '@kit.ArkUI';

@Entry
@Component
struct ListDemo {
  private uiContext: UIContext = this.getUIContext();
  // 提前计算常量值，避免列表滚动时重复计算
  private itemHeight: number = this.uiContext.px2vp(50);
  private paddingLeft: number = this.uiContext.px2vp(20);

  build() {
    List() {
      ForEach([1, 2, 3, 4, 5], (item: number) => {
        ListItem() {
          Column() {
            Text(`列表项 ${item}`)
              .height(this.itemHeight)
              .padding({ left: this.paddingLeft })
          }
          .width('100%')
        }
      })
    }
    .width('100%')
  }
}

// ❌ 旧写法
@Component
struct ConditionDemo {
  @State isLarge: boolean = false;

  build() {
    Column() {
      if (this.isLarge) {
        Text('大尺寸文本')
          .fontSize(fp2px(24))
          .width(px2vp(300))
      } else {
        Text('小尺寸文本')
          .fontSize(fp2px(14))
          .width(px2vp(150))
      }
      
      Button('切换尺寸')
        .onClick(() => {
          this.isLarge = !this.isLarge;
        })
    }
  }
}

// ✅ 新写法
import { UIContext } from '@kit.ArkUI';

@Component
struct ConditionDemo {
  @State isLarge: boolean = false;
  private uiContext: UIContext = this.getUIContext();
  // 预计算所有需要的尺寸
  private largeFontSize: number = this.uiContext.fp2px(24);
  private largeWidth: number = this.uiContext.px2vp(300);
  private smallFontSize: number = this.uiContext.fp2px(14);
  private smallWidth: number = this.uiContext.px2vp(150);

  build() {
    Column() {
      if (this.isLarge) {
        Text('大尺寸文本')
          .fontSize(this.largeFontSize)
          .width(this.largeWidth)
      } else {
        Text('小尺寸文本')
          .fontSize(this.smallFontSize)
          .width(this.smallWidth)
      }
      
      Button('切换尺寸')
        .onClick(() => {
          this.isLarge = !this.isLarge;
        })
    }
  }
}

// ❌ 旧写法
@Component
struct DynamicDemo {
  @State scale: number = 1.0;

  build() {
    Column() {
      Text('动态尺寸文本')
        .fontSize(fp2px(16) * this.scale)
      
      Slider({ min: 0.5, max: 2.0, value: 1.0 })
        .width(px2vp(200))
        .onChange((value: number) => {
          this.scale = value;
        })
    }
  }
}

// ✅ 新写法
import { UIContext } from '@kit.ArkUI';

@Component
struct DynamicDemo {
  @State scale: number = 1.0;
  private uiContext: UIContext = this.getUIContext();
  // 基础尺寸只计算一次
  private baseFontSize: number = this.uiContext.fp2px(16);
  private sliderWidth: number = this.uiContext.px2vp(200);

  build() {
    Column() {
      Text('动态尺寸文本')
        .fontSize(this.baseFontSize * this.scale) // 动态计算时使用预计算的基础值
      
      Slider({ min: 0.5, max: 2.0, value: 1.0 })
        .width(this.sliderWidth)
        .onChange((value: number) => {
          this.scale = value;
        })
    }
  }
}

常见误区

❌ 不要在aboutToAppear()中调用getUIContext()进行布局计算，此时UI实例可能尚未准备好
❌ 不要在循环或build()中重复调用getUIContext()，会影响性能
❌ 不要缓存UIContext到全局变量，可能导致上下文失效
✅ 推荐在成员变量中初始化UIContext实例，组件内共享使用

// 查找：
px2vp\((.*?)\)
vp2px\((.*?)\)
fp2px\((.*?)\)

// 替换为：
this.getUIContext().px2vp($1)
this.getUIContext().vp2px($1)
this.getUIContext().fp2px($1)

IDE提示

DevEco Studio会对已弃用的全局方法显示黄色波浪线警告，将鼠标悬停在警告上会自动提示修复建议，可通过快速修复功能一键替换为UIContext方式。