Flutter响应式布局插件sizer的使用

Sizer (适用于移动端、Web和桌面端的响应式UI解决方案)

Sizer帮助您轻松创建响应式UI。

它是一个Flutter包，可以让你的应用自动适应各种屏幕尺寸，让响应式设计变得简单直观。

目录

• 安装
• 如何使用
• 指南
• 注意事项
• 常见问题

安装 ⬇️

在pubspec.yaml中添加sizer依赖：

dependencies:
  sizer: ^3.0.3

如何使用 ⚙️

导入包

import 'package:sizer/sizer.dart';

包裹MaterialApp

Sizer(
  builder: (context, orientation, screenType) {
    return MaterialApp(
      home: HomePage(),
    );
  },
);

控件大小

Container(
  width: Adaptive.w(20), // 这将占据屏幕宽度的20%
  height: 30.5.h,       // 这将占据屏幕高度的30.5%
)

字体大小

Text(
  'Sizer',
  style: TextStyle(fontSize: 15.dp),
  // 也可以用.sp代替.dp
  // 想了解它们的区别，请查看#FAQ
)

方向

如果你想支持横屏和竖屏两种方向：

Device.orientation == Orientation.portrait
  ? Container(
      width: 100.w,
      height: 20.5.h,
    )
  : Container(
      width: 100.w,
      height: 12.5.h,
    )

屏幕类型

如果你希望相同的布局在平板电脑和手机上有不同的显示效果，可以使用Device.screenType方法：

Device.screenType == ScreenType.tablet
  ? Container(
      width: 100.w,
      height: 20.5.h,
    )
  : Container(
      width: 100.w,
      height: 12.5.h,
    )

注意： Device.ScreenType 不能 是Desktop，除非设置了maxTabletWidth

指南

Sizer配置

• maxMobileWidth: 手机设备的最大宽度（如果设备宽度大于此值，则被分类为平板） - 默认值：599
• maxTabletWidth: 平板设备的最大宽度（如果设备宽度大于此值，则被分类为桌面） - 可选：启用Desktop ScreenType

扩展方法

• .h或.sh: 计算基于设备高度的百分比（40.h -> 设备高度的40%）
• .w或.sw: 计算基于设备宽度的百分比（40.w -> 设备宽度的40%）
• .sp: 基于设备像素密度和宽高比计算的字体大小
• .dp: 基于设备像素密度计算的字体大小

注：只有当你想要高度和宽度取决于应用了SafeArea后的剩余可用高度和宽度时才使用.sh和.sw。默认情况下请使用.h和.w

其他属性

• Device.boxConstraints: 设备的BoxConstraints
• Device.orientation: 设备的方向（横屏或竖屏）
• Device.screenType: 设备的屏幕类型（手机或平板）
• Device.aspectRatio: 设备的宽高比
• Device.pixelRatio: 设备的像素密度比

单位转换

• .cm: 将数值转换为厘米
• .mm: 将数值转换为毫米
• .Q: 将数值转换为四分之一毫米
• .inches: 将数值转换为英寸
• .pc: 将数值转换为派卡（1/6 英寸）
• .pt: 将数值转换为点（1/72 英寸）
• .px: 将数值转换为像素

注意事项

你需要导入sizer包才能访问.h, .w, .dp, 和 .sp等扩展方法。

注意： 自动导入在VSCode和Android Studio中对Dart扩展方法不起作用。输入10.h不会触发自动导入建议。一个解决办法是先输入Device以触发自动导入建议。

import 'package:sizer/sizer.dart';

常见问题

.sp与.dp有什么区别？

.dp是基于Material Design的dp计算，而.sp是根据设备的像素密度和宽高比计算的。

为什么dp不是根据设备的屏幕密度计算的？

由于无法获取设备的物理宽度（英寸），我们无法计算屏幕密度。作为替代方案，dp是根据设备的pixel ratio计算的。

社区支持

如果你有任何建议或遇到问题，请随时提交issue

如果你愿意贡献代码，欢迎创建PR

示例代码

以下是一个完整的示例代码，展示了如何使用Sizer来构建一个简单的Flutter应用程序：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Sizer(
      builder: (context, orientation, deviceType) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Sizer Example',
          theme: ThemeData.light(),
          home: HomeScreen(),
        );
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sizer Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 80.w,
              height: 20.h,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'This is a responsive container',
                  style: TextStyle(fontSize: 16.sp, color: Colors.white),
                ),
              ),
            ),
            SizedBox(height: 10.h),
            Text(
              'Orientation: ${orientation == Orientation.portrait ? 'Portrait' : 'Landscape'}',
              style: TextStyle(fontSize: 14.sp),
            ),
            Text(
              'Screen Type: ${deviceType == ScreenType.mobile ? 'Mobile' : 'Tablet'}',
              style: TextStyle(fontSize: 14.sp),
            ),
          ],
        ),
      ),
    );
  }
}

这个示例展示了如何使用Sizer创建一个响应式的容器，并根据屏幕方向和类型动态调整内容。