Showing
1 changed file
with
35 additions
and
33 deletions
| @@ -15,9 +15,9 @@ csdn博客本工具介绍:https://blog.csdn.net/u011272795/article/details/82795 | @@ -15,9 +15,9 @@ csdn博客本工具介绍:https://blog.csdn.net/u011272795/article/details/82795 | ||
| 15 | 15 | ||
| 16 | 16 | ||
| 17 | 17 | ||
| 18 | -使用方法: | 18 | +## 使用方法: |
| 19 | 19 | ||
| 20 | -安装依赖: | 20 | +### 安装依赖: |
| 21 | ``` | 21 | ``` |
| 22 | dependencies: | 22 | dependencies: |
| 23 | flutter: | 23 | flutter: |
| @@ -28,12 +28,13 @@ dependencies: | @@ -28,12 +28,13 @@ dependencies: | ||
| 28 | url: git://github.com/lizhuoyuan/flutter_ScreenUtil | 28 | url: git://github.com/lizhuoyuan/flutter_ScreenUtil |
| 29 | ``` | 29 | ``` |
| 30 | 30 | ||
| 31 | -在每个使用的地方导入包: | 31 | +### 在每个使用的地方导入包: |
| 32 | ``` | 32 | ``` |
| 33 | import 'package:flutter_screenutil/flutter_screenutil.dart'; | 33 | import 'package:flutter_screenutil/flutter_screenutil.dart'; |
| 34 | 34 | ||
| 35 | ``` | 35 | ``` |
| 36 | 36 | ||
| 37 | +### 设置尺寸 | ||
| 37 | 在使用之前请设置好设计稿的宽度和高度,如果不设置则使用默认尺寸 | 38 | 在使用之前请设置好设计稿的宽度和高度,如果不设置则使用默认尺寸 |
| 38 | 传入设计稿的宽度和高度(单位px),默认为1080*1920 | 39 | 传入设计稿的宽度和高度(单位px),默认为1080*1920 |
| 39 | 推荐在项目入口中设置,以保证在每次使用之前设置好了适配尺寸: | 40 | 推荐在项目入口中设置,以保证在每次使用之前设置好了适配尺寸: |
| @@ -41,7 +42,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -41,7 +42,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
| 41 | ScreenUtil.instance = new ScreenUtil(width: 360, height: 720); | 42 | ScreenUtil.instance = new ScreenUtil(width: 360, height: 720); |
| 42 | ``` | 43 | ``` |
| 43 | 44 | ||
| 44 | -使用: | 45 | +### 使用: |
| 45 | ``` | 46 | ``` |
| 46 | .... | 47 | .... |
| 47 | //传入设计稿的px尺寸: | 48 | //传入设计稿的px尺寸: |
| @@ -70,39 +71,40 @@ import 'package:flutter_app/ScreenUtil.dart'; //导入 | @@ -70,39 +71,40 @@ import 'package:flutter_app/ScreenUtil.dart'; //导入 | ||
| 70 | Widget build(BuildContext context) { | 71 | Widget build(BuildContext context) { |
| 71 | 72 | ||
| 72 | print(ScreenUtil().setWidth(180)); | 73 | print(ScreenUtil().setWidth(180)); |
| 73 | - print('设备的像素密度:${ScreenUtil.pixelRatio}'); //设备的像素密度 | ||
| 74 | - print('设备宽度:${ScreenUtil.screenWidth}'); //设备宽度 | ||
| 75 | - print('设备高度:${ScreenUtil.screenHeight}'); //设备高度 | ||
| 76 | - print('底部安全区距离:${ScreenUtil.bottomBarHeight}'); //底部安全区距离,适用于全面屏下面有按键的 | ||
| 77 | - print('状态栏高度:${ScreenUtil.statusBarHeight}px'); //状态栏高度 刘海屏会更高 | ||
| 78 | - | ||
| 79 | - print('宽度相对于设计稿放大的倍数:${ScreenUtil().scaleWidth}'); //宽度相对于设计稿放大的倍数 | ||
| 80 | - print('高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}'); //高度相对于设计稿放大的倍数 | 74 | + print('设备的像素密度:${ScreenUtil.pixelRatio}'); //设备的像素密度 |
| 75 | + print('设备宽度:${ScreenUtil.screenWidth}'); //设备宽度 | ||
| 76 | + print('设备高度:${ScreenUtil.screenHeight}'); //设备高度 | ||
| 77 | + print('底部安全区距离:${ScreenUtil.bottomBarHeight}'); //底部安全区距离,适用于全面屏下面有按键的 | ||
| 78 | + print('状态栏高度:${ScreenUtil.statusBarHeight}px'); //状态栏高度 刘海屏会更高 | ||
| 79 | + | ||
| 80 | + print('宽度相对于设计稿放大的倍数:${ScreenUtil().scaleWidth}'); //宽度相对于设计稿放大的倍数 | ||
| 81 | + print('高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}'); //高度相对于设计稿放大的倍数 | ||
| 81 | return new Scaffold( | 82 | return new Scaffold( |
| 82 | appBar: new AppBar( | 83 | appBar: new AppBar( |
| 83 | title: new Text(widget.title), | 84 | title: new Text(widget.title), |
| 84 | ), | 85 | ), |
| 85 | - body: Column( | ||
| 86 | - children: <Widget>[ | ||
| 87 | - Row( | ||
| 88 | - children: <Widget>[ | ||
| 89 | - Container( | ||
| 90 | - width: ScreenUtil().setWidth(540), | ||
| 91 | - height: ScreenUtil().setHeight(200), | ||
| 92 | - color: Colors.red, | ||
| 93 | - child: Text(ScreenUtil().setWidth(540).toString()), | ||
| 94 | - ), | ||
| 95 | - Container( | ||
| 96 | - width: ScreenUtil().setWidth(540), | ||
| 97 | - height: ScreenUtil().setHeight(200), | ||
| 98 | - color: Colors.blue, | ||
| 99 | - child: Text(ScreenUtil().setWidth(540).toString()), | ||
| 100 | - ), | ||
| 101 | - ], | ||
| 102 | - ), | ||
| 103 | - Text(ScreenUtil.screenWidth.toString()), | ||
| 104 | - Text(ScreenUtil.screenHeight.toString()), | ||
| 105 | - ], | 86 | + body: new Center( |
| 87 | + child: Column( | ||
| 88 | + children: <Widget>[ | ||
| 89 | + Row( | ||
| 90 | + children: <Widget>[ | ||
| 91 | + Container( | ||
| 92 | + width: ScreenUtil().setWidth(375), | ||
| 93 | + height: ScreenUtil().setHeight(200), | ||
| 94 | + color: Colors.red, | ||
| 95 | + child: Text(ScreenUtil().setWidth(375).toString()), | ||
| 96 | + ), | ||
| 97 | + Container( | ||
| 98 | + width: ScreenUtil().setWidth(375), | ||
| 99 | + height: ScreenUtil().setHeight(200), | ||
| 100 | + color: Colors.blue, | ||
| 101 | + child: Text(ScreenUtil().setWidth(375).toString()), | ||
| 102 | + ), | ||
| 103 | + ], | ||
| 104 | + ), | ||
| 105 | + Text(ScreenUtil.screenWidth.toString()), | ||
| 106 | + Text(ScreenUtil.screenHeight.toString()), | ||
| 107 | + ], | ||
| 106 | ), | 108 | ), |
| 107 | ); | 109 | ); |
| 108 | } | 110 | } |
-
Please register or login to post a comment