Flutter屏幕尺寸获取插件screensizer的使用

ScreenSizer 是一个用于获取和操作设备屏幕尺寸及其属性的插件。通过该插件，您可以轻松获取屏幕宽度、高度、比例以及其他相关信息。

方法

ScreenSizer.of(BuildContext context)

此静态方法返回一个包含屏幕信息的 ScreenSizerData 实例。需要传递 Flutter 的上下文参数。

类 ScreenSizerData

ScreenSizerData 类表示与屏幕大小和属性相关的数据。

属性

• double width: 屏幕的宽度（减去偏移量）。
• double height: 屏幕的高度（减去偏移量）。
• double percentHeightScreen: 屏幕高度占总高度的百分比。
• double appBarHeight: 应用栏（AppBar）的高度。
• Orientation orientation: 当前屏幕的方向。
• double devicePixelRatio: 设备物理像素与逻辑像素的比例。
• double textScaleFactor: 当前屏幕的文字缩放因子。
• Brightness brightness: 当前屏幕的亮度。
• TargetPlatform platform: 应用运行的平台。
• bool invertColors: 是否启用颜色反转。
• bool accessibleNavigation: 是否启用了可访问导航。
• bool highContrast: 是否启用了高对比度模式。
• bool disableAnimations: 是否禁用了动画。
• double offsetHeight: 高度方向的偏移值。
• double offsetWidth: 宽度方向的偏移值。
• MediaQueryData mq: 与屏幕相关的 MediaQueryData 数据。

方法

• discountAppbarAndVerticalPadding(): 减去应用栏高度和垂直填充后的屏幕高度。
• getCol(double percentage): 计算并返回指定百分比的屏幕高度。
• getRow(double percentage): 计算并返回指定百分比的屏幕宽度。
• setHeight(double heightValue): 设置屏幕高度值。
• setWidth(double widthValue): 设置屏幕宽度值。
• setPercentHeightScreen(double percent): 设置屏幕高度的百分比。
• setHeightOffset(double offset): 设置高度方向的偏移值。
• setWidthOffset(double offset): 设置宽度方向的偏移值。
• paddingScreen(): 返回表示屏幕填充的 EdgeInsets 对象。
• padding([double paddingValue = 20]): 返回具有统一填充的 EdgeInsets 对象。
• setOrientation(OrientationScreen orientation): 设置屏幕的首选方向。
• resetOrientations(): 将屏幕的首选方向重置为默认值。

示例代码

以下是一个完整的示例，展示如何在 Flutter 应用中使用 screensizer 插件来动态调整屏幕元素的大小。

import 'package:flutter/material.dart';
import 'package:screensizer/screensizer.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ScreenSizerExample(),
    );
  }
}

class ScreenSizerExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 获取屏幕尺寸数据
    final screen = ScreenSizer.of(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('ScreenSizer 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 红色容器，占屏幕高度的 50%
            Container(
              color: Colors.red,
              height: screen.getCol(50), // 50% of screen height
              width: double.infinity,   // Full width
              child: Center(child: Text("50% Height")),
            ),
            SizedBox(height: 20), // 添加间距
            // 黄色容器，占屏幕高度的 30%
            Container(
              color: Colors.yellow,
              height: screen.getCol(30), // 30% of screen height
              width: double.infinity,    // Full width
              child: Center(child: Text("30% Height")),
            ),
          ],
        ),
      ),
    );
  }
}