Flutter屏幕适配插件sizer_pro的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter屏幕适配插件sizer_pro的使用

sizer_pro 是一个帮助开发者轻松创建响应式UI的Flutter插件。它能够自动适应不同设备的屏幕尺寸，使应用在各种设备上都能有良好的显示效果。

安装

首先，在 pubspec.yaml 文件中添加 sizer_pro 依赖：

dependencies:
  ...
  sizer_pro: ^2.1.2

然后运行 flutter pub get 来安装该插件。

参数说明

  • .h：根据设备返回计算的高度。
  • .w：根据设备返回计算的宽度。
  • .sp：根据设备返回计算的缩放比例。
  • .f：根据设备返回计算的字体大小。
  • SizerUtil.orientation：获取屏幕方向（portrait 或 landscape）。
  • SizerUtil.deviceType：获取设备类型（mobile 或 tablet）。

使用方法

导入包

在你的 Dart 文件中导入 sizer_pro 包：

import 'package:sizer_pro/sizer.dart';

包裹 MaterialApp

使用 Sizer 组件包裹 MaterialApp：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

示例组件

容器大小

设置容器的宽高为屏幕宽度和高度的百分比：

Container(
  width: 20.w,    // 占屏幕宽度的20%
  height: 30.h,   // 占屏幕高度的30%
  color: Colors.blue,
)

内边距

使用百分比来设置内边距：

Padding(
  padding: EdgeInsets.symmetric(vertical: 5.h, horizontal: 3.h),
  child: Container(color: Colors.green),
);

字体大小

根据设备调整字体大小：

Text(
  'Hello World',
  style: TextStyle(fontSize: 15.f),
);

图标大小

根据设备调整图标大小：

Icon(
  Icons.home,
  size: 12.f,
);

方形组件

如果需要创建方形组件，可以将宽高都设置为相同的比例：

Container(
  width: 30.h,
  height: 30.h,
  color: Colors.red,
);

屏幕方向

根据屏幕方向调整布局：

SizerUtil.orientation == Orientation.portrait
  ? Container(   // 竖屏布局
      width: 100.w,
      height: 20.5.h,
      color: Colors.yellow,
   )
  : Container(   // 横屏布局
      width: 100.w,
      height: 12.5.h,
      color: Colors.purple,
   )

设备类型

根据设备类型调整布局：

SizerUtil.deviceType == DeviceType.mobile
  ? Container(   // 手机布局
      width: 100.w,
      height: 20.5.h,
      color: Colors.orange,
   )
  : Container(   // 平板布局
      width: 100.w,
      height: 12.5.h,
      color: Colors.teal,
   )

注意事项

  • 需要导入 sizer_pro 包才能使用 .h, .w, .f 和 .sp。
  • 自动导入在 VSCode 和 Android Studio 中对 Dart 扩展方法不起作用。可以通过输入 Device 来触发自动导入建议。

通过以上步骤和示例代码，你可以轻松地使用 sizer_pro 插件实现Flutter应用的屏幕适配。


更多关于Flutter屏幕适配插件sizer_pro的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter屏幕适配插件sizer_pro的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用sizer_pro插件进行屏幕适配的代码示例。sizer_pro是一个强大的Flutter插件，它可以帮助开发者轻松地进行屏幕适配，使得UI在不同设备上都能保持良好的显示效果。

步骤 1: 添加依赖

首先，在你的pubspec.yaml文件中添加sizer_pro依赖：

dependencies:
  flutter:
    sdk: flutter
  sizer_pro: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

步骤 2: 导入包

在你的Dart文件中导入sizer_pro包：

import 'package:sizer_pro/sizer_pro.dart';

步骤 3: 使用SizerPro进行屏幕适配

sizer_pro通过Sizer widget和扩展函数来帮助你进行适配。以下是一个简单的示例：

主文件（main.dart）

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      builder: (context, child) {
        return Sizer(
          builder: (context, sizeInfo) {
            return child!;
          },
        );
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final sizeInfo = SizeInfo(); // 获取SizeInfo实例

    return Scaffold(
      appBar: AppBar(
        title: Text('Sizer Pro Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, Flutter!',
              style: TextStyle(fontSize: sizeInfo.sp(24)), // 使用sp进行字体大小适配
            ),
            SizedBox(height: sizeInfo.h * 5), // 使用h进行高度适配
            Container(
              width: sizeInfo.w * 80, // 使用w进行宽度适配
              height: sizeInfo.h * 40,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Sized Box',
                  style: TextStyle(color: Colors.white, fontSize: sizeInfo.sp(16)),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. Sizer Widget: 在MaterialApp的builder属性中使用Sizer widget。这允许你在整个应用中访问SizeInfo实例。

  2. SizeInfo: 通过SizeInfo实例，你可以使用sp（scale-independent pixels，与字体大小相关）和w/h（相对于屏幕宽度和高度的比例）来进行适配。

  3. 字体大小适配: 使用sizeInfo.sp(24)来设置字体大小，这样字体大小会根据屏幕大小自动调整。

  4. 宽度和高度适配: 使用sizeInfo.w * 80和sizeInfo.h * 40来设置宽度和高度，这样元素的大小会根据屏幕大小自动调整。

注意事项

  • 确保在整个应用中正确使用Sizer widget，以便能够访问SizeInfo实例。
  • 根据具体需求调整sp、w和h的值，以达到最佳的UI效果。

通过这种方式，你可以轻松地在Flutter应用中进行屏幕适配，确保UI在不同设备上都能保持一致的显示效果。

回到顶部