李卓原

4.0.2

close #180
1 -<!--  
2 - * @Author: zhuoyuan93@gmail.com  
3 - * @Date: 2018-10-16 19:43:03  
4 - * @LastEditors: zhuoyuan93@gmail.com  
5 - * @LastEditTime: 2020年6月20日 11:20:02  
6 - * @Description: Update log  
7 - --> 1 +# 4.0.2
  2 +- add r(),adapt according to the smaller of width or height
8 3
9 # 4.0.1 4 # 4.0.1
10 - Modify the initialization unit to dp 5 - Modify the initialization unit to dp
@@ -79,6 +79,7 @@ ScreenUtil.init(constraints, designSize: Size(360, 690), allowFontScaling: true) @@ -79,6 +79,7 @@ ScreenUtil.init(constraints, designSize: Size(360, 690), allowFontScaling: true)
79 ```dart 79 ```dart
80 ScreenUtil().setWidth(540) (dart sdk>=2.6 : 540.w) //Adapted to screen width 80 ScreenUtil().setWidth(540) (dart sdk>=2.6 : 540.w) //Adapted to screen width
81 ScreenUtil().setHeight(200) (dart sdk>=2.6 : 200.h) //Adapted to screen height , under normal circumstances, the height still uses x.w 81 ScreenUtil().setHeight(200) (dart sdk>=2.6 : 200.h) //Adapted to screen height , under normal circumstances, the height still uses x.w
  82 + ScreenUtil().radius(200) (dart sdk>=2.6 : 200.r) //Adapt according to the smaller of width or height
82 ScreenUtil().setSp(24) (dart sdk>=2.6 : 24.sp) //Adapter font 83 ScreenUtil().setSp(24) (dart sdk>=2.6 : 24.sp) //Adapter font
83 ScreenUtil().setSp(24, allowFontScalingSelf: true) (dart sdk>=2.6 : 24.ssp) //Adapter font(fonts will scale to respect Text Size accessibility settings) 84 ScreenUtil().setSp(24, allowFontScalingSelf: true) (dart sdk>=2.6 : 24.ssp) //Adapter font(fonts will scale to respect Text Size accessibility settings)
84 ScreenUtil().setSp(24, allowFontScalingSelf: false) (dart sdk>=2.6 : 24.nsp) //Adapter font(fonts will not scale to respect Text Size accessibility settings) 85 ScreenUtil().setSp(24, allowFontScalingSelf: false) (dart sdk>=2.6 : 24.nsp) //Adapter font(fonts will not scale to respect Text Size accessibility settings)
@@ -129,22 +130,30 @@ The height can also use setWidth to ensure that it is not deformed(when you want @@ -129,22 +130,30 @@ The height can also use setWidth to ensure that it is not deformed(when you want
129 130
130 setHeight method is mainly adapted in height, you want to control the height and actuality of a screen on the UIUsed when the same is displayed. 131 setHeight method is mainly adapted in height, you want to control the height and actuality of a screen on the UIUsed when the same is displayed.
131 132
  133 +Generally speaking, 50.w!=50.h.
  134 +
132 ```dart 135 ```dart
133 //for example: 136 //for example:
134 137
135 ///If you want to display a square: 138 ///If you want to display a square:
136 -///rectangle 139 +///The UI may show a rectangle:
137 Container( 140 Container(
138 - width: ScreenUtil().setWidth(375),  
139 - height: ScreenUtil().setWidth(200), 141 + width: 375.w,
  142 + height: 375.h,
140 ), 143 ),
141 144
142 ////If you want to display a square: 145 ////If you want to display a square:
143 Container( 146 Container(
144 - width: ScreenUtil().setWidth(300), 147 + width: 300.w,
145 height: 300.w, 148 height: 300.w,
146 ), 149 ),
147 150
  151 +or
  152 +
  153 +Container(
  154 + width: 300.r,
  155 + height: 300.r,
  156 + ),
148 ``` 157 ```
149 158
150 159
@@ -83,6 +83,7 @@ ScreenUtil.init(constraints, designSize: Size(360,690), allowFontScaling: true); @@ -83,6 +83,7 @@ ScreenUtil.init(constraints, designSize: Size(360,690), allowFontScaling: true);
83 ```dart 83 ```dart
84 ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸 84 ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸
85 ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸(一般根据宽度适配即可) 85 ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸(一般根据宽度适配即可)
  86 + ScreenUtil().radius(200) (sdk>=2.6 : 200.r) //根据宽度或高度中的较小者进行调整
86 ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //适配字体 87 ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //适配字体
87 ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //适配字体(根据系统的“字体大小”辅助选项来进行缩放) 88 ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //适配字体(根据系统的“字体大小”辅助选项来进行缩放)
88 ScreenUtil().setSp(24, allowFontScalingSelf: false) (sdk>=2.6 : 24.nsp) //适配字体(不会根据系统的“字体大小”辅助选项来进行缩放) 89 ScreenUtil().setSp(24, allowFontScalingSelf: false) (sdk>=2.6 : 24.nsp) //适配字体(不会根据系统的“字体大小”辅助选项来进行缩放)
@@ -110,6 +111,8 @@ ScreenUtil.init(constraints, designSize: Size(360,690), allowFontScaling: true); @@ -110,6 +111,8 @@ ScreenUtil.init(constraints, designSize: Size(360,690), allowFontScaling: true);
110 111
111 根据屏幕高度适配 `height: ScreenUtil().setHeight(200)`, 一般来说,控件高度也根据宽度进行适配 112 根据屏幕高度适配 `height: ScreenUtil().setHeight(200)`, 一般来说,控件高度也根据宽度进行适配
112 113
  114 +一般来说,50.w!=50.h
  115 +
113 **注意** 116 **注意**
114 117
115 高度也根据setWidth来做适配可以保证不变形(当你想要一个正方形的时候) 118 高度也根据setWidth来做适配可以保证不变形(当你想要一个正方形的时候)
@@ -119,16 +122,16 @@ setHeight譁ケ豕穂クサ隕∵弍蝨ィ鬮伜コヲ荳願ソ幄。碁る, 蝨ィ菴諠ウ謗ァ蛻カUI荳贋ク螻冗噪 @@ -119,16 +122,16 @@ setHeight譁ケ豕穂クサ隕∵弍蝨ィ鬮伜コヲ荳願ソ幄。碁る, 蝨ィ菴諠ウ謗ァ蛻カUI荳贋ク螻冗噪
119 例如: 122 例如:
120 123
121 ```dart 124 ```dart
122 -//UI上是长方形: 125 +//UI可能显示长方形:
123 Container( 126 Container(
124 - width: ScreenUtil().setWidth(375),  
125 - height: ScreenUtil().setHeight(375), 127 + width: 375.w,
  128 + height: 375.h,
126 ), 129 ),
127 130
128 //如果你想显示一个正方形: 131 //如果你想显示一个正方形:
129 Container( 132 Container(
130 - width: ScreenUtil().setWidth(300),  
131 - height: ScreenUtil().setWidth(300), 133 + width: 300.r,
  134 + height: 300.r,
132 ), 135 ),
133 ``` 136 ```
134 137
@@ -79,6 +79,7 @@ ScreenUtil.init(constraints, designSize: Size(360,690), allowFontScaling: true); @@ -79,6 +79,7 @@ ScreenUtil.init(constraints, designSize: Size(360,690), allowFontScaling: true);
79 ```dart 79 ```dart
80 ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //Adapted to screen width 80 ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //Adapted to screen width
81 ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //Adapted to screen height 81 ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //Adapted to screen height
  82 + ScreenUtil().radius(200) (dart sdk>=2.6 : 200.r) //Adapt according to the smaller of width or height
82 ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //Adapter font 83 ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //Adapter font
83 ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //Adapter font(fonts will scale to respect Text Size accessibility settings) 84 ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //Adapter font(fonts will scale to respect Text Size accessibility settings)
84 ScreenUtil().setSp(24, allowFontScalingSelf: false) (sdk>=2.6 : 24.nsp) //Adapter font(fonts will not scale to respect Text Size accessibility settings) 85 ScreenUtil().setSp(24, allowFontScalingSelf: false) (sdk>=2.6 : 24.nsp) //Adapter font(fonts will not scale to respect Text Size accessibility settings)
@@ -129,19 +130,21 @@ Altura também é adaptada de acordo com o setWidth para garantir que não tenha @@ -129,19 +130,21 @@ Altura também é adaptada de acordo com o setWidth para garantir que não tenha
129 130
130 O método setHeight é a principal forma de adaptar a altura, se quiser controlar a altura e a realidade de uma tela na UiUsed quando a mesma for exibida. 131 O método setHeight é a principal forma de adaptar a altura, se quiser controlar a altura e a realidade de uma tela na UiUsed quando a mesma for exibida.
131 132
  133 +Generally speaking, 50.w!=50.h.
  134 +
132 ```dart 135 ```dart
133 //Exemplo: 136 //Exemplo:
134 //Retângulo 137 //Retângulo
135 Container( 138 Container(
136 - width: ScreenUtil().setWidth(375),  
137 - height: ScreenUtil().setHeight(200), 139 + width: 375.w,
  140 + height: 200.w,
138 ... 141 ...
139 ), 142 ),
140 143
141 ////Se quiser exibir um quadrado: 144 ////Se quiser exibir um quadrado:
142 Container( 145 Container(
143 - width: ScreenUtil().setWidth(300),  
144 - height: ScreenUtil().setWidth(300), 146 + width: 300.r,
  147 + height: 300.r,
145 ), 148 ),
146 149
147 ``` 150 ```
@@ -79,6 +79,18 @@ class _HomePageState extends State<HomePage> { @@ -79,6 +79,18 @@ class _HomePageState extends State<HomePage> {
79 ), 79 ),
80 ], 80 ],
81 ), 81 ),
  82 + Container(
  83 + padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
  84 + width: 100.r,
  85 + height: 100.r,
  86 + color: Colors.green,
  87 + child: Text('I am a square with a side length of 100',
  88 + style: TextStyle(
  89 + color: Colors.white,
  90 + fontSize: ScreenUtil().setSp(12),
  91 + ),
  92 + ),
  93 + ),
82 Text('Device width:${ScreenUtil().screenWidth}dp'), 94 Text('Device width:${ScreenUtil().screenWidth}dp'),
83 Text('Device height:${ScreenUtil().screenHeight}dp'), 95 Text('Device height:${ScreenUtil().screenHeight}dp'),
84 Text('Device pixel density:${ScreenUtil().pixelRatio}'), 96 Text('Device pixel density:${ScreenUtil().pixelRatio}'),
@@ -99,13 +111,16 @@ class _HomePageState extends State<HomePage> { @@ -99,13 +111,16 @@ class _HomePageState extends State<HomePage> {
99 Column( 111 Column(
100 crossAxisAlignment: CrossAxisAlignment.start, 112 crossAxisAlignment: CrossAxisAlignment.start,
101 children: <Widget>[ 113 children: <Widget>[
102 - Text( 114 + Container(
  115 + height: 32.h,
  116 + child: Text(
103 'My font size is 16sp on the design draft and will not change with the system.', 117 'My font size is 16sp on the design draft and will not change with the system.',
104 style: TextStyle( 118 style: TextStyle(
105 color: Colors.black, 119 color: Colors.black,
106 fontSize: 16.sp, 120 fontSize: 16.sp,
107 ), 121 ),
108 ), 122 ),
  123 + ),
109 Text( 124 Text(
110 'My font size is 16sp on the design draft and will change with the system.', 125 'My font size is 16sp on the design draft and will change with the system.',
111 style: TextStyle( 126 style: TextStyle(
@@ -66,8 +66,21 @@ class _HomePageState extends State<HomePage> { @@ -66,8 +66,21 @@ class _HomePageState extends State<HomePage> {
66 '我的设计稿高度: 200dp', 66 '我的设计稿高度: 200dp',
67 style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(12))), 67 style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(12))),
68 ), 68 ),
  69 +
69 ], 70 ],
70 ), 71 ),
  72 + Container(
  73 + padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
  74 + width: 100.r,
  75 + height: 100.r,
  76 + color: Colors.green,
  77 + child: Text('我是正方形,边长是100',
  78 + style: TextStyle(
  79 + color: Colors.white,
  80 + fontSize: ScreenUtil().setSp(12),
  81 + ),
  82 + ),
  83 + ),
71 Text('设备宽度:${ScreenUtil().screenWidth}dp'), 84 Text('设备宽度:${ScreenUtil().screenWidth}dp'),
72 Text('设备高度:${ScreenUtil().screenHeight}dp'), 85 Text('设备高度:${ScreenUtil().screenHeight}dp'),
73 Text('设备的像素密度:${ScreenUtil().pixelRatio}'), 86 Text('设备的像素密度:${ScreenUtil().pixelRatio}'),
@@ -3,6 +3,8 @@ @@ -3,6 +3,8 @@
3 * email: zhuoyuan93@gmail.com 3 * email: zhuoyuan93@gmail.com
4 */ 4 */
5 5
  6 +import 'dart:math';
  7 +
6 import 'package:flutter/material.dart'; 8 import 'package:flutter/material.dart';
7 9
8 class ScreenUtil { 10 class ScreenUtil {
@@ -84,7 +86,7 @@ class ScreenUtil { @@ -84,7 +86,7 @@ class ScreenUtil {
84 /// /// The ratio of actual height to UI design 86 /// /// The ratio of actual height to UI design
85 double get scaleHeight => _screenHeight / uiSize.height; 87 double get scaleHeight => _screenHeight / uiSize.height;
86 88
87 - double get scaleText => scaleWidth; 89 + double get scaleText => min(scaleWidth, scaleHeight);
88 90
89 /// 根据UI设计的设备宽度适配 91 /// 根据UI设计的设备宽度适配
90 /// 高度也可以根据这个来做适配可以保证不变形,比如你先要一个正方形的时候. 92 /// 高度也可以根据这个来做适配可以保证不变形,比如你先要一个正方形的时候.
@@ -103,14 +105,22 @@ class ScreenUtil { @@ -103,14 +105,22 @@ class ScreenUtil {
103 /// does not match the current style effect, or if there is a difference in shape. 105 /// does not match the current style effect, or if there is a difference in shape.
104 double setHeight(num height) => height * scaleHeight; 106 double setHeight(num height) => height * scaleHeight;
105 107
  108 + ///Adapt according to the smaller of width or height
  109 + num radius(num r) => r * scaleText;
  110 +
106 ///字体大小适配方法 111 ///字体大小适配方法
107 ///- [fontSize] UI设计上字体的大小,单位px. 112 ///- [fontSize] UI设计上字体的大小,单位px.
108 ///Font size adaptation method 113 ///Font size adaptation method
109 ///- [fontSize] The size of the font on the UI design, in px. 114 ///- [fontSize] The size of the font on the UI design, in px.
110 ///- [allowFontScaling] 115 ///- [allowFontScaling]
111 - double setSp(num fontSize, {bool allowFontScalingSelf}) => allowFontScalingSelf == null  
112 - ? (allowFontScaling ? (fontSize * scaleText) : (fontSize * scaleText / _textScaleFactor))  
113 - : (allowFontScalingSelf ? (fontSize * scaleText) : (fontSize * scaleText / _textScaleFactor)); 116 + double setSp(num fontSize, {bool allowFontScalingSelf}) =>
  117 + allowFontScalingSelf == null
  118 + ? (allowFontScaling
  119 + ? (fontSize * scaleText)
  120 + : (fontSize * scaleText / _textScaleFactor))
  121 + : (allowFontScalingSelf
  122 + ? (fontSize * scaleText)
  123 + : (fontSize * scaleText / _textScaleFactor));
114 } 124 }
115 125
116 enum UnitType { 126 enum UnitType {
@@ -7,6 +7,9 @@ extension SizeExtension on num { @@ -7,6 +7,9 @@ extension SizeExtension on num {
7 ///[ScreenUtil.setHeight] 7 ///[ScreenUtil.setHeight]
8 double get h => ScreenUtil().setHeight(this); 8 double get h => ScreenUtil().setHeight(this);
9 9
  10 + ///[ScreenUtil.radius]
  11 + double get r => ScreenUtil().radius(this);
  12 +
10 ///[ScreenUtil.setSp] 13 ///[ScreenUtil.setSp]
11 double get sp => ScreenUtil().setSp(this); 14 double get sp => ScreenUtil().setSp(this);
12 15
1 name: flutter_screenutil 1 name: flutter_screenutil
2 description: A flutter plugin for adapting screen and font size.Guaranteed to look good on different models 2 description: A flutter plugin for adapting screen and font size.Guaranteed to look good on different models
3 -version: 4.0.1 3 +version: 4.0.2
4 homepage: https://github.com/OpenFlutter/flutter_screenutil 4 homepage: https://github.com/OpenFlutter/flutter_screenutil
5 5
6 environment: 6 environment: