flutter_package / flutter_screenutil

Go to a project
Toggle navigation Toggle navigation pinning
李卓原
e3d2574e 2 parents eb6f7404 62d8b7d3

Merge remote-tracking branch 'origin/master' 

# Conflicts:
#	README.md
#	example/pubspec.yaml
Inline Side-by-side
Showing 3 changed files with 135 additions and 126 deletions
1 -  
2 -# flutter_ScreenUtil  
3 -**flutter 屏幕适配方案**  
4 -  
5 -github: https://github.com/lizhuoyuan/flutter_ScreenUtil </br>  
6 -csdn博客工具介绍:https://blog.csdn.net/u011272795/article/details/82795477  
7 -  
8 -  
9 -## 使用方法:  
10 -  
11 -### 安装依赖：  
12 -```  
13 -dependencies:  
14 - flutter:  
15 - sdk: flutter  
16 - # 添加依赖  
17 - flutter_screenutil:  
18 - git:  
19 - url: git://github.com/lizhuoyuan/flutter_ScreenUtil  
20 -```  
21 -  
22 -### 在每个使用的地方导入包：  
23 -```  
24 -import 'package:flutter_screenutil/flutter_screenutil.dart';  
25 -  
26 -```  
27 -  
28 -### 初始化设置尺寸  
29 -在使用之前请设置好设计稿的宽度和高度，传入设计稿的宽度和高度(单位px)  
30 -如果不设置则使用默认尺寸，默认为1080*1920  
31 -一定在MaterialApp的home中的页面设置，以保证在每次使用之前设置好了适配尺寸:  
32 -  
33 -```  
34 -//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)  
35 - ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);  
36 -```  
37 -  
38 -### 使用：  
39 -  
40 -适配尺寸：  
41 -```  
42 -//传入设计稿的px尺寸：  
43 -width: ScreenUtil().setWidth(540),  
44 -height: ScreenUtil().setHeight(200),  
45 -```  
46 -  
47 -其他相关api：  
48 -```  
49 - ScreenUtil.pixelRatio //设备的像素密度  
50 - ScreenUtil.screenWidth //设备宽度  
51 - ScreenUtil.screenHeight //设备高度  
52 - ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的  
53 - ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px  
54 -  
55 - ScreenUtil().scaleWidth //宽度相对于设计稿放大的倍数  
56 - ScreenUtil().scaleHeight //高度相对于设计稿放大的倍数  
57 -  
58 -```  
59 -  
60 -```  
61 -//导入  
62 -import 'package:flutter_screenutil/flutter_screenutil.dart';  
63 -  
64 -...  
65 -  
66 - @override  
67 - Widget build(BuildContext context) {  
68 - //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)  
69 - ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);  
70 - print('设备宽度:${ScreenUtil.screenWidth}'); //设备宽度  
71 - print('设备高度:${ScreenUtil.screenHeight}'); //设备高度  
72 - print('设备的像素密度:${ScreenUtil.pixelRatio}'); //设备的像素密度  
73 - print('底部安全区距离:${ScreenUtil.bottomBarHeight}'); //底部安全区距离，适用于全面屏下面有按键的  
74 - print('状态栏高度:${ScreenUtil.statusBarHeight}px'); //状态栏高度 刘海屏会更高  
75 - print('宽度相对于设计稿放大的倍数:${ScreenUtil().scaleWidth}'); //宽度相对于设计稿放大的倍数  
76 - print('高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}'); //高度相对于设计稿放大的倍数  
77 -  
78 - return new Scaffold(  
79 - appBar: new AppBar(  
80 - title: new Text(widget.title),  
81 - ),  
82 - body: new Center(  
83 - child: Column(  
84 - children: <Widget>[  
85 - Row(  
86 - children: <Widget>[  
87 - Container(  
88 - width: ScreenUtil().setWidth(375),  
89 - height: ScreenUtil().setHeight(200),  
90 - color: Colors.red,  
91 - child: Text(  
92 - '我的宽度${ScreenUtil().setWidth(375)}dp',  
93 - style: TextStyle(color: Colors.white),  
94 - ),  
95 - ),  
96 - Container(  
97 - width: ScreenUtil().setWidth(375),  
98 - height: ScreenUtil().setHeight(200),  
99 - color: Colors.blue,  
100 - child: Text('我的宽度${ScreenUtil().setWidth(375)}dp',  
101 - style: TextStyle(color: Colors.white)),  
102 - ),  
103 - ],  
104 - ),  
105 - Text('设备的屏幕宽度：${ScreenUtil.screenWidth}px'),  
106 - Text('设备的屏幕高度:${ScreenUtil.screenHeight}px'),  
107 - Text('设备的像素密度:${ScreenUtil.pixelRatio}'),  
108 - Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'),  
109 - Text('状态栏高度:${ScreenUtil.statusBarHeight}px'),  
110 - ],  
111 - ),  
112 - ),  
113 - );  
114 - }  
115 -```  
116 -  
117 -### 使用示例:  
118 -  
119 -[example demo](/example)  
120 -  
121 -效果:  
122 -  
123 -![效果](demo.PNG)  
124 - 1 +
  2 +# flutter_ScreenUtil
  3 +**flutter 屏幕适配方案**
  4 +
  5 +github: https://github.com/OpenFlutter/flutter_ScreenUtil </br>
  6 +csdn博客工具介绍:https://blog.csdn.net/u011272795/article/details/82795477
  7 +
  8 +
  9 +## 使用方法:
  10 +
  11 +### 安装依赖：
  12 +```
  13 +dependencies:
  14 + flutter:
  15 + sdk: flutter
  16 + # 添加依赖
  17 + flutter_screenutil:
  18 + git:
  19 + url: git://github.com/openflutter/flutter_screenutil
  20 +```
  21 +
  22 +### 在每个使用的地方导入包：
  23 +```
  24 +import 'package:flutter_screenutil/flutter_screenutil.dart';
  25 +
  26 +```
  27 +
  28 +### 初始化设置尺寸
  29 +在使用之前请设置好设计稿的宽度和高度，传入设计稿的宽度和高度(单位px)
  30 +如果不设置则使用默认尺寸，默认为1080*1920
  31 +一定在MaterialApp的home中的页面设置，以保证在每次使用之前设置好了适配尺寸:
  32 +
  33 +```
  34 +//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
  35 + ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
  36 +```
  37 +
  38 +### 使用：
  39 +
  40 +适配尺寸：
  41 +```
  42 +//传入设计稿的px尺寸：
  43 +适配后的宽度width: ScreenUtil().setWidth(540),
  44 +适配后的高度height: ScreenUtil().setHeight(200),
  45 +
  46 +例如:
  47 +Container(
  48 + width: ScreenUtil().setWidth(375),
  49 + height: ScreenUtil().setHeight(200),
  50 + ),
  51 +```
  52 +
  53 +其他相关api：
  54 +```
  55 + ScreenUtil.pixelRatio //设备的像素密度
  56 + ScreenUtil.screenWidth //设备宽度
  57 + ScreenUtil.screenHeight //设备高度
  58 + ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的
  59 + ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
  60 +
  61 + ScreenUtil().scaleWidth //宽度相对于设计稿放大的倍数
  62 + ScreenUtil().scaleHeight //高度相对于设计稿放大的倍数
  63 +
  64 +```
  65 +
  66 +```
  67 +//导入
  68 +import 'package:flutter_screenutil/flutter_screenutil.dart';
  69 +
  70 +...
  71 +
  72 + @override
  73 + Widget build(BuildContext context) {
  74 + //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
  75 + ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
  76 + print('设备宽度:${ScreenUtil.screenWidth}'); //设备宽度
  77 + print('设备高度:${ScreenUtil.screenHeight}'); //设备高度
  78 + print('设备的像素密度:${ScreenUtil.pixelRatio}'); //设备的像素密度
  79 + print('底部安全区距离:${ScreenUtil.bottomBarHeight}'); //底部安全区距离，适用于全面屏下面有按键的
  80 + print('状态栏高度:${ScreenUtil.statusBarHeight}px'); //状态栏高度 刘海屏会更高
  81 + print('宽度相对于设计稿放大的倍数:${ScreenUtil().scaleWidth}'); //宽度相对于设计稿放大的倍数
  82 + print('高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}'); //高度相对于设计稿放大的倍数
  83 +
  84 + return new Scaffold(
  85 + appBar: new AppBar(
  86 + title: new Text(widget.title),
  87 + ),
  88 + body: new Center(
  89 + child: Column(
  90 + children: <Widget>[
  91 + Row(
  92 + children: <Widget>[
  93 + Container(
  94 + width: ScreenUtil().setWidth(375),
  95 + height: ScreenUtil().setHeight(200),
  96 + color: Colors.red,
  97 + child: Text(
  98 + '我的宽度${ScreenUtil().setWidth(375)}dp',
  99 + style: TextStyle(color: Colors.white),
  100 + ),
  101 + ),
  102 + Container(
  103 + width: ScreenUtil().setWidth(375),
  104 + height: ScreenUtil().setHeight(200),
  105 + color: Colors.blue,
  106 + child: Text('我的宽度${ScreenUtil().setWidth(375)}dp',
  107 + style: TextStyle(color: Colors.white)),
  108 + ),
  109 + ],
  110 + ),
  111 + Text('设备的屏幕宽度：${ScreenUtil.screenWidth}px'),
  112 + Text('设备的屏幕高度:${ScreenUtil.screenHeight}px'),
  113 + Text('设备的像素密度:${ScreenUtil.pixelRatio}'),
  114 + Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'),
  115 + Text('状态栏高度:${ScreenUtil.statusBarHeight}px'),
  116 + Text('宽度相对于设计稿放大的倍数:${ScreenUtil().scaleWidth}'),
  117 + Text('高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}'),
  118 + ],
  119 + ),
  120 + ),
  121 + );
  122 + }
  123 +```
  124 +
  125 +### 使用示例:
  126 +
  127 +[example demo](/example)
  128 +
  129 +效果:
  130 +
  131 +![效果](demo.PNG)
  132 +
@@ -2,6 +2,8 @@ @@ -2,6 +2,8 @@
2 2
3 flutter_screenutil的使用示例 3 flutter_screenutil的使用示例
4 4
  5 +![效果](../demo.PNG)
  6 +
5 ## Getting Started 7 ## Getting Started
6 8
7 For help getting started with Flutter, view our online 9 For help getting started with Flutter, view our online
@@ -21,8 +21,7 @@ dependencies: @@ -21,8 +21,7 @@ dependencies:
21 cupertino_icons: ^0.1.2 21 cupertino_icons: ^0.1.2
22 flutter_screenutil: 22 flutter_screenutil:
23 git: 23 git:
24 - url: git://github.com/lizhuoyuan/flutter_screenUtil  
25 - common_utils: ^1.0.2 24 + url: git://github.com/openflutter/flutter_screenutil
26 dev_dependencies: 25 dev_dependencies:
27 flutter_test: 26 flutter_test:
28 sdk: flutter 27 sdk: flutter