Flutter学习之旅之flutter使用flutter_screenutil简单进行屏幕适配

Flutter 学习之旅 之 flutter 使用 flutter_screenutil 简单进行屏幕适配

目录

Flutter 学习之旅 之 flutter 使用 flutter_screenutil 简单进行屏幕适配

一、简单介绍

二、简单介绍 flutter_screenutil

三、安装 carousel_slider

四、简单案例实现

五、关键代码

六、补充说明

---

一、简单介绍

Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者使用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。

Flutter 使用 Dart 编程语言，它可以将代码编译为 ARM 或 Intel 机器代码以及 JavaScript，从而实现快速的性能。Flutter 提供了一个丰富的预置小部件库，开发者可以根据自己的需求灵活地控制每个像素，从而创建自定义的、适应性强的设计，这些设计在任何屏幕上都能呈现出色的外观和感觉。

二、简单介绍 flutter_screenutil

网址：flutter_screenutil | Flutter package

flutter_screenutil 是一个用于 Flutter 应用的屏幕适配插件。它通过设置设计稿的尺寸，自动计算屏幕缩放比例，从而实现宽度、高度和字体大小的自适应调整。使用 .w、.h 和 .sp 等单位，开发者可以轻松实现跨设备的布局适配，确保应用在不同屏幕尺寸和分辨率的设备上保持一致的显示效果。

中文文档地址：flutter_screenutil/README_CN.md at master · OpenFlutter/flutter_screenutil · GitHub

属性类型默认值描述designSizeSizeSize(360, 690)设计稿中设备的尺寸(单位随意,建议dp,但在使用过程中必须保持一致)deviceSizeSizenull物理设备的大小builderWidget Function()Container()一般返回一个MaterialApp类型的Function()orientationOrientationportrait屏幕方向splitScreenModeboolfalse支持分屏尺寸minTextAdaptboolfalse是否根据宽度/高度中的最小值适配文字contextBuildContextnull传入context会更灵敏的根据屏幕变化而改变childWidgetnullbuilder的一部分，其依赖项属性不使用该库rebuildFactorFunctiondefault返回屏幕指标更改时是否重建。

 注意：builder和child中必须填写至少一项

三、安装 carousel_slider

1、直接运行命令

使用 Flutter：flutter pub add flutter_screenutil

flutter_screenutil/README_CN.md at master · OpenFlutter/flutter_screenutil · GitHub

2、或者在 pubspec.yaml 添加

dependencies: flutter_screenutil: ^5.9.3

四、简单案例实现

1、这里使用 Android Studio 进行创建 Flutter 项目

2、创建一个 application 的 Flutter 项目

3、编写代码，进行简单屏幕适配功能

4、连接设备，运行项目，简单效果如下

五、关键代码 // 导入 Flutter 的基础组件库 import 'package:flutter/material.dart'; // 导入 flutter_screenutil 插件，用于屏幕适配 import 'package:flutter_screenutil/flutter_screenutil.dart'; // 主函数，程序的入口点 void main() { runApp(MyApp()); } // 定义一个 StatelessWidget，作为应用的根组件 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // 使用 ScreenUtilInit 包裹整个应用，初始化屏幕适配功能 return ScreenUtilInit( // 设计稿的尺寸，根据设计稿的宽度和高度设置 designSize: Size(375, 812), // 设计稿尺寸（例如 iPhone X 的尺寸） // 是否开启最小文本适配，确保文本在不同设备上保持可读性 minTextAdapt: true, // builder 是一个函数，用于构建应用的根组件 builder: (context, child) { // 注意这里的参数和返回值 return MaterialApp( // 应用的标题，显示在任务栏或窗口标题中 title: 'Flutter ScreenUtil Demo', // 定义应用的主题，设置主色调为蓝色 theme: ThemeData( primarySwatch: Colors.blue, ), // 设置应用的默认颜色为黑色（可选） color: Colors.black, // 应用的首页，将 MyHomePage 作为 child 传入 home: child, ); }, // 将主页组件 MyHomePage 作为 ScreenUtilInit 的子组件传入 child: MyHomePage(), // 将主页作为 child 传入 ); } } // 定义主页组件 class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { // 使用 Scaffold 构建页面结构 return Scaffold( // 设置 Scaffold 的背景颜色为黑色 backgroundColor: Colors.black, // 定义页面的顶部导航栏 appBar: AppBar( // 设置 AppBar 的背景颜色为黑色 backgroundColor: Colors.black, // 设置导航栏的标题 title: Text( 'Flutter ScreenUtil 示例', // 设置标题的文本颜色为白色 style: TextStyle(color: Colors.white), ), // 将标题居中显示 centerTitle: true, ), // 定义页面的主体内容 body: Center( // 使用 Center 包裹子组件，确保子组件居中显示 child: Container( // 设置容器的宽度，使用 ScreenUtil 的适配单位 width: 300.w, // 设置容器的高度，使用 ScreenUtil 的适配单位 height: 100.h, // 设置容器的背景颜色为蓝色 color: Colors.blue, // 容器的子组件是一个 Text 文本 child: Text( '适配后的容器', // 设置文本的字体大小，使用 ScreenUtil 的适配单位 style: TextStyle(fontSize: 16.sp, color: Colors.white), // 字体颜色为白色 // 设置文本居中对齐 textAlign: TextAlign.center, ), ), ), ); } }

代码说明：

导入库：代码开头导入了必要的库，包括 Flutter 的基础组件库和 flutter_screenutil 插件。

ScreenUtilInit：这是 flutter_screenutil 的入口组件，用于初始化屏幕适配功能。designSize 设置了设计稿的尺寸，minTextAdapt 用于开启最小文本适配。

MaterialApp：这是 Flutter 的一个基础组件，用于构建 Material Design 风格的应用。theme 设置了应用的主题，home 设置了应用的首页。

Scaffold：这是 Flutter 中用于构建页面结构的组件，包含导航栏（AppBar）和页面主体（body）。

AppBar 和 Container：分别用于设置导航栏和页面主体的样式。TextStyle 用于设置文本的样式，包括字体大小和颜色。

六、补充说明

使用 flutter_screenutil 的注意事项

    正确初始化：         在使用 flutter_screenutil 之前，必须在应用的入口处（如 main.dart）初始化 ScreenUtilInit，并设置设计稿的尺寸。     示例：

return ScreenUtilInit( designSize: Size(375, 812), // 设计稿尺寸 minTextAdapt: true, // 文本自适应优化 builder: (_, child) => MaterialApp(home: child), child: MyHomePage(), ); 选择合适的设计稿尺寸：

    设计稿尺寸应与 UI 设计师提供的原始尺寸一致，通常以像素为单位。例如，移动端可选择 375×812（iPhone 13），平板可选择 768×1024。

适配单位的使用：

    .w 和 .h 用于宽度和高度的适配。     .sp 用于字体大小的适配，会考虑系统字体缩放设置。      .ssp 和 .nsp 分别用于强制跟随系统字体缩放和禁用系统字体缩放。

适配圆形元素：

    对于圆形或正方形元素，可以使用 .r 单位，它会根据宽高中的较小值进行适配。

安全区域处理：

    使用 ScreenUtil().bottomBarHeight 和 ScreenUtil().statusBarHeight 来适配刘海屏和全面屏。

百分比布局：

    可以使用 .sw 和 .sh 来设置屏幕宽度和高度的百分比，例如 0.5.sw 表示屏幕宽度的 50%。

横竖屏适配：

    可以通过 ScreenUtilInit 的 orientation 参数强制设置横竖屏适配。

避免过度适配：

    对于简单布局，建议使用 Flex 或 MediaQuery，而不是过度依赖 flutter_screenutil。

测试不同设备：

    即使使用了 flutter_screenutil，仍需在不同屏幕尺寸和分辨率的设备上测试应用，确保布局的正确性和美观性。

性能优化：

    全局只初始化一次 ScreenUtil，避免重复计算。

字体缩放策略：

    如果需要禁用字体缩放，可以设置 allowFontScaling: false。

动态适配屏幕方向：

    在屏幕方向变化时，可能需要重新初始化 ScreenUtil。

使用建议

全局初始化：推荐在 MaterialApp 外层包裹 ScreenUtilInit，并设置 minTextAdapt: true 以优化文本适配。

测试与验证：在编写测试时，确保使用 tester.pumpAndSettle() 等待布局稳定。

灵活使用：对于复杂布局或定制化设计，flutter_screenutil 可以确保元素大小更精确地反映设计意图。

---

常见问题及解决方法

图片模糊：使用 .r 单位保证宽高比。

布局溢出：结合 SingleChildScrollView 或其他滚动组件。

字体过大：设置 textScaleFactor: 1.0。

横竖屏切换异常：使用 OrientationBuilder 动态适配。