diff --git a/CHANGELOG.md b/CHANGELOG.md index 74a4c992ec3a78c9bfae54c57d95f09b06e936a0..ad91cc951c4f0f080fa0d38b18c55abb84675996 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,10 +2,14 @@ * @Author: zhuoyuan93@gmail.com * @Date: 2018-10-16 19:43:03 * @LastEditors: zhuoyuan93@gmail.com - * @LastEditTime: 2020年1月14日 12:11:02 + * @LastEditTime: 2020年6月20日 11:20:02 * @Description: Update log --> +#2.0.0 +- Use `MediaQueryData.fromWindow(window)` instead of `MediaQuery.of(context)`, no context parameter required +- API changes, please note + #1.1.0 - support ExtensionMethod Dart-SDK-2.6.0 - you can use 'width: 50.w' instead of 'width: ScreenUtil().setWidth(50)' diff --git a/README.md b/README.md index 199f3b94241af6fab5ca0e1459a22a90f775b37a..71870e9761d1d8426a03fca40525b5bfedc7ae3a 100644 --- a/README.md +++ b/README.md @@ -18,12 +18,13 @@ github: https://github.com/OpenFlutter/flutter_screenutil ### Add dependency: Please check the latest version before installation. +If there is any problem with the new version, please use the previous version ``` dependencies: flutter: sdk: flutter # add flutter_screenutil - flutter_screenutil: ^1.0.2 + flutter_screenutil: ^2.0.0 ``` ### Add the following imports to your Dart code: @@ -48,13 +49,16 @@ Be sure to set the page in the MaterialApp's home(ie the entry file, just set it //fill in the screen size of the device in the design //default value : width : 1080px , height:1920px , allowFontScaling:false -ScreenUtil.init(context); +ScreenUtil.init(context); //flutter_screenuitl < 1.2 +ScreenUtil.init(); //flutter_screenuitl >= 1.2 //If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334) -ScreenUtil.init(context, width: 750, height: 1334); +ScreenUtil.init(context, width: 750, height: 1334); //flutter_screenuitl < 1.2 +ScreenUtil.init(width: 750, height: 1334); //flutter_screenuitl >= 1.2 //If you want to set the font size is scaled according to the system's "font size" assist option -ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true); +ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true); //flutter_screenuitl < 1.2 +ScreenUtil.init(width: 750, height: 1334, allowFontScaling: true); //flutter_screenuitl >= 1.2 ``` @@ -189,7 +193,7 @@ class _MyHomePageState extends State { @override Widget build(BuildContext context) { //Set the fit size (fill in the screen size of the device in the design) If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334) - ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false); + ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false); return ExampleWidget(title: 'FlutterScreenUtil Demo'); } @@ -244,10 +248,10 @@ class _ExampleWidgetState extends State { ), ], ), - Text('Device width:${ScreenUtil.screenWidth}px'), - Text('Device height:${ScreenUtil.screenHeight}px'), - Text('Device width:${ScreenUtil.screenWidthDp}dp'), - Text('Device height:${ScreenUtil.screenHeightDp}dp'), + Text('Device width:${ScreenUtil.screenWidth}dp'), + Text('Device height:${ScreenUtil.screenHeight}dp'), + Text('Device width:${ScreenUtil.screenWidthPx}px'), + Text('Device height:${ScreenUtil.screenHeightPx}px'), Text('Device pixel density:${ScreenUtil.pixelRatio}'), Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}dp'), Text('Status bar height:${ScreenUtil.statusBarHeight}dp'), @@ -286,8 +290,7 @@ class _ExampleWidgetState extends State { floatingActionButton: FloatingActionButton( child: Icon(Icons.title), onPressed: () { - ScreenUtil.init(context, - width: 1500, height: 1334, allowFontScaling: false); + ScreenUtil.init(width: 1500, height: 1334, allowFontScaling: false); setState(() {}); }, ), @@ -302,7 +305,7 @@ class _ExampleWidgetState extends State { print( 'Bottom safe zone distance dp:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance,suitable for buttons with full screen print( - 'Status bar height px:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px + 'Status bar height dp:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit dp print( 'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}'); print( diff --git a/README_CN.md b/README_CN.md index 5f672367da36bd665ddf228d3a0661da87a699f7..b05cc895ab7f7037d259c5bb7decfef8907926cf 100644 --- a/README_CN.md +++ b/README_CN.md @@ -23,12 +23,13 @@ csdn博客工具介绍:https://blog.csdn.net/u011272795/article/details/82795477 ### 安装依赖: 安装之前请查看最新版本 +新版本如有问题请使用上一版 ``` dependencies: flutter: sdk: flutter # 添加依赖 - flutter_screenutil: ^1.0.2 + flutter_screenutil: ^2.0.0 ``` ### 在每个使用的地方导入包: @@ -52,13 +53,16 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; //填入设计稿中设备的屏幕尺寸 //默认 width : 1080px , height:1920px , allowFontScaling:false -ScreenUtil.init(context); +ScreenUtil.init(context); //flutter_screenuitl < 1.2 +ScreenUtil.init(); //flutter_screenuitl >= 1.2 //假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) -ScreenUtil.init(context, width: 750, height: 1334); +ScreenUtil.init(context, width: 750, height: 1334); //flutter_screenuitl < 1.2 +ScreenUtil.init(width: 750, height: 1334); //flutter_screenuitl >= 1.2 //设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false -ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true); +ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true); //flutter_screenuitl < 1.2 +ScreenUtil.init(width: 750, height: 1334, allowFontScaling: true); //flutter_screenuitl >= 1.2 ``` @@ -198,9 +202,9 @@ class _MyHomePageState extends State { @override Widget build(BuildContext context) { //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) - ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false); - ScreenUtil.init(context); - ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false); + ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false); + ScreenUtil.init(); + ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false); return ExampleWidget(title: 'FlutterScreenUtil示例'); } @@ -255,10 +259,10 @@ class _ExampleWidgetState extends State { ), ], ), - Text('设备宽度:${ScreenUtil.screenWidth}px'), - Text('设备高度:${ScreenUtil.screenHeight}px'), - Text('设备宽度:${ScreenUtil.screenWidthDp}dp'), - Text('设备高度:${ScreenUtil.screenHeightDp}dp'), + Text('设备宽度:${ScreenUtil.screenWidth}dp'), + Text('设备高度:${ScreenUtil.screenHeight}dp'), + Text('设备宽度:${ScreenUtil.screenWidthPx}px'), + Text('设备高度:${ScreenUtil.screenHeightPx}px'), Text('设备的像素密度:${ScreenUtil.pixelRatio}'), Text('底部安全区距离:${ScreenUtil.bottomBarHeight}dp'), Text('状态栏高度:${ScreenUtil.statusBarHeight}dp'), @@ -295,8 +299,7 @@ class _ExampleWidgetState extends State { floatingActionButton: FloatingActionButton( child: Icon(Icons.title), onPressed: () { - ScreenUtil.init(context, - width: 1500, height: 1334, allowFontScaling: false); + ScreenUtil.init(width: 1500, height: 1334, allowFontScaling: false); setState(() {}); }, ), @@ -310,11 +313,10 @@ class _ExampleWidgetState extends State { print( '底部安全区距离:${ScreenUtil.bottomBarHeight}dp'); //Bottom safe zone distance,suitable for buttons with full screen print( - '状态栏高度:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px + '状态栏高度:${ScreenUtil.statusBarHeight}dp'); //状态栏高度 , 刘海屏会更高,单位dp print('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}'); print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}'); - print( '宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); print('高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); diff --git a/README_PT.md b/README_PT.md index d7aef1d94acaa2118b366bdaa5ba92e7f2fc5a1f..8e3d0f74876b3f6ff56d515b38077102e7a4586b 100644 --- a/README_PT.md +++ b/README_PT.md @@ -18,12 +18,13 @@ github: https://github.com/OpenFlutter/flutter_screenutil ### Adicionando a dependência: Por favor, verifique a última versão antes da instalação. +Se houver algum problema com a nova versão, use a versão anterior ``` dependencies: flutter: sdk: flutter # add flutter_screenutil - flutter_screenutil: ^1.0.2 + flutter_screenutil: ^2.0.0 ``` ### Adicione o seguinte import em seu código Dart: @@ -48,13 +49,16 @@ Certifique-se de definir as dimensões na paginal inicial do MaterialApp (ou sej //Preencha o tamanho da tela do dispositivo no protótipo de design //Valor padrão: width : 1080px , height:1920px , allowFontScaling:false -ScreenUtil.init(context); +ScreenUtil.init(context); //flutter_screenuitl < 1.2 +ScreenUtil.init(); //flutter_screenuitl >= 1.2 //Se o design é baseado no iPhone6 ​​(iPhone6 ​​750*1334) -ScreenUtil.init(context, width: 750, height: 1334); +ScreenUtil.init(context, width: 750, height: 1334); //flutter_screenuitl < 1.2 +ScreenUtil.init(width: 750, height: 1334); //flutter_screenuitl >= 1.2 //Se você quer definir que o tamanho da fonte seja ajustado de acordo com a opção "tamanho da fonte" na acessibilidade do sistema -ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true); +ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true); //flutter_screenuitl < 1.2 +ScreenUtil.init(width: 750, height: 1334, allowFontScaling: true); //flutter_screenuitl >= 1.2 ``` @@ -182,7 +186,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; @override Widget build(BuildContext context) { ///Define o tamanho de ajuste (preenche o tamanho da tela do dispositivo no design). Se o design é baseado no tamanho do iPhone6 (iPhone6 ​​750*1334) - ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false); + ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false); print('Largura do dispositivo:${ScreenUtil.screenWidth}'); //Largura do dispositivo print('Altura do dispositivo:${ScreenUtil.screenHeight}'); //Altura do dispositivo @@ -235,11 +239,11 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; ), ], ), - Text('Largura do dispositivo:${ScreenUtil.screenWidth}px'), - Text('Altura do dispositivo:${ScreenUtil.screenHeight}px'), + Text('Largura do dispositivo:${ScreenUtil.screenWidth}dp'), + Text('Altura do dispositivo:${ScreenUtil.screenHeight}dp'), Text('Densidade de pixels do dispositivo:${ScreenUtil.pixelRatio}'), - Text('Distância segura do rodapé:${ScreenUtil.bottomBarHeight}px'), - Text('Altura da status bar:${ScreenUtil.statusBarHeight}px'), + Text('Distância segura do rodapé:${ScreenUtil.bottomBarHeight}dp'), + Text('Altura da status bar:${ScreenUtil.statusBarHeight}dp'), Text( 'Razão entre a largura atual e a largura do protótipo de design em pixels:${ScreenUtil().scaleWidth}', textAlign: TextAlign.center, diff --git a/example/android/build.gradle b/example/android/build.gradle index d4225c7905bc18f2186f63445c2ef1dd437b3bd5..a3a5d4b2455944ce6079c407211d8376152598ba 100644 --- a/example/android/build.gradle +++ b/example/android/build.gradle @@ -2,6 +2,7 @@ buildscript { repositories { google() jcenter() + maven { url "http://download.flutter.io" } } dependencies { @@ -13,6 +14,7 @@ allprojects { repositories { google() jcenter() + maven { url "http://download.flutter.io" } } } diff --git a/example/ios/Flutter/flutter_export_environment.sh b/example/ios/Flutter/flutter_export_environment.sh index 2f279382923b58baf364f865958d35704c7b7caf..d1dce9b2023f93567074399c56924e206cfddfcc 100644 --- a/example/ios/Flutter/flutter_export_environment.sh +++ b/example/ios/Flutter/flutter_export_environment.sh @@ -1,10 +1,11 @@ #!/bin/sh # This is a generated file; do not edit or check into version control. -export "FLUTTER_ROOT=D:\flutter" -export "FLUTTER_APPLICATION_PATH=D:\Project\flutter_ScreenUtil\example" +export "FLUTTER_ROOT=D:\Develop\flutter" +export "FLUTTER_APPLICATION_PATH=D:\Develop\Project\flutter_screenutil\example" export "FLUTTER_TARGET=lib\main.dart" export "FLUTTER_BUILD_DIR=build" export "SYMROOT=${SOURCE_ROOT}/../build\ios" -export "FLUTTER_FRAMEWORK_DIR=D:\flutter\bin\cache\artifacts\engine\ios" +export "OTHER_LDFLAGS=$(inherited) -framework Flutter" +export "FLUTTER_FRAMEWORK_DIR=D:\Develop\flutter\bin\cache\artifacts\engine\ios" export "FLUTTER_BUILD_NAME=1.0.0" export "FLUTTER_BUILD_NUMBER=1" diff --git a/example/lib/main.dart b/example/lib/main.dart index 136c785781ddd4333beffff8484f7060c570ee56..d63e08fc05e34924936a454144160d3362109ba0 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -26,7 +26,7 @@ class _MyHomePageState extends State { @override Widget build(BuildContext context) { //Set the fit size (fill in the screen size of the device in the design) If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334) - ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false); + ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false); return ExampleWidget(title: 'FlutterScreenUtil Demo'); } @@ -81,10 +81,10 @@ class _ExampleWidgetState extends State { ), ], ), - Text('Device width:${ScreenUtil.screenWidth}px'), - Text('Device height:${ScreenUtil.screenHeight}px'), - Text('Device width:${ScreenUtil.screenWidthDp}dp'), - Text('Device height:${ScreenUtil.screenHeightDp}dp'), + Text('Device width:${ScreenUtil.screenWidthPx}px'), + Text('Device height:${ScreenUtil.screenHeightPx}px'), + Text('Device width:${ScreenUtil.screenWidth}dp'), + Text('Device height:${ScreenUtil.screenHeight}dp'), Text('Device pixel density:${ScreenUtil.pixelRatio}'), Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}dp'), Text('Status bar height:${ScreenUtil.statusBarHeight}dp'), @@ -123,8 +123,7 @@ class _ExampleWidgetState extends State { floatingActionButton: FloatingActionButton( child: Icon(Icons.title), onPressed: () { - ScreenUtil.init(context, - width: 1500, height: 1334, allowFontScaling: false); + ScreenUtil.init(width: 1500, height: 1334, allowFontScaling: false); setState(() {}); }, ), @@ -132,8 +131,8 @@ class _ExampleWidgetState extends State { } void printScreenInformation() { - print('Device width px:${ScreenUtil.screenWidth}'); //Device width - print('Device height px:${ScreenUtil.screenHeight}'); //Device height + print('Device width dp:${ScreenUtil.screenWidth}'); //Device width + print('Device height dp:${ScreenUtil.screenHeight}'); //Device height print( 'Device pixel density:${ScreenUtil.pixelRatio}'); //Device pixel density print( @@ -148,5 +147,6 @@ class _ExampleWidgetState extends State { 'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); print( 'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); + print('System font scaling:${ScreenUtil.textScaleFactor}'); } } diff --git a/example/lib/main_zh.dart b/example/lib/main_zh.dart index 23796b222ebf3d4223b708cd885f2e089bf5feab..27212a077a3003e26be2acb394e39e27fbc82ea9 100644 --- a/example/lib/main_zh.dart +++ b/example/lib/main_zh.dart @@ -31,7 +31,7 @@ class _MyHomePageState extends State { Widget build(BuildContext context) { //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) - ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false); + ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false); return ExampleWidget(title: 'FlutterScreenUtil示例'); } @@ -86,10 +86,10 @@ class _ExampleWidgetState extends State { ), ], ), - Text('设备宽度:${ScreenUtil.screenWidth}px'), - Text('设备高度:${ScreenUtil.screenHeight}px'), - Text('设备宽度:${ScreenUtil.screenWidthDp}dp'), - Text('设备高度:${ScreenUtil.screenHeightDp}dp'), + Text('设备宽度:${ScreenUtil.screenWidthPx}px'), + Text('设备高度:${ScreenUtil.screenHeightPx}px'), + Text('设备宽度:${ScreenUtil.screenWidth}dp'), + Text('设备高度:${ScreenUtil.screenHeight}dp'), Text('设备的像素密度:${ScreenUtil.pixelRatio}'), Text('底部安全区距离:${ScreenUtil.bottomBarHeight}dp'), Text('状态栏高度:${ScreenUtil.statusBarHeight}dp'), @@ -126,8 +126,7 @@ class _ExampleWidgetState extends State { floatingActionButton: FloatingActionButton( child: Icon(Icons.title), onPressed: () { - ScreenUtil.init(context, - width: 1500, height: 1334, allowFontScaling: false); + ScreenUtil.init(width: 1500, height: 1334, allowFontScaling: false); setState(() {}); }, ), diff --git a/lib/screenutil.dart b/lib/screenutil.dart index fbf4ec9fbd239937a3d9f1ba2004e5272389fad5..3ac8bdec9e006a006143dd97b85635f92abdd43f 100644 --- a/lib/screenutil.dart +++ b/lib/screenutil.dart @@ -3,7 +3,7 @@ * email: zhuoyuan93@gmail.com */ -import 'package:flutter/material.dart'; +import 'dart:ui'; class ScreenUtil { static ScreenUtil _instance; @@ -19,7 +19,6 @@ class ScreenUtil { /// allowFontScaling Specifies whether fonts should scale to respect Text Size accessibility settings. The default is false. bool allowFontScaling; - static MediaQueryData _mediaQueryData; static double _screenWidth; static double _screenHeight; static double _pixelRatio; @@ -33,7 +32,7 @@ class ScreenUtil { return _instance; } - static void init(BuildContext context, + static void init( {num width = defaultWidth, num height = defaultHeight, bool allowFontScaling = false}) { @@ -43,19 +42,14 @@ class ScreenUtil { _instance.uiWidthPx = width; _instance.uiHeightPx = height; _instance.allowFontScaling = allowFontScaling; - - MediaQueryData mediaQuery = MediaQuery.of(context); - _mediaQueryData = mediaQuery; - _pixelRatio = mediaQuery.devicePixelRatio; - _screenWidth = mediaQuery.size.width; - _screenHeight = mediaQuery.size.height; - _statusBarHeight = mediaQuery.padding.top; - _bottomBarHeight = _mediaQueryData.padding.bottom; - _textScaleFactor = mediaQuery.textScaleFactor; + _pixelRatio = window.devicePixelRatio; + _screenWidth = window.physicalSize.width; + _screenHeight = window.physicalSize.height; + _statusBarHeight = window.padding.top; + _bottomBarHeight = window.padding.bottom; + _textScaleFactor = window.textScaleFactor; } - static MediaQueryData get mediaQueryData => _mediaQueryData; - /// 每个逻辑像素的字体像素数,字体的缩放比例 /// The number of font pixels for each logical pixel. static double get textScaleFactor => _textScaleFactor; @@ -66,23 +60,27 @@ class ScreenUtil { /// 当前设备宽度 dp /// The horizontal extent of this size. - static double get screenWidthDp => _screenWidth; + static double get screenWidth => _screenWidth / _pixelRatio; ///当前设备高度 dp ///The vertical extent of this size. dp - static double get screenHeightDp => _screenHeight; + static double get screenHeight => _screenHeight / _pixelRatio; /// 当前设备宽度 px /// The vertical extent of this size. px - static double get screenWidth => _screenWidth * _pixelRatio; + static double get screenWidthPx => _screenWidth; /// 当前设备高度 px /// The vertical extent of this size. px - static double get screenHeight => _screenHeight * _pixelRatio; + static double get screenHeightPx => _screenHeight; + + /// 状态栏高度 dp 刘海屏会更高 + /// The offset from the top + static double get statusBarHeight => _statusBarHeight / _pixelRatio; /// 状态栏高度 dp 刘海屏会更高 /// The offset from the top - static double get statusBarHeight => _statusBarHeight; + static double get statusBarHeightPx => _statusBarHeight; /// 底部安全区距离 dp /// The offset from the bottom. @@ -90,9 +88,9 @@ class ScreenUtil { /// 实际的dp与UI设计px的比例 /// The ratio of the actual dp to the design draft px - double get scaleWidth => _screenWidth / uiWidthPx; + double get scaleWidth => screenWidth / uiWidthPx; - double get scaleHeight => _screenHeight / uiHeightPx; + double get scaleHeight => screenHeight / uiHeightPx; double get scaleText => scaleWidth; diff --git a/pubspec.yaml b/pubspec.yaml index 8865642c49491f7d32f617e07a7782949b403fea..898c25f554793f9b1babdb19355a464b58363100 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: flutter_screenutil description: A flutter plugin for adapting screen and font size.Guaranteed to look good on different models -version: 1.1.0 +version: 2.0.0 homepage: https://github.com/OpenFlutter/flutter_screenutil environment: