docker數據卷（七1）
1881
2025-04-02
【Flutter】屏幕像素適配方案 ( flutter_screenutil 插件 )
文章目錄
一、推薦使用 flutter_screenutil 插件
二、flutter_screenutil 插件使用
1、導入 flutter_screenutil 插件依賴
2、 flutter_screenutil 初始化
3、 flutter_screenutil 使用 API
4、 設置字體
5、 設置寬高
三、代碼示例
四、博客資源
一、推薦使用 flutter_screenutil 插件
flutter_screenutil 插件相關資料 :
插件地址 : https://pub.dev/packages/flutter_screenutil
插件使用案例 : https://pub.dev/packages/flutter_screenutil/example
插件安裝文檔 : https://pub.dev/packages/flutter_screenutil/install
GitHub 地址 : https://github.com/OpenFlutter/flutter_screenutil
中文文檔 ( 強烈推薦看這個文檔 ) :
https://github.com/OpenFlutter/flutter_screenutil/blob/master/README_CN.md
二、flutter_screenutil 插件使用
1、導入 flutter_screenutil 插件依賴
在 pubspec.yaml 中添加依賴 ;
dependencies: flutter_screenutil: ^5.0.0+2
1
2
點擊右上角的 " Pub get " 按鈕 , 下載該依賴 ;
導入 Dart 包后 , 可以在文件中使用該插件包的函數 ;
import 'package:flutter_screenutil/flutter_screenutil.dart';
1
2、 flutter_screenutil 初始化
在 MyApp 中 , 使用 ScreenUtilInit 作為最頂層的組件 , 包裹 MaterialApp 組件 ;
設置其 designSize 參數 , 用于設置設計稿的寬度和高度 ;
代碼示例 :
import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { /// 在 MaterialApp 組件外層包裹一層 ScreenUtilInit 組件 return ScreenUtilInit( /// 設置設計稿寬高 designSize: Size(750, 1334), /// 設置原本要顯示的 MaterialApp builder: ()=>MaterialApp(), ); } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
3、 flutter_screenutil 使用 API
flutter_screenutil API 用法 :
在 750 x 1337 的設計稿中 , 獲取 540 對應的寬度
ScreenUtil().setWidth(540)
1
也可以使用
540.w
1
獲取相同的值 ;
API 參考 :
ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //根據屏幕寬度適配尺寸 ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根據屏幕高度適配尺寸(一般根據寬度適配即可) ScreenUtil().radius(200) (sdk>=2.6 : 200.r) //根據寬度或高度中的較小者進行調整 ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //適配字體 ScreenUtil.pixelRatio //設備的像素密度 ScreenUtil.screenWidth (sdk>=2.6 : 1.sw) //設備寬度 ScreenUtil.screenHeight (sdk>=2.6 : 1.sh) //設備高度 ScreenUtil.bottomBarHeight //底部安全區距離，適用于全面屏下面有按鍵的 ScreenUtil.statusBarHeight //狀態欄高度 劉海屏會更高 ScreenUtil.textScaleFactor //系統字體縮放比例 ScreenUtil().scaleWidth // 實際寬度設計稿寬度的比例 ScreenUtil().scaleHeight // 實際高度與設計稿高度度的比例 ScreenUtil().orientation //屏幕方向 0.2.sw //屏幕寬度的0.2倍 0.5.sh //屏幕高度的50%
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
4、 設置字體
Text("頂部內容", style: TextStyle(fontSize: 40.sp),)
1
5、 設置寬高
/// 寬高是寬度的 0.5 倍 , 顯示正方形 Container( width: 0.5.sw, height: 0.5.sw, color: Colors.green, ),
1
2
3
4
5
6
三、代碼示例
import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; /// 使用 MediaQuery 進行全面屏適配 void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { /// 在 MaterialApp 組件外層包裹一層 ScreenUtilInit 組件 return ScreenUtilInit( /// 設置設計稿寬高 designSize: Size(750, 1334), /// 設置原本要顯示的 MaterialApp builder: ()=>MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: HomePage(), ), ); } } class HomePage extends StatelessWidget{ @override Widget build(BuildContext context) { /// 獲取當前的 padding 信息 final EdgeInsets edgeInsets = MediaQuery.of(context).padding; return Container( decoration: BoxDecoration( color: Colors.white, ), padding: EdgeInsets.fromLTRB(0, edgeInsets.top, 0, edgeInsets.bottom), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text("頂部內容", style: TextStyle(fontSize: 40.sp),), /// 寬高是寬度的 0.5 倍 , 顯示正方形 Container( width: 0.5.sw, height: 0.5.sw, color: Colors.green, ), Text("底部內容", style: TextStyle(fontSize: 20.sp),), ], ), ); } } /* ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //根據屏幕寬度適配尺寸 ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根據屏幕高度適配尺寸(一般根據寬度適配即可) ScreenUtil().radius(200) (sdk>=2.6 : 200.r) //根據寬度或高度中的較小者進行調整 ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //適配字體 ScreenUtil.pixelRatio //設備的像素密度 ScreenUtil.screenWidth (sdk>=2.6 : 1.sw) //設備寬度 ScreenUtil.screenHeight (sdk>=2.6 : 1.sh) //設備高度 ScreenUtil.bottomBarHeight //底部安全區距離，適用于全面屏下面有按鍵的 ScreenUtil.statusBarHeight //狀態欄高度 劉海屏會更高 ScreenUtil.textScaleFactor //系統字體縮放比例 ScreenUtil().scaleWidth // 實際寬度設計稿寬度的比例 ScreenUtil().scaleHeight // 實際高度與設計稿高度度的比例 ScreenUtil().orientation //屏幕方向 0.2.sw //屏幕寬度的0.2倍 0.5.sh //屏幕高度的50% */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
運行效果 :
四、博客資源
GitHub 地址 : https://github.com/han1202012/flutter_screen_adaption
API Flutter
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
