Flutter屏幕适配插件responsify的使用

概述

responsify 包是一个基于 Dart 的 Flutter 包，用于根据设备类型创建响应式用户界面。此包基于 FilledStacks 的教程。

使用此库，您可以：

• 获取设备类型（移动设备、平板电脑、计算机或可穿戴设备）并根据不同设备类型创建不同的布局。
• 获取设备的方向。
• 获取设备的平台亮度（亮色模式或暗色模式）。
• 获取父级小部件的大小（宽 × 高）。
• 获取子级小部件的大小（宽 × 高）。
• 获取设备的操作系统作为字符串。

这个库如何工作

库包含一个名为 ResponsiveUiWidget 的单一小部件，该小部件在 build 方法中返回一个小部件。

• 库考虑了设备的像素密度。像素密度通过设备的像素比和基准像素密度 160 来确定。较旧的计算机具有较低的像素密度（如 96 或 120 ppi）。在这种情况下，当确定设备是否为计算机时不会考虑像素密度。

• ResponsiveUiWidget 有一个名为 targetOlderComputers 的必需参数。如果为 true，则此标志允许您针对具有低于 160 像素密度的较旧计算机模型。当为 true 时，只有此标志和计算机的平台操作系统（Windows、macOS、Linux）用于确定设备是否为计算机。如果为 false，则使用勾股定理（见下一点）和平台操作系统来确定设备类型。

• 使用勾股定理计算设备屏幕的对角线尺寸（以像素为单位）。然后使用设备的像素密度将此值转换为对角线屏幕尺寸（英寸）。设备屏幕尺寸（英寸） = 设备屏幕尺寸（像素） / 设备像素密度（PPI）。然后与设备的平台操作系统一起用于确定设备类型（移动设备、平板电脑、可穿戴设备、计算机）。

如果上述三点听起来很复杂，这里有一个代码块：

bool checkHandheldDevicePlatform = Platform.isAndroid || Platform.isIOS || Platform.isFuchsia;

bool checkComputerPlatform = Platform.isWindows || Platform.isMacOS || Platform.isLinux;

if (deviceSize! <= 3) {
  return deviceType = DeviceTypeInformation.WEARABLE;
} else if (deviceSize! > 3 && deviceSize! < 7.1 && checkHandheldDevicePlatform) {
  return deviceType = DeviceTypeInformation.MOBILE;
} else if (deviceSize! > 7.1 && deviceSize! < 13.5 && checkHandheldDevicePlatform) {
  return deviceType = DeviceTypeInformation.TABLET;
} else if ((deviceSize! > 13.5 && deviceSize! < 55 && checkComputerPlatform) ||
    (targetOlderComputers! && checkComputerPlatform)) {
  return deviceType = DeviceTypeInformation.COMPUTER;
} else {
  return deviceType = DeviceTypeInformation.UNKNOWN;
}

• 设备像素密度 = 设备像素比 * 160。设备像素比通过 MediaQuery 获取。

• 设备屏幕尺寸的阈值是通过搜索每种设备类型的最小和最大屏幕尺寸来确定的。因此，您无需指定设备尺寸的阈值。

使用方法

1. 将 responsify 添加到您的 pubspec.yaml 文件中，并运行 pub get。

2. 导入 responsify.dart 文件到您的项目中，例如：

   import 'package:responsify/responsify.dart';
   

3. 使用它。例如：

   class DeviceInformation extends StatelessWidget {
     DeviceInformation({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return Center(
         child: ResponsiveUiWidget(
           targetOlderComputers: true,
           builder: (context, deviceInformation) {
             @override
             String toString() {
               return "Device Type: ${deviceInformation.deviceTypeInformation}\n"
                   "Device OS: ${deviceInformation.deviceOS}\n"
                   "Device Orientation: ${deviceInformation.orientation}\n"
                   "Platform Brightness: ${deviceInformation.platformBrightness}\n"
                   "Parent Widget Size: ${deviceInformation.parentWidgetSize}\n"
                   "Local Widget Size (W x H): ${deviceInformation.localWidgetWidth} x ${deviceInformation.localWidgetHeight}";
             }
   
             return Text(
               toString(),
               style: TextStyle(fontSize: deviceInformation.deviceTypeInformation == DeviceTypeInformation.WEARABLE ? 8 : 16),
             );
           },
         ),
       );
     }
   }
   

4. 另一个示例，使用 MaterialPageRoute 和 PageRouteBuilder：

   class ResponsifyApp extends StatelessWidget {
     ResponsifyApp({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return Center(
         child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
           MaterialButton(
             onPressed: () {
               Navigator.push(
                 context,
                 MaterialPageRoute(
                   builder: (context) => ResponsiveUiWidget(
                       targetOlderComputers: false,
                       builder: (context, deviceInformation) {
                         if (deviceInformation.deviceTypeInformation == DeviceTypeInformation.MOBILE) {
                           return MobileVersion();
                         } else {
                           return Scaffold(
                             body: Center(
                               child: Text("This app is compatible only with a Mobile device"),
                             ),
                           );
                         }
                       }),
                 ),
               );
             },
             textColor: Colors.white,
             child: Text("Mobile"),
             color: Colors.black,
           ),
           MaterialButton(
             onPressed: () {
               Navigator.push(
                 context,
                 PageRouteBuilder(
                   pageBuilder: (_, __, ___) => ResponsiveUiWidget(
                     targetOlderComputers: false,
                     builder: (context, deviceInformation) {
                       if (deviceInformation.deviceTypeInformation == DeviceTypeInformation.TABLET) {
                         return TabletVersion();
                       } else {
                         return Scaffold(
                           body: Center(
                             child: Text("This app is compatible only with a Tablet device"),
                           ),
                         );
                       }
                     },
                   ),
                 ),
               );
             },
             textColor: Colors.white,
             child: Text("Tablet"),
             color: Colors.black,
           )
         ]),
       );
     }
   }
   
   class MobileVersion extends StatelessWidget {
     const MobileVersion({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(child: Text("This is a Mobile Device")),
       );
     }
   }
   
   class TabletVersion extends StatelessWidget {
     const TabletVersion({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(child: Text("This is a Tablet Device")),
       );
     }
   }