Skip to content

Commit

Permalink
0.4.0优化字体适配方法
Browse files Browse the repository at this point in the history
  • Loading branch information
lizhuoyuan committed Oct 17, 2018
1 parent 85dfb48 commit bd21500
Show file tree
Hide file tree
Showing 8 changed files with 61 additions and 51 deletions.
2 changes: 1 addition & 1 deletion .packages
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# 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/
Expand Down
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

32 changes: 18 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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
```

Expand All @@ -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(
Expand All @@ -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(
Expand All @@ -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))),
),
],
),
Expand All @@ -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(
Expand All @@ -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),
)),
],
)
],
Expand Down
24 changes: 12 additions & 12 deletions README_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ dependencies:
flutter:
sdk: flutter
# 添加依赖
flutter_screenutil: ^0.3.1
flutter_screenutil: ^0.4.0
```

### 在每个使用的地方导入包:
Expand Down Expand Up @@ -77,8 +77,8 @@ for example:
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil.textScaleFactory //系统字体缩放比例
ScreenUtil().scaleWidth //字体和宽度相对设计稿放大的比例
ScreenUtil().scaleHeight //高度相对于设计稿放大的比例
ScreenUtil().scaleWidth // 实际宽度的dp与设计稿px的比例
ScreenUtil().scaleHeight // 实际高度的dp与设计稿px的比例
```

Expand All @@ -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);
Expand All @@ -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(
Expand Down Expand Up @@ -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(
Expand All @@ -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))),
],
)
],
Expand Down
27 changes: 15 additions & 12 deletions example/lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -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(
Expand All @@ -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))),
),
],
),
Expand All @@ -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(
Expand All @@ -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),
)),
],
)
],
Expand Down
16 changes: 8 additions & 8 deletions example/lib/main_zh.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand All @@ -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))),
],
)
],
Expand Down
6 changes: 3 additions & 3 deletions lib/flutter_screenutil.dart
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ class ScreenUtil {
///底部安全区距离
static double get bottomBarHeight => _bottomBarHeight * _pixelRatio;

///相对于设计稿放大的倍数
///实际的dp与设计稿px的比例
get scaleWidth => _screenWidth / instance._designWidth;

get scaleHeight => _screenHeight / instance._designHeight;
Expand All @@ -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;
}
2 changes: 1 addition & 1 deletion pubspec.yaml
Original file line number Diff line number Diff line change
@@ -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: 0.3.1
version: 0.4.0
author: LiZhuoyuan <zhuoyuan93@gmail.com>
homepage: https://github.com/OpenFlutter/flutter_ScreenUtil

Expand Down

0 comments on commit bd21500

Please sign in to comment.