Skip to content

F
flutter_screenutil

__卓原 / flutter_screenutil

通知 10
Star 0
Fork 0
F
flutter_screenutil

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 b71732dd 编写于 作者: 李 李卓原
浏览文件
操作

readme

上级 f7a1b030
隐藏空白更改
内联 并排
Showing with 356 addition and 107 deletion
.idea/workspace.xml
浏览文件 @ b71732dd
......@@ -6,8 +6,11 @@
</configurations>
</component>
<component name="ChangeListManager">
<list default="true" id="4b1e7c8a-90e5-4705-b34f-bcaa595e12fe" name="Default" comment="">
<change beforePath="$PROJECT_DIR$/example/lib/main.dart" beforeDir="false" afterPath="$PROJECT_DIR$/example/lib/main.dart" afterDir="false" />
<list default="true" id="4b1e7c8a-90e5-4705-b34f-bcaa595e12fe" name="Default" comment="readme">
<change afterPath="$PROJECT_DIR$/README_CN.md" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/README-EN.md" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="TRACKING_ENABLED" value="true" />
......@@ -18,23 +21,29 @@
</component>
<component name="FileEditorManager">
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file leaf-file-name="main.dart" pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/example/lib/main.dart">
<file leaf-file-name="pubspec.yaml" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/pubspec.yaml">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="432">
<caret line="86" column="12" selection-start-line="86" selection-start-column="12" selection-end-line="86" selection-end-column="12" />
<folding>
<element signature="e#0#39#0" expanded="true" />
</folding>
<state relative-caret-position="270">
<caret line="10" column="10" lean-forward="true" selection-start-line="10" selection-start-column="10" selection-end-line="10" selection-end-column="10" />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="pubspec.yaml" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/pubspec.yaml">
<file leaf-file-name="README.md" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/README.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="432">
<caret line="16" selection-start-line="16" selection-end-line="16" />
<state relative-caret-position="108">
<caret line="4" column="17" selection-start-line="4" selection-start-column="17" selection-end-line="4" selection-end-column="17" />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="README_CN.md" pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/README_CN.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="81">
<caret line="3" lean-forward="true" selection-start-line="3" selection-end-line="3" />
</state>
</provider>
</entry>
......@@ -72,9 +81,10 @@
<option value="$PROJECT_DIR$/CHANGELOG.md" />
<option value="$PROJECT_DIR$/pubspec.yaml" />
<option value="$PROJECT_DIR$/LICENSE" />
<option value="$PROJECT_DIR$/README.md" />
<option value="$PROJECT_DIR$/README-EN.md" />
<option value="$PROJECT_DIR$/example/lib/main.dart" />
<option value="$PROJECT_DIR$/README.md" />
<option value="$PROJECT_DIR$/README_CN.md" />
</list>
</option>
</component>
......@@ -98,17 +108,6 @@
<item name="flutter_ScreenUtil" type="b2602c69:ProjectViewProjectNode" />
<item name="flutter_ScreenUtil" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="flutter_ScreenUtil" type="b2602c69:ProjectViewProjectNode" />
<item name="flutter_ScreenUtil" type="462c0819:PsiDirectoryNode" />
<item name="example" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="flutter_ScreenUtil" type="b2602c69:ProjectViewProjectNode" />
<item name="flutter_ScreenUtil" type="462c0819:PsiDirectoryNode" />
<item name="example" type="462c0819:PsiDirectoryNode" />
<item name="lib" type="462c0819:PsiDirectoryNode" />
</path>
</expand>
<select />
</subPane>
......@@ -135,6 +134,116 @@
<recent name="F:\screenutil" />
</key>
</component>
<component name="RestoreUpdateTree" date="Moments ago" ActionInfo="_Update">
<UpdatedFiles>
<FILE-GROUP>
<option name="myUpdateName" value="Updated from server" />
<option name="myStatusName" value="Changed on server" />
<option name="mySupportsDeletion" value="false" />
<option name="myCanBeAbsent" value="false" />
<option name="myId" value="CHANGED_ON_SERVER" />
<FILE-GROUP>
<option name="myUpdateName" value="Updated" />
<option name="myStatusName" value="Changed" />
<option name="mySupportsDeletion" value="false" />
<option name="myCanBeAbsent" value="false" />
<option name="myId" value="UPDATED" />
<PATH vcs="Git" revision="">$PROJECT_DIR$/example/README.md</PATH>
</FILE-GROUP>
<FILE-GROUP>
<option name="myUpdateName" value="Created" />
<option name="myStatusName" value="Created" />
<option name="mySupportsDeletion" value="false" />
<option name="myCanBeAbsent" value="false" />
<option name="myId" value="CREATED" />
</FILE-GROUP>
<FILE-GROUP>
<option name="myUpdateName" value="Deleted" />
<option name="myStatusName" value="Deleted" />
<option name="mySupportsDeletion" value="false" />
<option name="myCanBeAbsent" value="true" />
<option name="myId" value="REMOVED_FROM_REPOSITORY" />
</FILE-GROUP>
<FILE-GROUP>
<option name="myUpdateName" value="Restored" />
<option name="myStatusName" value="Will be restored" />
<option name="mySupportsDeletion" value="false" />
<option name="myCanBeAbsent" value="false" />
<option name="myId" value="RESTORED" />
</FILE-GROUP>
</FILE-GROUP>
<FILE-GROUP>
<option name="myUpdateName" value="Modified" />
<option name="myStatusName" value="Modified" />
<option name="mySupportsDeletion" value="false" />
<option name="myCanBeAbsent" value="false" />
<option name="myId" value="MODIFIED" />
</FILE-GROUP>
<FILE-GROUP>
<option name="myUpdateName" value="Skipped" />
<option name="myStatusName" value="Skipped" />
<option name="mySupportsDeletion" value="false" />
<option name="myCanBeAbsent" value="false" />
<option name="myId" value="SKIPPED" />
</FILE-GROUP>
<FILE-GROUP>
<option name="myUpdateName" value="Merged with conflicts" />
<option name="myStatusName" value="Will be merged with conflicts" />
<option name="mySupportsDeletion" value="false" />
<option name="myCanBeAbsent" value="false" />
<option name="myId" value="MERGED_WITH_CONFLICTS" />
</FILE-GROUP>
<FILE-GROUP>
<option name="myUpdateName" value="Merged with tree conflicts" />
<option name="myStatusName" value="Merged with tree conflicts" />
<option name="mySupportsDeletion" value="false" />
<option name="myCanBeAbsent" value="false" />
<option name="myId" value="MERGED_WITH_TREE_CONFLICT" />
</FILE-GROUP>
<FILE-GROUP>
<option name="myUpdateName" value="Merged with property conflicts" />
<option name="myStatusName" value="Will be merged with property conflicts" />
<option name="mySupportsDeletion" value="false" />
<option name="myCanBeAbsent" value="false" />
<option name="myId" value="MERGED_WITH_PROPERTY_CONFLICT" />
</FILE-GROUP>
<FILE-GROUP>
<option name="myUpdateName" value="Merged" />
<option name="myStatusName" value="Will be merged" />
<option name="mySupportsDeletion" value="false" />
<option name="myCanBeAbsent" value="false" />
<option name="myId" value="MERGED" />
</FILE-GROUP>
<FILE-GROUP>
<option name="myUpdateName" value="Not in repository" />
<option name="myStatusName" value="Not in repository" />
<option name="mySupportsDeletion" value="true" />
<option name="myCanBeAbsent" value="false" />
<option name="myId" value="UNKNOWN" />
</FILE-GROUP>
<FILE-GROUP>
<option name="myUpdateName" value="Locally added" />
<option name="myStatusName" value="Locally added" />
<option name="mySupportsDeletion" value="false" />
<option name="myCanBeAbsent" value="false" />
<option name="myId" value="LOCALLY_ADDED" />
</FILE-GROUP>
<FILE-GROUP>
<option name="myUpdateName" value="Locally removed" />
<option name="myStatusName" value="Locally removed" />
<option name="mySupportsDeletion" value="false" />
<option name="myCanBeAbsent" value="false" />
<option name="myId" value="LOCALLY_REMOVED" />
</FILE-GROUP>
<FILE-GROUP>
<option name="myUpdateName" value="Switched" />
<option name="myStatusName" value="Switched" />
<option name="mySupportsDeletion" value="false" />
<option name="myCanBeAbsent" value="false" />
<option name="myId" value="SWITCHED" />
</FILE-GROUP>
</UpdatedFiles>
</component>
<component name="RunDashboard">
<option name="ruleStates">
<list>
......@@ -324,7 +433,14 @@
<option name="project" value="LOCAL" />
<updated>1539160890028</updated>
</task>
<option name="localTasksCounter" value="15" />
<task id="LOCAL-00015" summary="readme">
<created>1539161146400</created>
<option name="number" value="00015" />
<option name="presentableId" value="LOCAL-00015" />
<option name="project" value="LOCAL" />
<updated>1539161146400</updated>
</task>
<option name="localTasksCounter" value="16" />
<servers />
</component>
<component name="ToolWindowManager">
......@@ -337,13 +453,13 @@
<window_info anchor="right" id="Capture Analysis" order="4" />
<window_info anchor="bottom" id="Event Log" order="8" sideWeight="0.5042644" side_tool="true" weight="0.3297062" />
<window_info anchor="bottom" id="Dart Analysis" order="8" weight="0.3297062" />
<window_info active="true" anchor="bottom" id="Run" order="2" visible="true" weight="0.3293348" />
<window_info anchor="bottom" id="Run" order="2" visible="true" weight="0.3293348" />
<window_info anchor="bottom" id="Version Control" order="8" weight="0.32861805" />
<window_info anchor="bottom" id="Terminal" order="8" sideWeight="0.49573562" weight="0.32824427" />
<window_info anchor="right" id="Flutter Outline" order="4" />
<window_info id="Capture Tool" order="3" />
<window_info id="Designer" order="3" />
<window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.25" />
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info anchor="right" id="Fabric" order="4" />
<window_info anchor="right" id="Theme Preview" order="4" />
......@@ -387,22 +503,15 @@
</breakpoint-manager>
</component>
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/lib/flutter_screenutil.dart">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="1890">
<caret line="70" column="26" selection-start-line="70" selection-start-column="26" selection-end-line="70" selection-end-column="26" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/example/lib/flutter_screenutil.dart" />
<entry file="file://$PROJECT_DIR$/README-EN.md">
<entry file="file://$PROJECT_DIR$/README.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="2457">
<caret line="91" column="29" lean-forward="true" selection-start-line="91" selection-start-column="29" selection-end-line="91" selection-end-column="29" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/README.md">
<entry file="file://$PROJECT_DIR$/README_CN.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="3240">
<caret line="120" column="6" selection-start-line="120" selection-start-column="6" selection-end-line="120" selection-end-column="6" />
......@@ -430,7 +539,7 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/README.md">
<entry file="file://$PROJECT_DIR$/README_CN.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="3240">
<caret line="120" column="6" selection-start-line="120" selection-start-column="6" selection-end-line="120" selection-end-column="6" />
......@@ -479,7 +588,7 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/README.md">
<entry file="file://$PROJECT_DIR$/README_CN.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="3240">
<caret line="120" column="6" lean-forward="true" selection-start-line="120" selection-start-column="6" selection-end-line="120" selection-end-column="6" />
......@@ -498,7 +607,7 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/README.md">
<entry file="file://$PROJECT_DIR$/README_CN.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="2727">
<caret line="101" column="10" selection-start-line="101" selection-start-column="10" selection-end-line="101" selection-end-column="10" />
......@@ -531,7 +640,7 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/README.md">
<entry file="file://$PROJECT_DIR$/README_CN.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="2727">
<caret line="101" column="10" lean-forward="true" selection-start-line="101" selection-start-column="10" selection-end-line="101" selection-end-column="10" />
......@@ -557,7 +666,7 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/README.md">
<entry file="file://$PROJECT_DIR$/README_CN.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="2160">
<caret line="80" column="16" lean-forward="true" selection-start-line="80" selection-start-column="16" selection-end-line="80" selection-end-column="16" />
......@@ -682,34 +791,39 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/README.md">
<entry file="file://$PROJECT_DIR$/effect.png">
<provider selected="true" editor-type-id="images">
<state />
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/example/lib/main.dart">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="378">
<caret line="14" column="11" selection-start-line="14" selection-end-line="14" selection-end-column="11" />
<state relative-caret-position="27">
<caret line="71" column="18" lean-forward="true" selection-start-line="71" selection-start-column="18" selection-end-line="71" selection-end-column="18" />
<folding>
<element signature="e#0#39#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/README-EN.md">
<entry file="file://$PROJECT_DIR$/pubspec.yaml">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="243">
<caret line="21" lean-forward="true" selection-start-line="21" selection-end-line="21" />
<state relative-caret-position="270">
<caret line="10" column="10" lean-forward="true" selection-start-line="10" selection-start-column="10" selection-end-line="10" selection-end-column="10" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/pubspec.yaml">
<entry file="file://$PROJECT_DIR$/README.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="432">
<caret line="16" selection-start-line="16" selection-end-line="16" />
<state relative-caret-position="108">
<caret line="4" column="17" selection-start-line="4" selection-start-column="17" selection-end-line="4" selection-end-column="17" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/example/lib/main.dart">
<entry file="file://$PROJECT_DIR$/README_CN.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="432">
<caret line="86" column="12" selection-start-line="86" selection-start-column="12" selection-end-line="86" selection-end-column="12" />
<folding>
<element signature="e#0#39#0" expanded="true" />
</folding>
<state relative-caret-position="81">
<caret line="3" lean-forward="true" selection-start-line="3" selection-end-line="3" />
</state>
</provider>
</entry>
......
README.md
浏览文件 @ b71732dd
# flutter_ScreenUtil
**flutter 屏幕适配方案**
**flutter Screen adaptation scheme**
[README of English](/README-EN.md)
[中文文档](/README_CN.md)
github: https://github.com/OpenFlutter/flutter_ScreenUtil </br>
csdn博客工具介绍:https://blog.csdn.net/u011272795/article/details/82795477
## 使用方法:
## Usege:
### 安装依赖：
安装之前请查看最新版本
### Add dependency：
Please check the latest version before installation.
```
dependencies:
flutter:
sdk: flutter
# 添加依赖
# add flutter_ScreenUtil
flutter_screenutil: ^0.2.0
```
### 在每个使用的地方导入包：
### Add the following imports to your Dart code:
```
import 'package:flutter_screenutil/flutter_screenutil.dart';
```
### 初始化设置尺寸
在使用之前请设置好设计稿的宽度和高度，传入设计稿的宽度和高度(单位px)
如果不设置则使用默认尺寸，默认为1080*1920
一定在MaterialApp的home中的页面设置，以保证在每次使用之前设置好了适配尺寸:
### Initialize the setup size
Please set the width and height of the design draft before use, the width and height of the design draft (unit px).
If not set, the default size is used. The default is 1080*1920.
Be sure to set the page in the MaterialApp's home to ensure that the fit size is set before each use:
```
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(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)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
```
### 使用：
### Use：
适配尺寸：
Fit size：
```
//传入设计稿的px尺寸：
适配后的宽度width: ScreenUtil().setWidth(540),
适配后的高度height: ScreenUtil().setHeight(200),
Pass the px size of the design draft：
Width after adaptation: ScreenUtil().setWidth(540),
Height after adaptation: ScreenUtil().setHeight(200),
例如:
//for example:
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
...
),
```
其他相关api：
Other related apis：
```
ScreenUtil.pixelRatio //设备的像素密度
ScreenUtil.screenWidth //设备宽度
ScreenUtil.screenHeight //设备高度
ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil.pixelRatio //Device pixel density
ScreenUtil.screenWidth //Device width
ScreenUtil.screenHeight //Device height
ScreenUtil.bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen
ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px
ScreenUtil().scaleWidth //宽度相对于设计稿放大的倍数
ScreenUtil().scaleHeight //高度相对于设计稿放大的倍数
ScreenUtil().scaleWidth //The width is enlarged relative to the design draft
ScreenUtil().scaleHeight //Height relative to the magnification of the design draft
```
```
//导入
//import
import 'package:flutter_screenutil/flutter_screenutil.dart';
...
@override
Widget build(BuildContext context) {
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
//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)
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}'); //高度相对于设计稿放大的倍数
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
return new Scaffold(
appBar: new AppBar(
......@@ -97,7 +98,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
'我的宽度${ScreenUtil().setWidth(375)}dp',
'My width:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(color: Colors.white),
),
),
......@@ -105,18 +106,18 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child: Text('我的宽度${ScreenUtil().setWidth(375)}dp',
child: Text('My width:${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}'),
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('The width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}'),
Text('Height relative to the magnification of the design draft:${ScreenUtil().scaleHeight}'),
],
),
),
......@@ -124,11 +125,11 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
}
```
### 使用示例:
### example:
[example demo](/example)
效果:
effect:
![效果](demo.PNG)
![效果](effect.png)
README-EN.md → README_CN.md
浏览文件 @ b71732dd
# flutter_ScreenUtil
**flutter Screen adaptation scheme**
**flutter 屏幕适配方案**
[中文文档](/README.md)
[README of English](/README.md)
github: https://github.com/OpenFlutter/flutter_ScreenUtil </br>
csdn博客工具介绍:https://blog.csdn.net/u011272795/article/details/82795477
## Usege:
## 使用方法:
### Add dependency：
Please check the latest version before installation.
### 安装依赖：
安装之前请查看最新版本
```
dependencies:
flutter:
sdk: flutter
# add flutter_ScreenUtil
# 添加依赖
flutter_screenutil: ^0.2.0
```
### Add the following imports to your Dart code:
### 在每个使用的地方导入包：
```
import 'package:flutter_screenutil/flutter_screenutil.dart';
```
### Initialize the setup size
Please set the width and height of the design draft before use, the width and height of the design draft (unit px).
If not set, the default size is used. The default is 1080*1920.
Be sure to set the page in the MaterialApp's home to ensure that the fit size is set before each use:
### 初始化设置尺寸
在使用之前请设置好设计稿的宽度和高度，传入设计稿的宽度和高度(单位px)
如果不设置则使用默认尺寸，默认为1080*1920
一定在MaterialApp的home中的页面设置，以保证在每次使用之前设置好了适配尺寸:
```
//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)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
```
### Use：
### 使用：
Fit size：
适配尺寸：
```
Pass the px size of the design draft：
Width after adaptation: ScreenUtil().setWidth(540),
Height after adaptation: ScreenUtil().setHeight(200),
//传入设计稿的px尺寸：
适配后的宽度width: ScreenUtil().setWidth(540),
适配后的高度height: ScreenUtil().setHeight(200),
//for example:
例如:
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
...
),
```
Other related apis：
其他相关api：
```
ScreenUtil.pixelRatio //Device pixel density
ScreenUtil.screenWidth //Device width
ScreenUtil.screenHeight //Device height
ScreenUtil.bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen
ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px
ScreenUtil.pixelRatio //设备的像素密度
ScreenUtil.screenWidth //设备宽度
ScreenUtil.screenHeight //设备高度
ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil().scaleWidth //The width is enlarged relative to the design draft
ScreenUtil().scaleHeight //Height relative to the magnification of the design draft
ScreenUtil().scaleWidth //宽度相对于设计稿放大的倍数
ScreenUtil().scaleHeight //高度相对于设计稿放大的倍数
```
```
//import
//导入
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('设备宽度:${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(
......@@ -98,7 +97,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
'My width:${ScreenUtil().setWidth(375)}dp',
'我的宽度${ScreenUtil().setWidth(375)}dp',
style: TextStyle(color: Colors.white),
),
),
......@@ -106,18 +105,18 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.blue,
child: Text('My width:${ScreenUtil().setWidth(375)}dp',
child: Text('我的宽度${ScreenUtil().setWidth(375)}dp',
style: TextStyle(color: Colors.white)),
),
],
),
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('The width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}'),
Text('Height relative to the magnification of the design draft:${ScreenUtil().scaleHeight}'),
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}'),
],
),
),
......@@ -125,11 +124,11 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
}
```
### example:
### 使用示例:
[example demo](/example)
effect:
效果:
![效果](effect.png)
![效果](demo.PNG)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或