Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
__卓原
flutter_screenutil
提交
e3d2574e
F
flutter_screenutil
项目概览
__卓原
/
flutter_screenutil
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
3
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
F
flutter_screenutil
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
3
Issue
3
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
e3d2574e
编写于
9月 29, 2018
作者:
李
李卓原
浏览文件
操作
浏览文件
下载
差异文件
Merge remote-tracking branch 'origin/master'
# Conflicts: # README.md # example/pubspec.yaml
上级
eb6f7404
62d8b7d3
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
135 addition
and
126 deletion
+135
-126
README.md
README.md
+132
-124
example/README.md
example/README.md
+2
-0
example/pubspec.yaml
example/pubspec.yaml
+1
-2
未找到文件。
README.md
浏览文件 @
e3d2574e
# flutter_ScreenUtil
**flutter 屏幕适配方案**
github: https://github.com/lizhuoyuan/flutter_ScreenUtil
</br>
csdn博客工具介绍:https://blog.csdn.net/u011272795/article/details/82795477
## 使用方法:
### 安装依赖:
```
dependencies:
flutter:
sdk: flutter
# 添加依赖
flutter_screenutil:
git:
url: git://github.com/lizhuoyuan/flutter_ScreenUtil
```
### 在每个使用的地方导入包:
```
import 'package:flutter_screenutil/flutter_screenutil.dart';
```
### 初始化设置尺寸
在使用之前请设置好设计稿的宽度和高度,传入设计稿的宽度和高度(单位px)
如果不设置则使用默认尺寸,默认为1080
*
1920
一定在MaterialApp的home中的页面设置,以保证在每次使用之前设置好了适配尺寸:
```
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
```
### 使用:
适配尺寸:
```
//传入设计稿的px尺寸:
width: ScreenUtil().setWidth(540),
height: ScreenUtil().setHeight(200),
```
其他相关api:
```
ScreenUtil.pixelRatio //设备的像素密度
ScreenUtil.screenWidth //设备宽度
ScreenUtil.screenHeight //设备高度
ScreenUtil.bottomBarHeight //底部安全区距离,适用于全面屏下面有按键的
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil().scaleWidth //宽度相对于设计稿放大的倍数
ScreenUtil().scaleHeight //高度相对于设计稿放大的倍数
```
```
//导入
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'),
],
),
),
);
}
```
### 使用示例:
[
example demo
](
/example
)
效果:
![
效果
](
demo.PNG
)
# flutter_ScreenUtil
**flutter 屏幕适配方案**
github: https://github.com/OpenFlutter/flutter_ScreenUtil
</br>
csdn博客工具介绍:https://blog.csdn.net/u011272795/article/details/82795477
## 使用方法:
### 安装依赖:
```
dependencies:
flutter:
sdk: flutter
# 添加依赖
flutter_screenutil:
git:
url: git://github.com/openflutter/flutter_screenutil
```
### 在每个使用的地方导入包:
```
import 'package:flutter_screenutil/flutter_screenutil.dart';
```
### 初始化设置尺寸
在使用之前请设置好设计稿的宽度和高度,传入设计稿的宽度和高度(单位px)
如果不设置则使用默认尺寸,默认为1080
*
1920
一定在MaterialApp的home中的页面设置,以保证在每次使用之前设置好了适配尺寸:
```
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
```
### 使用:
适配尺寸:
```
//传入设计稿的px尺寸:
适配后的宽度width: ScreenUtil().setWidth(540),
适配后的高度height: ScreenUtil().setHeight(200),
例如:
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
),
```
其他相关api:
```
ScreenUtil.pixelRatio //设备的像素密度
ScreenUtil.screenWidth //设备宽度
ScreenUtil.screenHeight //设备高度
ScreenUtil.bottomBarHeight //底部安全区距离,适用于全面屏下面有按键的
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil().scaleWidth //宽度相对于设计稿放大的倍数
ScreenUtil().scaleHeight //高度相对于设计稿放大的倍数
```
```
//导入
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}'),
],
),
),
);
}
```
### 使用示例:
[
example demo
](
/example
)
效果:
![
效果
](
demo.PNG
)
example/README.md
浏览文件 @
e3d2574e
...
...
@@ -2,6 +2,8 @@
flutter_screenutil的使用示例
![
效果
](
../demo.PNG
)
## Getting Started
For help getting started with Flutter, view our online
...
...
example/pubspec.yaml
浏览文件 @
e3d2574e
...
...
@@ -21,8 +21,7 @@ dependencies:
cupertino_icons
:
^0.1.2
flutter_screenutil
:
git
:
url
:
git://github.com/lizhuoyuan/flutter_screenUtil
common_utils
:
^1.0.2
url
:
git://github.com/openflutter/flutter_screenutil
dev_dependencies
:
flutter_test
:
sdk
:
flutter
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录