文章目錄

• 一、推薦使用 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
• 插件作者博客 : https://blog.csdn.net/u011272795/article/details/82795477

二、flutter_screenutil 插件使用

---

1、導入 flutter_screenutil 插件依賴

在 pubspec.yaml 中添加依賴 ;

dependencies:flutter_screenutil: ^5.0.0+2

點擊右上角的 " Pub get " 按鈕 , 下載該依賴 ;

導入 Dart 包后 , 可以在文件中使用該插件包的函數 ;

import 'package:flutter_screenutil/flutter_screenutil.dart';

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 {@overrideWidget build(BuildContext context) {/// 在 MaterialApp 組件外層包裹一層 ScreenUtilInit 組件return ScreenUtilInit(/// 設置設計稿寬高designSize: Size(750, 1334),/// 設置原本要顯示的 MaterialAppbuilder: ()=>MaterialApp(),);} }

3、 flutter_screenutil 使用 API

flutter_screenutil API 用法 :

在 750 x 1337 的設計稿中 , 獲取 540 對應的寬度

ScreenUtil().setWidth(540)

也可以使用

540.w

獲取相同的值 ;

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%

4、 設置字體

Text("頂部內容", style: TextStyle(fontSize: 40.sp),)

5、 設置寬高

/// 寬高是寬度的 0.5 倍 , 顯示正方形 Container(width: 0.5.sw,height: 0.5.sw,color: Colors.green, ),

三、代碼示例

---

import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart';/// 使用 MediaQuery 進行全面屏適配 void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {/// 在 MaterialApp 組件外層包裹一層 ScreenUtilInit 組件return ScreenUtilInit(/// 設置設計稿寬高designSize: Size(750, 1334),/// 設置原本要顯示的 MaterialAppbuilder: ()=>MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: HomePage(),),);} }class HomePage extends StatelessWidget{@overrideWidget 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%*/

運行效果 :

四、博客資源

---

GitHub 地址 : https://github.com/han1202012/flutter_screen_adaption

總結

以上是生活随笔為你收集整理的【Flutter】屏幕像素适配方案 ( flutter_screenutil 插件 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。