Skip to content

Commit

Permalink
添加文字适配
Browse files Browse the repository at this point in the history
  • Loading branch information
@lizhuoyuan
lizhuoyuan committed Oct 16, 2018
1 parent decd378 commit e5b805f
Show file tree
Hide file tree
Showing 13 changed files with 484 additions and 272 deletions.
319 changes: 141 additions & 178 deletions .idea/workspace.xml
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@

## [0.2.2] - Optimize documentation

## [0.3.0] - Add font size adaptation
76 changes: 63 additions & 13 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

### Use：

Fit size：
Adapt screen size：
```
Pass the px size of the design draft：
Expand All @@ -52,6 +52,22 @@ Container(
),
```

Adapter font:
```
ScreenUtil().setSp(28) //Incoming font size，the unit is pixel, fonts will scale to respect Text Size accessibility settings
ScreenUtil().setSp(28，false) //Incoming font size，the unit is pixel，fonts will not scale to respect Text Size accessibility settings
for example:
Text(
'My font size is 28px and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(28, false)
)
),
```

Other related apis：
```
ScreenUtil.pixelRatio //Device pixel density
Expand All @@ -73,22 +89,29 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
@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)
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
print('Device width:${ScreenUtil.screenWidth}'); //Device width
print('Device height:${ScreenUtil.screenHeight}'); //Device height
print('Device pixel density:${ScreenUtil.pixelRatio}'); //Device pixel density
print('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen
print('Status bar height:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
print('The width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft
print('Height relative to the magnification of the design draft:${ScreenUtil().scaleHeight}'); //Height relative to the magnification of the design draft
print(
'Device pixel density:${ScreenUtil.pixelRatio}'); //Device pixel density
print(
'Bottom safe zone distance:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen
print(
'Status bar height:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
print(
'Width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft
print(
'Height is enlarged relative to the design draft:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft
print('System font scaling:${ScreenUtil.textScaleFactory}');
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Expand All @@ -98,15 +121,19 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
color: Colors.red,
child: Text(
'My width:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(color: Colors.white),
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false)),
),
),
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child: Text('My width:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(color: Colors.white)),
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false))),
),
],
),
Expand All @@ -115,8 +142,31 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Text('Device pixel density:${ScreenUtil.pixelRatio}'),
Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'),
Text('Status bar height:${ScreenUtil.statusBarHeight}px'),
Text('The width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}'),
Text('Height relative to the magnification of the design draft:${ScreenUtil().scaleHeight}'),
Text(
'Width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'Height is enlarged relative to the design draft:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil().setHeight(200),
),
Text('System font scaling:${ScreenUtil.textScaleFactory}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'My font size is 28px 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.',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(28))),
],
)
],
),
),
Expand All @@ -126,9 +176,9 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';

### example:

[example demo](https://github.com/OpenFlutter/flutter_ScreenUtil/blob/master/example)
[example demo](https://github.com/OpenFlutter/flutter_ScreenUtil/blob/master/example/lib/main_zh.dart)

effect:

![效果](effect.png)
![效果](demo_en.png)

171 changes: 111 additions & 60 deletions README_CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
//传入设计稿的px尺寸：
适配后的宽度width: ScreenUtil().setWidth(540),
适配后的高度height: ScreenUtil().setHeight(200),
高度也根据setWidth来做适配可以保证不变形
例如:
Container(
Expand All @@ -53,17 +54,34 @@ Container(
),
```

适配字体:
```
ScreenUtil().setSp(28) //传入字体大小，根据系统的“字体大小”辅助选项来进行缩放
ScreenUtil().setSp(28，false) //传入字体大小，不会根据系统的“字体大小”辅助选项来进行缩放
for example:
Text(
'My font size is 28px and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(28, false)
)
),
```

其他相关api：
```
ScreenUtil.pixelRatio //设备的像素密度
ScreenUtil.screenWidth //设备宽度
ScreenUtil.screenHeight //设备高度
ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil().scaleWidth //宽度相对于设计稿放大的倍数
ScreenUtil.screenWidth //设备宽度
ScreenUtil.screenHeight //设备高度
ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil.textScaleFactory //系统字体缩放比例
ScreenUtil().scaleWidth //宽度相对于设计稿放大的倍数
ScreenUtil().scaleHeight //高度相对于设计稿放大的倍数
```

```
Expand All @@ -72,64 +90,97 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
...
@override
Widget build(BuildContext context) {
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
print('设备宽度:${ScreenUtil.screenWidth}'); //设备宽度
print('设备高度:${ScreenUtil.screenHeight}'); //设备高度
print('设备的像素密度:${ScreenUtil.pixelRatio}'); //设备的像素密度
print('底部安全区距离:${ScreenUtil.bottomBarHeight}'); //底部安全区距离，适用于全面屏下面有按键的
print('状态栏高度:${ScreenUtil.statusBarHeight}px'); //状态栏高度 刘海屏会更高
print('宽度相对于设计稿放大的倍数:${ScreenUtil().scaleWidth}'); //宽度相对于设计稿放大的倍数
print('高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}'); //高度相对于设计稿放大的倍数
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
'我的宽度${ScreenUtil().setWidth(375)}dp',
style: TextStyle(color: Colors.white),
),
),
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child: Text('我的宽度${ScreenUtil().setWidth(375)}dp',
style: TextStyle(color: Colors.white)),
),
],
),
Text('设备的屏幕宽度：${ScreenUtil.screenWidth}px'),
Text('设备的屏幕高度:${ScreenUtil.screenHeight}px'),
Text('设备的像素密度:${ScreenUtil.pixelRatio}'),
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}px'),
Text('宽度相对于设计稿放大的倍数:${ScreenUtil().scaleWidth}'),
Text('高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}'),
],
),
),
);
}
@override
Widget build(BuildContext context) {
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
print('设备宽度:${ScreenUtil.screenWidth}'); //Device width
print('设备高度:${ScreenUtil.screenHeight}'); //Device height
print('设备的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density
print(
'底部安全区距离:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen
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
print(
'高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft
print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}');
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
'My width:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false)),
),
),
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child: Text('My width:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false))),
),
],
),
Text('Device width：${ScreenUtil.screenWidth}px'),
Text('Device height:${ScreenUtil.screenHeight}px'),
Text('Device pixel density:${ScreenUtil.pixelRatio}'),
Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'),
Text('Status bar height:${ScreenUtil.statusBarHeight}px'),
Text(
'Width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'Height is enlarged relative to the design draft:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil().setHeight(200),
),
Text('System font scaling:${ScreenUtil.textScaleFactory}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'我的文字大小是28px，不会随着系统的文字大小变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(28, false))),
Text('我的文字大小是28px，会随着系统的文字大小变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(28))),
],
)
],
),
),
);
}
```

### 使用示例:

[example demo](/example)
[example demo](/example/lib/main_zh.dart)

效果:

![效果](demo.PNG)
![效果](demo_zh.png)

Binary file removed demo.PNG
View file
Binary file not shown.
Binary file added demo_en.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo_zh.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed effect.png
View file
Binary file not shown.
4 changes: 2 additions & 2 deletions example/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

flutter_screenutil的使用示例

![效果](../demo.PNG)
![effect](../effect.png)
![效果](../demo_zh.png)
![effect](../demo_en.png)

## Getting Started

Expand Down
Loading

0 comments on commit e5b805f

Please sign in to comment.