0.4.0优化字体适配方法

李卓原
Commit bd2150041d7a711ec497df9f2aadfa2bd01ed332 bd215004 1 parent 85dfb48e
Showing 8 changed files with 61 additions and 51 deletions
.packages
CHANGELOG.md
README.md
README_CN.md
example/lib/main.dart
example/lib/main_zh.dart
lib/flutter_screenutil.dart
pubspec.yaml
--- a/.packages
View file @bd21500
+++ b/.packages
View file @bd21500
-# Generated by pub on 2018-10-17 15:16:22.083978.
+# Generated by pub on 2018-10-17 16:39:18.833879.
 analyzer:file:///C:/Users/Frank/AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/analyzer-0.32.4/lib/
 args:file:///C:/Users/Frank/AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/args-1.5.0/lib/
 async:file:///C:/Users/Frank/AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/async-2.0.8/lib/
--- a/CHANGELOG.md
View file @bd21500
+++ b/CHANGELOG.md
View file @bd21500
@@ -9,3 +9,6 @@
 ## [0.3.0] - Perfect documentation
 Width is enlarged relative to the design draft => The ratio of font and width to the size of the design
 Height is enlarged relative to the design draft => The ratio of  height width to the size of the design
+
+## [0.4.0] - Optimize font adaptation method
+
--- a/README.md
View file @bd21500
+++ b/README.md
View file @bd21500
@@ -16,7 +16,7 @@ dependencies:
   flutter:
     sdk: flutter
   # add flutter_ScreenUtil
-  flutter_screenutil: ^0.3.1
+  flutter_screenutil: ^0.4.0
 ```
 ### Add the following imports to your Dart code:
@@ -76,8 +76,8 @@ Other related apis：
     ScreenUtil.statusBarHeight  //Status bar height , Notch will be higher Unit px
     ScreenUtil.textScaleFactory //System font scaling factor
-    ScreenUtil().scaleWidth //The ratio of font and width to the size of the design
-    ScreenUtil().scaleHeight //The ratio of  height width to the size of the design
+    ScreenUtil().scaleWidth //Ratio of actual width dp to design draft px
+    ScreenUtil().scaleHeight //Ratio of actual height dp to design draft px
 ```
@@ -100,9 +100,9 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
     print(
         'Status bar height:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
     print(
-        'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft
+        'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); //The width is enlarged relative to the design draft
     print(
-        'The ratio of  height width to the size of the design:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft
+        'The ratio of  height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); //The height is enlarged relative to the design draft
     return new Scaffold(
       appBar: new AppBar(
@@ -122,7 +122,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
                     'My width:${ScreenUtil().setWidth(375)}dp',
                     style: TextStyle(
                         color: Colors.white,
-                        fontSize: ScreenUtil().setSp(28, false)),
+                        fontSize: ScreenUtil().setSp(12, false)),
                   ),
                 ),
                 Container(
@@ -132,7 +132,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
                   child: Text('My width:${ScreenUtil().setWidth(375)}dp',
                       style: TextStyle(
                           color: Colors.white,
-                          fontSize: ScreenUtil().setSp(28, false))),
+                          fontSize: ScreenUtil().setSp(12, false))),
                 ),
               ],
             ),
@@ -142,11 +142,11 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
             Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'),
             Text('Status bar height:${ScreenUtil.statusBarHeight}px'),
             Text(
-              'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth}',
+              'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
               textAlign: TextAlign.center,
             ),
             Text(
-              'The ratio of  height width to the size of the design:${ScreenUtil().scaleHeight}',
+              'The ratio of  height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}',
               textAlign: TextAlign.center,
             ),
             SizedBox(
@@ -157,13 +157,17 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
               crossAxisAlignment: CrossAxisAlignment.start,
               children: <Widget>[
                 Text(
-                    'My font size is 28px and will not change with the system.',
+                    'My font size is 14px on the design draft and will not change with the system.',
                     style: TextStyle(
-                        color: Colors.black,
-                        fontSize: ScreenUtil().setSp(28, false))),
-                Text('My font size is 28px and will change with the system.',
+                      color: Colors.black,
+                      fontSize: ScreenUtil().setSp(14, false),
+                    )),
+                Text(
+                    'My font size is 14px on the design draft and will change with the system.',
                     style: TextStyle(
-                        color: Colors.black, fontSize: ScreenUtil().setSp(28))),
+                      color: Colors.black,
+                      fontSize: ScreenUtil().setSp(14),
+                    )),
               ],
             )
           ],
--- a/README_CN.md
View file @bd21500
+++ b/README_CN.md
View file @bd21500
@@ -19,7 +19,7 @@ dependencies:
   flutter:
     sdk: flutter
   # 添加依赖
-  flutter_screenutil: ^0.3.1
+  flutter_screenutil: ^0.4.0
 ```
 ### 在每个使用的地方导入包：
@@ -77,8 +77,8 @@ for example:
     ScreenUtil.statusBarHeight  //状态栏高度 刘海屏会更高  单位px
     ScreenUtil.textScaleFactory //系统字体缩放比例
-    ScreenUtil().scaleWidth  //字体和宽度相对设计稿放大的比例
-    ScreenUtil().scaleHeight //高度相对于设计稿放大的比例
+    ScreenUtil().scaleWidth  // 实际宽度的dp与设计稿px的比例
+    ScreenUtil().scaleHeight // 实际高度的dp与设计稿px的比例
 ```
@@ -88,7 +88,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
 ...
-@override
+  @override
   Widget build(BuildContext context) {
     //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
     ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
@@ -100,9 +100,9 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
     print(
         '状态栏高度:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
     print(
-        '字体和宽度相对设计稿放大的比例:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft
+        '实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); //The width is enlarged relative to the design draft
     print(
-        '高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft
+        '实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); //The height is enlarged relative to the design draft
     print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}');
     return new Scaffold(
@@ -143,11 +143,11 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
             Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'),
             Text('状态栏高度:${ScreenUtil.statusBarHeight}px'),
             Text(
-              '字体和宽度相对设计稿放大的比例:${ScreenUtil().scaleWidth}',
+              '实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
               textAlign: TextAlign.center,
             ),
             Text(
-              '高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}',
+              '实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}',
               textAlign: TextAlign.center,
             ),
             SizedBox(
@@ -157,13 +157,13 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
             Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: <Widget>[
-                Text('我的文字大小是28px，不会随着系统的文字大小变化',
+                Text('我的文字大小是14px，不会随着系统的文字大小变化',
                     style: TextStyle(
                         color: Colors.black,
-                        fontSize: ScreenUtil().setSp(28, false))),
-                Text('我的文字大小是28px，会随着系统的文字大小变化',
+                        fontSize: ScreenUtil().setSp(14, false))),
+                Text('我的文字大小是14px，会随着系统的文字大小变化',
                     style: TextStyle(
-                        color: Colors.black, fontSize: ScreenUtil().setSp(28))),
+                        color: Colors.black, fontSize: ScreenUtil().setSp(14))),
               ],
             )
           ],
--- a/example/lib/main.dart
View file @bd21500
+++ b/example/lib/main.dart
View file @bd21500
@@ -41,10 +41,9 @@ class _MyHomePageState extends State<MyHomePage> {
     print(
         'Status bar height:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
     print(
-        'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft
+        'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); //The width is enlarged relative to the design draft
     print(
-        'The ratio of  height width to the size of the design:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft
-
+        'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); //The height is enlarged relative to the design draft
     return new Scaffold(
       appBar: new AppBar(
         title: new Text(widget.title),
@@ -63,7 +62,7 @@ class _MyHomePageState extends State<MyHomePage> {
                     'My width:${ScreenUtil().setWidth(375)}dp',
                     style: TextStyle(
                         color: Colors.white,
-                        fontSize: ScreenUtil().setSp(28, false)),
+                        fontSize: ScreenUtil().setSp(12, false)),
                   ),
                 ),
                 Container(
@@ -73,7 +72,7 @@ class _MyHomePageState extends State<MyHomePage> {
                   child: Text('My width:${ScreenUtil().setWidth(375)}dp',
                       style: TextStyle(
                           color: Colors.white,
-                          fontSize: ScreenUtil().setSp(28, false))),
+                          fontSize: ScreenUtil().setSp(12, false))),
                 ),
               ],
             ),
@@ -83,11 +82,11 @@ class _MyHomePageState extends State<MyHomePage> {
             Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'),
             Text('Status bar height:${ScreenUtil.statusBarHeight}px'),
             Text(
-              'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth}',
+              'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
               textAlign: TextAlign.center,
             ),
             Text(
-              'The ratio of  height width to the size of the design:${ScreenUtil().scaleHeight}',
+              'The ratio of  height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}',
               textAlign: TextAlign.center,
             ),
             SizedBox(
@@ -98,13 +97,17 @@ class _MyHomePageState extends State<MyHomePage> {
               crossAxisAlignment: CrossAxisAlignment.start,
               children: <Widget>[
                 Text(
-                    'My font size is 28px and will not change with the system.',
+                    'My font size is 14px on the design draft and will not change with the system.',
                     style: TextStyle(
-                        color: Colors.black,
-                        fontSize: ScreenUtil().setSp(28, false))),
-                Text('My font size is 28px and will change with the system.',
+                      color: Colors.black,
+                      fontSize: ScreenUtil().setSp(14, false),
+                    )),
+                Text(
+                    'My font size is 14px on the design draft and will change with the system.',
                     style: TextStyle(
-                        color: Colors.black, fontSize: ScreenUtil().setSp(28))),
+                      color: Colors.black,
+                      fontSize: ScreenUtil().setSp(14),
+                    )),
               ],
             )
           ],
--- a/example/lib/main_zh.dart
View file @bd21500
+++ b/example/lib/main_zh.dart
View file @bd21500
@@ -40,9 +40,9 @@ class _MyHomePageState extends State<MyHomePage> {
     print(
         '状态栏高度:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
     print(
-        '字体和宽度相对设计稿放大的比例:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft
+        '实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); //The width is enlarged relative to the design draft
     print(
-        '高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft
+        '实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); //The height is enlarged relative to the design draft
     print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}');
     return new Scaffold(
@@ -83,11 +83,11 @@ class _MyHomePageState extends State<MyHomePage> {
             Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'),
             Text('状态栏高度:${ScreenUtil.statusBarHeight}px'),
             Text(
-              '字体和宽度相对设计稿放大的比例:${ScreenUtil().scaleWidth}',
+              '实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
               textAlign: TextAlign.center,
             ),
             Text(
-              '高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight}',
+              '实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}',
               textAlign: TextAlign.center,
             ),
             SizedBox(
@@ -97,13 +97,13 @@ class _MyHomePageState extends State<MyHomePage> {
             Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: <Widget>[
-                Text('我的文字大小是28px，不会随着系统的文字大小变化',
+                Text('我的文字大小是14px，不会随着系统的文字大小变化',
                     style: TextStyle(
                         color: Colors.black,
-                        fontSize: ScreenUtil().setSp(28, false))),
-                Text('我的文字大小是28px，会随着系统的文字大小变化',
+                        fontSize: ScreenUtil().setSp(14, false))),
+                Text('我的文字大小是14px，会随着系统的文字大小变化',
                     style: TextStyle(
-                        color: Colors.black, fontSize: ScreenUtil().setSp(28))),
+                        color: Colors.black, fontSize: ScreenUtil().setSp(14))),
               ],
             )
           ],
--- a/lib/flutter_screenutil.dart
View file @bd21500
+++ b/lib/flutter_screenutil.dart
View file @bd21500
@@ -62,7 +62,7 @@ class ScreenUtil {
   ///底部安全区距离
   static double get bottomBarHeight => _bottomBarHeight * _pixelRatio;
-  ///相对于设计稿放大的倍数
+  ///实际的dp与设计稿px的比例
   get scaleWidth => _screenWidth / instance._designWidth;
   get scaleHeight => _screenHeight / instance._designHeight;
@@ -82,6 +82,6 @@ class ScreenUtil {
   ///@param allowFontScaling 控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为true。
   ///@param allowFontScaling Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true.
   setSp(int fontSize, [allowFontScaling = true]) => allowFontScaling
-      ? setWidth(fontSize) * _textScaleFactor
-      : setWidth(fontSize);
+      ? setWidth(fontSize) * _pixelRatio * _textScaleFactor
+      : setWidth(fontSize) * _pixelRatio;
 }
--- a/pubspec.yaml
View file @bd21500
+++ b/pubspec.yaml
View file @bd21500
 name: flutter_screenutil
 description: A flutter plugin for adapting screen and font size.Guaranteed to look good on different models
-version: 0.3.1
+version: 0.4.0
 author: LiZhuoyuan <zhuoyuan93@gmail.com>
 homepage: https://github.com/OpenFlutter/flutter_ScreenUtil