flutter_package / flutter_screenutil

Go to a project
Toggle navigation Toggle navigation pinning
李卓原
4d677ca0 1 parent f1546d4c

0.4.5

Inline Side-by-side
Showing 7 changed files with 46 additions and 39 deletions
# Generated by pub on 2019-01-03 18:12:49.974343.
# Generated by pub on 2019-01-11 11:09:46.258394.
async:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/async-2.0.8/lib/
boolean_selector:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/boolean_selector-1.0.4/lib/
charcode:file:///D:/flutter/.pub-cache/hosted/pub.dartlang.org/charcode-1.1.2/lib/
... ...
... ... @@ -38,8 +38,17 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
一定在MaterialApp的home中的页面设置(即入口文件，只需设置一次),以保证在每次使用之前设置好了适配尺寸:
```
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
|属性|类型|默认值|描述|
|:---|:---|:---|:---|
|width|int|1080px|设计稿中设备的宽度,单位px|
|height|int|1920px|设计稿中设备的高度,单位px|
|allowFontScaling|bool|false|设置字体大小是否根据系统的“字体大小”辅助选项来进行缩放|
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
//设置字体大小是否根据系统的“字体大小”辅助选项来进行缩放 , 默认为 false
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);
```
### 使用：
... ... @@ -78,9 +87,9 @@ Container(
传入设计稿的px尺寸：
```
ScreenUtil().setSp(28) //传入字体大小，不根据系统的“字体大小”辅助选项来进行缩放
ScreenUtil().setSp(28，true) //传入字体大小，会根据系统的“字体大小”辅助选项来进行缩放
ScreenUtil().setSp(28) //传入字体大小，默认不根据系统的“字体大小”辅助选项来进行缩放
ScreenUtil(allowFontScaling: true).setSp(28) //传入字体大小，根据系统的“字体大小”辅助选项来进行缩放
for example:
Text(
'My font size is 28px and will not change with the system.',
... ... @@ -193,17 +202,16 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
),
Text('系统的字体缩放比例:${ScreenUtil.textScaleFactory}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('我的文字大小在设计稿上是14px，不会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(14, false))),
Text('我的文字大小在设计稿上是14px，会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(14))),
],
)
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('我的文字大小在设计稿上是25px，不会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(24))),
Text('我的文字大小在设计稿上是25px，会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))),
],
)
],
),
),
... ...
... ... @@ -28,7 +28,6 @@ class MyHomePage extends StatefulWidget {
}
class _MyHomePageState extends State<MyHomePage> {
@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)
... ... @@ -66,8 +65,7 @@ class _MyHomePageState extends State<MyHomePage> {
child: Text(
'My width:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(24, false)),
color: Colors.white, fontSize: ScreenUtil().setSp(24)),
),
),
Container(
... ... @@ -77,7 +75,7 @@ class _MyHomePageState extends State<MyHomePage> {
child: Text('My width:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(24, false))),
fontSize: ScreenUtil().setSp(24))),
),
],
),
... ... @@ -113,13 +111,13 @@ class _MyHomePageState extends State<MyHomePage> {
'My font size is 24px on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(24, false),
fontSize: ScreenUtil().setSp(24),
)),
Text(
'My font size is 24px on the design draft and will change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(24),
fontSize: ScreenUtil(allowFontScaling: true).setSp(24),
)),
],
)
... ...
... ... @@ -66,7 +66,7 @@ class _MyHomePageState extends State<MyHomePage> {
'我的宽度:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(24, false),
fontSize: ScreenUtil().setSp(24),
),
),
),
... ... @@ -77,7 +77,7 @@ class _MyHomePageState extends State<MyHomePage> {
child: Text('我的宽度:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(24, false),
fontSize: ScreenUtil().setSp(24),
)),
),
],
... ... @@ -112,11 +112,10 @@ class _MyHomePageState extends State<MyHomePage> {
children: <Widget>[
Text('我的文字大小在设计稿上是25px，不会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(24, false))),
color: Colors.black, fontSize: ScreenUtil().setSp(24))),
Text('我的文字大小在设计稿上是25px，会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(24))),
color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))),
],
)
],
... ...
... ... @@ -47,7 +47,7 @@ packages:
path: ".."
relative: true
source: path
version: "0.4.2"
version: "0.4.5"
flutter_test:
dependency: "direct dev"
description: flutter
... ...
... ... @@ -9,8 +9,9 @@ class ScreenUtil {
static ScreenUtil instance = new ScreenUtil();
//设计稿的设备尺寸修改
int _designWidth;
int _designHeight;
int width;
int height;
bool allowFontScaling;
static MediaQueryData _mediaQueryData;
static double _screenWidth;
... ... @@ -22,10 +23,11 @@ class ScreenUtil {
static double _textScaleFactor;
ScreenUtil({int width, int height}) {
_designWidth = width;
_designHeight = height;
}
ScreenUtil({
this.width,
this.height,
this.allowFontScaling = false,
});
static ScreenUtil getInstance() {
return instance;
... ... @@ -69,9 +71,9 @@ class ScreenUtil {
static double get bottomBarHeight => _bottomBarHeight * _pixelRatio;
///实际的dp与设计稿px的比例
get scaleWidth => _screenWidth / instance._designWidth;
get scaleWidth => _screenWidth / instance.width;
get scaleHeight => _screenHeight / instance._designHeight;
get scaleHeight => _screenHeight / instance.height;
///根据设计稿的设备宽度适配
///高度也根据这个来做适配可以保证不变形
... ... @@ -87,7 +89,7 @@ class ScreenUtil {
///@param fontSize 传入设计稿上字体的px ,
///@param allowFontScaling 控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为true。
///@param allowFontScaling Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true.
setSp(int fontSize, [allowFontScaling = false]) => allowFontScaling
setSp(int fontSize) => allowFontScaling
? setWidth(fontSize)
: setWidth(fontSize) / _textScaleFactor;
}
... ...
name: flutter_screenutil
description: A flutter plugin for adapting screen and font size.Guaranteed to look good on different models
version: 0.4.4
version: 0.4.5
author: LiZhuoyuan <zhuoyuan93@gmail.com>
homepage: https://github.com/OpenFlutter/flutter_ScreenUtil
... ...