📌 应用场景

HarmonyOS 原生支持多设备协同，开发时经常需要根据设备类型（手机、平板、TV、手表等）动态切换 UI、逻辑或布局。

本篇封装 useDeviceType：

• ✅ 获取当前设备类型；
• ✅ 支持页面渲染判断；
• ✅ 可用于组件适配和逻辑切换。

🧩 Step 1：封装 useDeviceType Hook

// hooks/useDeviceType.ts
import deviceInfo from '@ohos.deviceInfo';
import { reactive } from '@ohos.arkui';

const deviceState = reactive({
  deviceType: 'unknown',
  isPhone: false,
  isTablet: false,
  isTv: false,
  isWatch: false
});

export function useDeviceType() {
  const type = deviceInfo.deviceType?.toLowerCase();

  deviceState.deviceType = type;
  deviceState.isPhone = type === 'phone';
  deviceState.isTablet = type === 'tablet';
  deviceState.isTv = type === 'tv';
  deviceState.isWatch = type === 'wearable';

  return {
    deviceState
  };
}

🧩 Step 2：页面中使用设备类型控制渲染

@Entry
@Component
struct DevicePage {
  private device = useDeviceType();

  build() {
    Column() {
      Text(`当前设备类型：${this.device.deviceState.deviceType}`)
        .fontSize(18)
        .padding(10)

      If(this.device.deviceState.isPhone, () => {
        Text("📱 手机模式").fontColor('#2196F3')
      })

      If(this.device.deviceState.isTablet, () => {
        Text("📲 平板模式").fontColor('#4CAF50')
      })

      If(this.device.deviceState.isTv, () => {
        Text("📺 电视模式").fontColor('#FF5722')
      })

      If(this.device.deviceState.isWatch, () => {
        Text("⌚ 手表模式").fontColor('#9C27B0')
      })
    }
    .padding(20)
  }
}

✅ 效果说明

• 页面加载时自动检测设备类型；
• 可灵活根据不同设备渲染差异内容；
• 支持多端场景下自适应布局策略。

⚠️ 易错点总结

🧠 拓展建议

• 搭配 useTheme 和 useMediaQuery 做全端自适应样式；
• 不同设备提供不同导航栏/菜单结构；
• 结合分布式特性，识别多设备协同场景。