美文网首页
设备适配

设备适配

作者: Jean_Lina | 来源:发表于2021-12-09 18:24 被阅读0次
  • 设备信息初始化:
DBJDeviceInfo.initialize();
  • 使用示例:
Container(
        width: 100.w,
        height: 120.w,
        color: Colors.red,
        alignment: Alignment.center,
        child: Text(
          'hello flutter',
          style: TextStyle(fontSize: 14.sp),
        ),
      )
import 'dart:math';
import 'dart:ui';

class DBJDeviceInfo {
  static const Size defaultSize = Size(375, 667);
  static late DBJDeviceInfo _instance;

  /// UI设计中手机尺寸
  late Size uiSize;

  /// 屏幕像素
  late double _devicePixelRatio;

  /// 屏幕宽度
  late double _screenWidth;

  /// 屏幕高度
  late double _screenHeight;

  /// 状态栏高度
  late double _statusBarHeight;

  /// 底部安全间距高度
  late double _bottomBarHeight;

  /// 文字缩放比例
  late double _textScaleFactor;

  DBJDeviceInfo._();
  factory DBJDeviceInfo() {
    return _instance;
  }

  /// 初始化
  static void initialize({Size designSize = defaultSize}) {
    _instance = DBJDeviceInfo._()..uiSize = designSize;

    /// 物理宽度
    double physicalWidth = window.physicalSize.width;
    double physicalHeight = window.physicalSize.height;

    /// 像素
    _instance._devicePixelRatio = window.devicePixelRatio;

    /// 屏幕宽高
    _instance._screenWidth = physicalWidth / window.devicePixelRatio;
    _instance._screenHeight = physicalHeight / window.devicePixelRatio;

    /// 状态栏、底部栏高度
    _instance._statusBarHeight = window.padding.top / window.devicePixelRatio;
    _instance._bottomBarHeight =
        window.padding.bottom / window.devicePixelRatio;

    _instance._textScaleFactor = window.textScaleFactor;

    /// 物理高度
    print('physicalWidth = $physicalWidth, physicalHeight = $physicalHeight');
    print('devicePixelRatio = ${_instance.devicePixelRatio}');
    print('screenWidth = ${_instance.screenWidth}');
    print('screenHeight = ${_instance.screenHeight}');
    print('statusBarHeight = ${_instance.statusBarHeight}');
    print('bottomBarHeight = ${_instance.bottomBarHeight}');
    print('window.padding.top = ${window.padding.top}');
    print('window.padding.bottom = ${window.padding.bottom}');
    print('textScaleFactor = ${_instance.textScaleFactor}');
  }

  double get devicePixelRatio => _devicePixelRatio;

  double get screenWidth => _screenWidth;

  double get screenHeight => _screenHeight;

  double get statusBarHeight => _statusBarHeight;

  double get bottomBarHeight => _bottomBarHeight;

  double get textScaleFactor => _textScaleFactor;

  /// 实际尺寸与UI设计稿的比例
  double get scaleWidth => _screenWidth / uiSize.width;

  /// 实际尺寸与UI设计稿的比例
  double get scaleHeight => _screenHeight / uiSize.height;

  /// 文本缩放
  double get scaleText => min(scaleWidth, scaleHeight);

  double setWidth(num width) => width * scaleWidth;

  double setHeight(num height) => height * scaleHeight;

  /// 字体缩放
  double setSp(num fontSize) => fontSize * scaleText;
}

import 'device_info.dart';

extension SizeExtension on num {
  double get w => DBJDeviceInfo().setWidth(this);

  double get h => DBJDeviceInfo().setHeight(this);

  double get sp => DBJDeviceInfo().setSp(this);
}

相关文章

  • 设备适配

    设备信息初始化: 使用示例:

  • Apple 尺寸规范

    Apple 设备尺寸 iPhoneX机型适配

  • Android实习生 —— 屏幕适配及布局优化

    目录 一、为什么要进行屏幕适配、对哪些设备进行适配? 在近几年的发展当中,安卓设备数量逐渐增长,由于安卓设备的开放...

  • Adaptive Layout

    设备适配手段 Trait(设备特性)iOS 8+ UITraitEnvironment protocol(UISc...

  • LayaAir屏幕适配

    LayaAir屏幕适配 官方教程链接:LayaAir实战开发11-屏幕适配 屏幕适配 随着移动端设备(手机、平板、...

  • 关于移动端适配的三种方案.

    移动端适配,主要是适配手机和一些平板设备. 为什么需要适配呢? 在客观条件上,这些设备的物理宽度都是不一致的. 比...

  • 获取iOS设备UI类型和设备名称

    在开发过程中有时需要获取设备具体型号然后进行不同的适配。 目前我们的在适配iOS设备主要分为UI方面的适配,比如i...

  • iOS 屏幕适配

    一、iOS屏幕适配发展历程 设备 ...

  • 网络配置

    一、网络配置概述 设备配置特性涉及设备配置、配置框架、适配框架、网元适配、离线配置5个组件,依赖网元管理、南向协...

  • Android项目多设备差异化编译

    Android应用越来越广泛,做大众APP需要适配各种手机,做定制型应用有时要适配多个设备,但这多个设备硬件有可能...

网友评论

      本文标题:设备适配

      本文链接:https://www.haomeiwen.com/subject/opgffrtx.html