v0.1.5 屏幕适配

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.1.5
+
+* TODO: Screen adaptation，屏幕适配.
+
 ## 0.1.4
 
 * TODO: ScreenUtil update. UI MyAppBar.

README.md

@@ -4,6 +4,21 @@
 ## [flustars] Flutter常用工具类库。主要对第三方库封装，以便于使用。如果你有好的工具类欢迎PR.  
 
 ## 更新说明  
+v0.1.5(2018.12.14)  
+ScreenUtil新增屏幕适配。
+```
+//配置设计稿尺寸 默认 360.0 / 640.0 / 3.0
+setDesignWHD(_designW,_designH,_designD);
+
+//返回根据屏幕宽适配后尺寸（单位 dp or pt）
+ScreenUtil.getInstance().getWidth(100.0);  
+
+//返回根据屏幕高适配后尺寸（单位 dp or pt）
+ScreenUtil.getInstance().getHeight(100.0);  
+
+//返回根据屏幕宽适配后字体尺寸
+ScreenUtil.getInstance().getSp(12.0);  
+```
 v0.1.4(2018.11.22)  
 ScreenUtil不依赖context获取屏幕数据。  
 
@@ -16,7 +31,7 @@ ScreenUtil不依赖context获取屏幕数据。
 
 ### [flustars](https://github.com/Sky24n/flustars)  
  1、SpUtil       : SharedPreferences 工具类.  
- 2、ScreenUtil   : 获取屏幕宽、高、密度，AppBar高，状态栏高度，屏幕方向.  
+ 2、ScreenUtil   : 屏幕适配，获取屏幕宽、高、密度，AppBar高，状态栏高度，屏幕方向.  
  3、WidgetUtil   : 获取Widget宽高，在屏幕上的坐标.  
 
 ### [common_utils](https://github.com/Sky24n/common_utils)  
@@ -66,6 +81,11 @@ isInitialized
 
 * #### ScreenUtil
 ```
+getWidth                  : 返回根据屏幕宽适配后尺寸.
+getHeight                 : 返回根据屏幕高适配后尺寸.
+getWidthPx                : 返回根据屏幕宽适配后尺寸.
+getHeightPx               : 返回根据屏幕高适配后尺寸.
+getSp                     : 返回根据屏幕宽适配后字体尺寸.
 screenWidth               : 获取屏幕宽.
 screenHeight              : 获取屏幕高.
 screenDensity             : 获取屏幕密度.

example/lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:flustars/flustars.dart';
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
 void main() => runApp(new MyApp());
@@ -33,14 +34,136 @@ class _MyAppState extends State<MyApp> {
   @override
   Widget build(BuildContext context) {
     return new MaterialApp(
-      home: new Scaffold(
-        appBar: new AppBar(
-          title: const Text('Plugin example app'),
-        ),
-        body: new Center(
-          child: new Text('username: $_userName'),
-        ),
+      home: new MainPage(),
+    );
+
+//    return new MaterialApp(
+//      home: new Scaffold(
+//        appBar: new AppBar(
+//          title: const Text('Plugin example app'),
+//        ),
+//        body: new Center(
+//          child: new Text('username: $_userName'),
+//        ),
+//        floatingActionButton: new FloatingActionButton(onPressed: () {
+//          Navigator.push(
+//              context, new CupertinoPageRoute(builder: (ctx) => TestPage()));
+//        }),
+//      ),
+//    );
+  }
+}
+
+class MainPage extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return new MainPageState();
+  }
+}
+
+class MainPageState extends State<MainPage> {
+  @override
+  Widget build(BuildContext context) {
+    double width = ScreenUtil.getInstance().screenWidth;
+    double height = ScreenUtil.getInstance().screenHeight;
+    double density = ScreenUtil.getInstance().screenDensity;
+    double tempW = ScreenUtil.getInstance().getWidth(360.0);
+    double tempH = ScreenUtil.getInstance().getHeight(360.0);
+
+    print(
+        "width: $width, height: $height, density: $density, tempW: $tempW, tempH: $tempH");
+    double _width = width * density;
+    double _height = height * density;
+    double __tempW = ScreenUtil.getInstance().getWidthPx(90.0);
+    print(
+        "_width: $_width, height: $_height, __tempW: $__tempW, tempW: $tempW, tempH: $tempH");
+
+    return new Scaffold(
+      appBar: new AppBar(),
+      body: new Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: <Widget>[
+          new Container(
+            width: 360.0,
+            height: 50,
+            color: Colors.grey,
+            child: new Center(
+              child: new Text(
+                "你好你好你好",
+                style: new TextStyle(fontSize: 24.0),
+              ),
+            ),
+          ),
+          new Container(
+            width: ScreenUtil.getInstance().getWidth(360.0),
+            height: 50,
+            color: Colors.grey,
+            child: new Center(
+              child: new Text(
+                "你好你好你好",
+                style: new TextStyle(fontSize: 24.0),
+              ),
+            ),
+          ),
+          new Container(
+            width: 100,
+            height: 100,
+            color: Colors.grey,
+            child: new Center(
+              child: new Text(
+                "你好你好你好",
+                style: new TextStyle(fontSize: 24.0),
+              ),
+            ),
+          ),
+          new Container(
+            margin: EdgeInsets.only(top: 10.0),
+            width: ScreenUtil.getInstance().getWidth(100.0),
+            height: ScreenUtil.getInstance().getHeight(100.0),
+            color: Colors.grey,
+            child: new Center(
+              child: new Text(
+                "你好你好你好",
+                style: new TextStyle(fontSize: 24.0),
+              ),
+            ),
+          ),
+          new Container(
+            margin: EdgeInsets.only(top: 10.0),
+            width: ScreenUtil.getInstance().getWidth(100.0),
+            height: ScreenUtil.getInstance().getHeight(100.0),
+            color: Colors.grey,
+            child: new Center(
+              child: new Text(
+                "你好你好你好",
+                style: new TextStyle(
+                    fontSize: ScreenUtil.getInstance().getSp(24.0)),
+              ),
+            ),
+          ),
+        ],
       ),
     );
   }
 }
+
+class TestPage extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return new TestPageState();
+  }
+}
+
+class TestPageState extends State<TestPage> {
+  @override
+  Widget build(BuildContext context) {
+    double width = ScreenUtil.getInstance().screenWidth;
+    double height = ScreenUtil.getInstance().screenHeight;
+
+    print("width: $width, height: $height");
+
+    return new Scaffold(
+      body: new AppBar(),
+    );
+  }
+}

lib/src/screen_util.dart

@@ -4,68 +4,135 @@ import 'dart:ui' as ui show window;
 /**
  * @Author: thl
  * @GitHub: https://github.com/Sky24n
+ * @Email: 863764940@qq.com
  * @Description: Screen Util.
  * @Date: 2018/9/8
  */
 
+///默认设计稿尺寸（单位 dp or pt）
+double _designW = 360.0;
+double _designH = 640.0;
+double _designD = 3.0;
+
+/**
+ * 配置设计稿尺寸（单位 dp or pt）
+ * w 宽
+ * h 高
+ * density 像素密度
+ */
+void setDesignWHD(double w, double h, {double density: 3.0}) {
+  _designW = w;
+  _designH = h;
+  _designD = density;
+}
+
 ///
 class ScreenUtil {
-  static double _screenWidth;
-  static double _screenHeight;
-  static double _screenDensity;
-  static double _statusBarHeight;
-  static double _appBarHeight;
-  static MediaQueryData _mediaQueryData;
+  double _screenWidth;
+  double _screenHeight;
+  double _screenDensity;
+  double _statusBarHeight;
+  double _bottomBarHeight;
+  double _appBarHeight;
+  double _textScaleFactor;
+  MediaQueryData _mediaQueryData;
 
-  static ScreenUtil singleton = new ScreenUtil();
+  static final ScreenUtil _singleton = ScreenUtil._init();
 
   static ScreenUtil getInstance() {
-    return singleton;
+    return _singleton;
   }
 
-  ScreenUtil() {
-    init();
-  }
-
-  void init() {
+  ScreenUtil._init() {
     MediaQueryData mediaQuery = MediaQueryData.fromWindow(ui.window);
     _mediaQueryData = mediaQuery;
     _screenWidth = mediaQuery.size.width;
     _screenHeight = mediaQuery.size.height;
     _screenDensity = mediaQuery.devicePixelRatio;
     _statusBarHeight = mediaQuery.padding.top;
+    _bottomBarHeight = mediaQuery.padding.bottom;
+    _textScaleFactor = mediaQuery.textScaleFactor;
     _appBarHeight = kToolbarHeight;
   }
 
-  ///screen width
+  /// screen width
+  /// 屏幕 宽
   double get screenWidth => _screenWidth;
 
-  ///screen height
+  /// screen height
+  /// 屏幕 高
   double get screenHeight => _screenHeight;
 
-  ///appBar height
+  /// appBar height
+  /// appBar 高
   double get appBarHeight => _appBarHeight;
 
-  ///screen density
+  /// screen density
+  /// 屏幕 像素密度
   double get screenDensity => _screenDensity;
 
-  ///status bar Height
+  /// status bar Height
+  /// 状态栏高度
   double get statusBarHeight => _statusBarHeight;
 
+  /// bottom bar Height
+  double get bottomBarHeight => _bottomBarHeight;
+
+  /// media Query Data
   MediaQueryData get mediaQueryData => _mediaQueryData;
 
+  /// screen width
+  /// 当前屏幕 宽
   static double getScreenWidth(BuildContext context) {
     MediaQueryData mediaQuery = MediaQuery.of(context);
     return mediaQuery.size.width;
   }
 
+  /// screen height
+  /// 当前屏幕 高
   static double getScreenHeight(BuildContext context) {
     MediaQueryData mediaQuery = MediaQuery.of(context);
     return mediaQuery.size.height;
   }
 
+  /// Orientation
+  /// 设备方向(portrait, landscape)
   static Orientation getOrientation(BuildContext context) {
     MediaQueryData mediaQuery = MediaQuery.of(context);
     return mediaQuery.orientation;
   }
+
+  /// 返回根据屏幕宽适配后尺寸（单位 dp or pt）
+  /// size 单位 dp or pt
+  double getWidth(double size) {
+    return size * _screenWidth / _designW;
+  }
+
+  /// 返回根据屏幕高适配后尺寸 （单位 dp or pt）
+  /// size 单位 dp or pt
+  double getHeight(double size) {
+    return size * _screenHeight / _designH;
+  }
+
+  /// 返回根据屏幕宽适配后尺寸（单位 dp or pt）
+  /// sizePx 单位px
+  double getWidthPx(double sizePx) {
+    return sizePx * _screenWidth / (_designW * _designD);
+  }
+
+  /// 返回根据屏幕高适配后尺寸（单位 dp or pt）
+  /// sizePx 单位px
+  double getHeightPx(double sizePx) {
+    return sizePx * _screenHeight / (_designH * _designD);
+  }
+
+  /// 返回根据屏幕宽适配后字体尺寸
+  /// fontSize 字体尺寸
+  /// sySystem 是否跟随系统字体大小设置，默认 true。
+  double getSp(double fontSize, {bool sySystem: true}) {
+    return (sySystem ? _textScaleFactor : 1.0) *
+        fontSize *
+        _screenWidth /
+        _designW;
+  }
 }

lib/src/sp_util.dart

@@ -6,6 +6,7 @@ import 'package:synchronized/synchronized.dart';
 /**
  * @Author: thl
  * @GitHub: https://github.com/Sky24n
+ * @Email: 863764940@qq.com
  * @Description: Sp Util.
  * @Date: 2018/9/8
  */

lib/src/widget_util.dart

@@ -3,6 +3,7 @@ import 'package:flutter/widgets.dart';
 /**
  * @Author: thl
  * @GitHub: https://github.com/Sky24n
+ * @Email: 863764940@qq.com
  * @Description: Widget Util.
  * @Date: 2018/9/10
  */

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flustars
 description: Flutter common utils library. SpUtil, ScreenUtil, WidgetUtil.
-version: 0.1.4
+version: 0.1.5
 author: thl <863764940@qq.com>
 homepage: https://github.com/Sky24n/flustars