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 添加

1. dependencies:
2.   flutter_screenutil: ^5.9.3

复制代码

四、简朴案例实现

1、这里利用 Android Studio 举行创建 Flutter 项目

2、创建一个 application 的 Flutter 项目

3、编写代码，举行简朴屏幕适配功能

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

五、关键代码

1. // 导入 Flutter 的基础组件库
2. import 'package:flutter/material.dart';
3. // 导入 flutter_screenutil 插件，用于屏幕适配
4. import 'package:flutter_screenutil/flutter_screenutil.dart';
6. // 主函数，程序的入口点
7. void main() {
8.   runApp(MyApp());
9. }
11. // 定义一个 StatelessWidget，作为应用的根组件
12. class MyApp extends StatelessWidget {
13.   @override
14.   Widget build(BuildContext context) {
15.     // 使用 ScreenUtilInit 包裹整个应用，初始化屏幕适配功能
16.     return ScreenUtilInit(
17.       // 设计稿的尺寸，根据设计稿的宽度和高度设置
18.       designSize: Size(375, 812), // 设计稿尺寸（例如 iPhone X 的尺寸）
19.       // 是否开启最小文本适配，确保文本在不同设备上保持可读性
20.       minTextAdapt: true,
21.       // builder 是一个函数，用于构建应用的根组件
22.       builder: (context, child) { // 注意这里的参数和返回值
23.         return MaterialApp(
24.           // 应用的标题，显示在任务栏或窗口标题中
25.           title: 'Flutter ScreenUtil Demo',
26.           // 定义应用的主题，设置主色调为蓝色
27.           theme: ThemeData(
28.             primarySwatch: Colors.blue,
29.           ),
30.           // 设置应用的默认颜色为黑色（可选）
31.           color: Colors.black,
32.           // 应用的首页，将 MyHomePage 作为 child 传入
33.           home: child,
34.         );
35.       },
36.       // 将主页组件 MyHomePage 作为 ScreenUtilInit 的子组件传入
37.       child: MyHomePage(), // 将主页作为 child 传入
38.     );
39.   }
40. }
42. // 定义主页组件
43. class MyHomePage extends StatelessWidget {
44.   @override
45.   Widget build(BuildContext context) {
46.     // 使用 Scaffold 构建页面结构
47.     return Scaffold(
48.       // 设置 Scaffold 的背景颜色为黑色
49.       backgroundColor: Colors.black,
50.       // 定义页面的顶部导航栏
51.       appBar: AppBar(
52.         // 设置 AppBar 的背景颜色为黑色
53.         backgroundColor: Colors.black,
54.         // 设置导航栏的标题
55.         title: Text(
56.           'Flutter ScreenUtil 示例',
57.           // 设置标题的文本颜色为白色
58.           style: TextStyle(color: Colors.white),
59.         ),
60.         // 将标题居中显示
61.         centerTitle: true,
62.       ),
63.       // 定义页面的主体内容
64.       body: Center(
65.         // 使用 Center 包裹子组件，确保子组件居中显示
66.         child: Container(
67.           // 设置容器的宽度，使用 ScreenUtil 的适配单位
68.           width: 300.w,
69.           // 设置容器的高度，使用 ScreenUtil 的适配单位
70.           height: 100.h,
71.           // 设置容器的背景颜色为蓝色
72.           color: Colors.blue,
73.           // 容器的子组件是一个 Text 文本
74.           child: Text(
75.             '适配后的容器',
76.             // 设置文本的字体大小，使用 ScreenUtil 的适配单位
77.             style: TextStyle(fontSize: 16.sp, color: Colors.white), // 字体颜色为白色
78.             // 设置文本居中对齐
79.             textAlign: TextAlign.center,
80.           ),
81.         ),
82.       ),
83.     );
84.   }
85. }

复制代码

  代码阐明：
  

• 导入库：代码开头导入了须要的库，包括 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，并设置设计稿的尺寸。
    示例：

1.     return ScreenUtilInit(
2.       designSize: Size(375, 812), // 设计稿尺寸
3.       minTextAdapt: true, // 文本自适应优化
4.       builder: (_, child) => MaterialApp(home: child),
5.       child: MyHomePage(),
6.     );

复制代码

• 选择合适的设计稿尺寸：
  

    设计稿尺寸应与 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 动态适配。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。