Showing
4 changed files
with
71 additions
and
75 deletions
@@ -123,7 +123,7 @@ height:200.h | @@ -123,7 +123,7 @@ height:200.h | ||
123 | ``` | 123 | ``` |
124 | **Note** | 124 | **Note** |
125 | 125 | ||
126 | -Height is also adapted according to setWidth to ensure no deformation (when you want a square) | 126 | +The height can also use setWidth to ensure that it is not deformed(when you want a square) |
127 | 127 | ||
128 | 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. | 128 | 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. |
129 | 129 | ||
@@ -139,7 +139,7 @@ Container( | @@ -139,7 +139,7 @@ Container( | ||
139 | ////If you want to display a square: | 139 | ////If you want to display a square: |
140 | Container( | 140 | Container( |
141 | width: ScreenUtil().setWidth(300), | 141 | width: ScreenUtil().setWidth(300), |
142 | - height: ScreenUtil().setWidth(300), | 142 | + height: 300.w, |
143 | ), | 143 | ), |
144 | 144 | ||
145 | ``` | 145 | ``` |
@@ -149,13 +149,18 @@ Container( | @@ -149,13 +149,18 @@ Container( | ||
149 | //Incoming font size,the unit is pixel, fonts will not scale to respect Text Size accessibility settings | 149 | //Incoming font size,the unit is pixel, fonts will not scale to respect Text Size accessibility settings |
150 | //(AllowallowFontScaling when initializing ScreenUtil) | 150 | //(AllowallowFontScaling when initializing ScreenUtil) |
151 | ScreenUtil().setSp(28) | 151 | ScreenUtil().setSp(28) |
152 | +28.sp | ||
152 | 153 | ||
153 | //Incoming font size,the unit is pixel,fonts will scale to respect Text Size accessibility settings | 154 | //Incoming font size,the unit is pixel,fonts will scale to respect Text Size accessibility settings |
154 | -//(If somewhere does not follow the global allowFontScaling setting) | 155 | +//(If somewhere follow the global allowFontScaling setting) |
155 | ScreenUtil().setSp(24, allowFontScalingSelf: true) | 156 | ScreenUtil().setSp(24, allowFontScalingSelf: true) |
157 | +28.ssp | ||
156 | 158 | ||
157 | -//for example: | 159 | +//(If somewhere does not follow the global allowFontScaling setting) |
160 | +ScreenUtil().setSp(24, allowFontScalingSelf: false) | ||
161 | +28.nsp | ||
158 | 162 | ||
163 | +//for example: | ||
159 | Column( | 164 | Column( |
160 | crossAxisAlignment: CrossAxisAlignment.start, | 165 | crossAxisAlignment: CrossAxisAlignment.start, |
161 | children: <Widget>[ | 166 | children: <Widget>[ |
@@ -181,10 +181,12 @@ Column( | @@ -181,10 +181,12 @@ Column( | ||
181 | ``` | 181 | ``` |
182 | 182 | ||
183 | ```dart | 183 | ```dart |
184 | -import 'package:flutter/material.dart'; | ||
185 | -import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
186 | - | ||
187 | -void main() => runApp( MyApp()); | 184 | +void main() { |
185 | + WidgetsFlutterBinding.ensureInitialized(); | ||
186 | + //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) | ||
187 | + ScreenUtil.init(designSize: Size(750, 1334), allowFontScaling: false); | ||
188 | + runApp(MyApp()); | ||
189 | +} | ||
188 | 190 | ||
189 | class MyApp extends StatelessWidget { | 191 | class MyApp extends StatelessWidget { |
190 | @override | 192 | @override |
@@ -195,32 +197,11 @@ class MyApp extends StatelessWidget { | @@ -195,32 +197,11 @@ class MyApp extends StatelessWidget { | ||
195 | theme: ThemeData( | 197 | theme: ThemeData( |
196 | primarySwatch: Colors.blue, | 198 | primarySwatch: Colors.blue, |
197 | ), | 199 | ), |
198 | - home: MyHomePage(), | 200 | + home: ExampleWidget(title: 'FlutterScreenUtil示例'), |
199 | ); | 201 | ); |
200 | } | 202 | } |
201 | } | 203 | } |
202 | 204 | ||
203 | -class MyHomePage extends StatefulWidget { | ||
204 | - MyHomePage({Key key, this.title}) : super(key: key); | ||
205 | - | ||
206 | - final String title; | ||
207 | - | ||
208 | - @override | ||
209 | - _MyHomePageState createState() => _MyHomePageState(); | ||
210 | -} | ||
211 | - | ||
212 | -class _MyHomePageState extends State<MyHomePage> { | ||
213 | - @override | ||
214 | - Widget build(BuildContext context) { | ||
215 | - //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) | ||
216 | - ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false); | ||
217 | - ScreenUtil.init(); | ||
218 | - ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false); | ||
219 | - | ||
220 | - return ExampleWidget(title: 'FlutterScreenUtil示例'); | ||
221 | - } | ||
222 | -} | ||
223 | - | ||
224 | class ExampleWidget extends StatefulWidget { | 205 | class ExampleWidget extends StatefulWidget { |
225 | const ExampleWidget({Key key, this.title}) : super(key: key); | 206 | const ExampleWidget({Key key, this.title}) : super(key: key); |
226 | 207 | ||
@@ -250,7 +231,7 @@ class _ExampleWidgetState extends State<ExampleWidget> { | @@ -250,7 +231,7 @@ class _ExampleWidgetState extends State<ExampleWidget> { | ||
250 | height: ScreenUtil().setHeight(200), | 231 | height: ScreenUtil().setHeight(200), |
251 | color: Colors.red, | 232 | color: Colors.red, |
252 | child: Text( | 233 | child: Text( |
253 | - '我的宽度:${ScreenUtil().setWidth(375)}dp \n' | 234 | + '我的宽度:${0.5.wp}dp \n' |
254 | '我的高度:${ScreenUtil().setHeight(200)}dp', | 235 | '我的高度:${ScreenUtil().setHeight(200)}dp', |
255 | style: TextStyle( | 236 | style: TextStyle( |
256 | color: Colors.white, fontSize: ScreenUtil().setSp(24)), | 237 | color: Colors.white, fontSize: ScreenUtil().setSp(24)), |
@@ -258,25 +239,25 @@ class _ExampleWidgetState extends State<ExampleWidget> { | @@ -258,25 +239,25 @@ class _ExampleWidgetState extends State<ExampleWidget> { | ||
258 | ), | 239 | ), |
259 | Container( | 240 | Container( |
260 | padding: EdgeInsets.all(ScreenUtil().setWidth(10)), | 241 | padding: EdgeInsets.all(ScreenUtil().setWidth(10)), |
261 | - width: ScreenUtil().setWidth(375), | ||
262 | - height: ScreenUtil().setHeight(200), | 242 | + width: 375.w, |
243 | + height: 200.h, | ||
263 | color: Colors.blue, | 244 | color: Colors.blue, |
264 | child: Text( | 245 | child: Text( |
265 | - '我的宽度:${ScreenUtil().setWidth(375)}dp \n' | ||
266 | - '我的高度:${ScreenUtil().setHeight(200)}dp', | 246 | + '我的宽度:${375.w}dp \n' |
247 | + '我的高度:${200.h}dp', | ||
267 | style: TextStyle( | 248 | style: TextStyle( |
268 | color: Colors.white, | 249 | color: Colors.white, |
269 | fontSize: ScreenUtil().setSp(24))), | 250 | fontSize: ScreenUtil().setSp(24))), |
270 | ), | 251 | ), |
271 | ], | 252 | ], |
272 | ), | 253 | ), |
273 | - Text('设备宽度:${ScreenUtil.screenWidth}dp'), | ||
274 | - Text('设备高度:${ScreenUtil.screenHeight}dp'), | ||
275 | - Text('设备宽度:${ScreenUtil.screenWidthPx}px'), | ||
276 | - Text('设备高度:${ScreenUtil.screenHeightPx}px'), | ||
277 | - Text('设备的像素密度:${ScreenUtil.pixelRatio}'), | ||
278 | - Text('底部安全区距离:${ScreenUtil.bottomBarHeight}dp'), | ||
279 | - Text('状态栏高度:${ScreenUtil.statusBarHeight}dp'), | 254 | + Text('设备宽度:${ScreenUtil().screenWidthPx}px'), |
255 | + Text('设备高度:${ScreenUtil().screenHeightPx}px'), | ||
256 | + Text('设备宽度:${ScreenUtil().screenWidth}dp'), | ||
257 | + Text('设备高度:${ScreenUtil().screenHeight}dp'), | ||
258 | + Text('设备的像素密度:${ScreenUtil().pixelRatio}'), | ||
259 | + Text('底部安全区距离:${ScreenUtil().bottomBarHeight}dp'), | ||
260 | + Text('状态栏高度:${ScreenUtil().statusBarHeight}dp'), | ||
280 | Text( | 261 | Text( |
281 | '实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}', | 262 | '实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}', |
282 | textAlign: TextAlign.center, | 263 | textAlign: TextAlign.center, |
@@ -286,22 +267,20 @@ class _ExampleWidgetState extends State<ExampleWidget> { | @@ -286,22 +267,20 @@ class _ExampleWidgetState extends State<ExampleWidget> { | ||
286 | textAlign: TextAlign.center, | 267 | textAlign: TextAlign.center, |
287 | ), | 268 | ), |
288 | SizedBox( | 269 | SizedBox( |
289 | - height: ScreenUtil().setHeight(100), | 270 | + height: 100.h, |
290 | ), | 271 | ), |
291 | - Text('系统的字体缩放比例:${ScreenUtil.textScaleFactor}'), | 272 | + Text('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'), |
292 | Column( | 273 | Column( |
293 | crossAxisAlignment: CrossAxisAlignment.start, | 274 | crossAxisAlignment: CrossAxisAlignment.start, |
294 | children: <Widget>[ | 275 | children: <Widget>[ |
295 | - Text('我的文字大小在设计稿上是24px,不会随着系统的文字缩放比例变化', | ||
296 | - style: TextStyle( | ||
297 | - color: Colors.black, | ||
298 | - fontSize: ScreenUtil().setSp(24), | ||
299 | - )), | ||
300 | - Text('我的文字大小在设计稿上是24px,会随着系统的文字缩放比例变化', | ||
301 | - style: TextStyle( | ||
302 | - color: Colors.black, | ||
303 | - fontSize: ScreenUtil() | ||
304 | - .setSp(24, allowFontScalingSelf: true))), | 276 | + Text( |
277 | + '我的文字大小在设计稿上是24px,不会随着系统的文字缩放比例变化', | ||
278 | + style: ts.t2, | ||
279 | + ), | ||
280 | + Text( | ||
281 | + '我的文字大小在设计稿上是24px,会随着系统的文字缩放比例变化', | ||
282 | + style: ts.t1, | ||
283 | + ), | ||
305 | ], | 284 | ], |
306 | ) | 285 | ) |
307 | ], | 286 | ], |
@@ -310,7 +289,10 @@ class _ExampleWidgetState extends State<ExampleWidget> { | @@ -310,7 +289,10 @@ class _ExampleWidgetState extends State<ExampleWidget> { | ||
310 | floatingActionButton: FloatingActionButton( | 289 | floatingActionButton: FloatingActionButton( |
311 | child: Icon(Icons.title), | 290 | child: Icon(Icons.title), |
312 | onPressed: () { | 291 | onPressed: () { |
313 | - ScreenUtil.init(width: 1500, height: 1334, allowFontScaling: false); | 292 | + ScreenUtil.init( |
293 | + designSize: Size(1500, 1334), | ||
294 | + allowFontScaling: false, | ||
295 | + ); | ||
314 | setState(() {}); | 296 | setState(() {}); |
315 | }, | 297 | }, |
316 | ), | 298 | ), |
@@ -318,20 +300,29 @@ class _ExampleWidgetState extends State<ExampleWidget> { | @@ -318,20 +300,29 @@ class _ExampleWidgetState extends State<ExampleWidget> { | ||
318 | } | 300 | } |
319 | 301 | ||
320 | void printScreenInformation() { | 302 | void printScreenInformation() { |
321 | - print('设备宽度:${ScreenUtil.screenWidth}'); //Device width | ||
322 | - print('设备高度:${ScreenUtil.screenHeight}'); //Device height | ||
323 | - print('设备的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density | 303 | + print('设备宽度:${ScreenUtil().screenWidth}'); //Device width |
304 | + print('设备高度:${ScreenUtil().screenHeight}'); //Device height | ||
305 | + print('设备的像素密度:${ScreenUtil().pixelRatio}'); //Device pixel density | ||
324 | print( | 306 | print( |
325 | - '底部安全区距离:${ScreenUtil.bottomBarHeight}dp'); //Bottom safe zone distance,suitable for buttons with full screen | 307 | + '底部安全区距离:${ScreenUtil().bottomBarHeight}dp', |
308 | + ); //Bottom safe zone distance,suitable for buttons with full screen | ||
326 | print( | 309 | print( |
327 | - '状态栏高度:${ScreenUtil.statusBarHeight}dp'); //状态栏高度 , 刘海屏会更高,单位dp | 310 | + '状态栏高度:${ScreenUtil().statusBarHeight}dp', |
311 | + ); //Status bar height , Notch will be higher Unit px | ||
328 | 312 | ||
329 | print('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}'); | 313 | print('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}'); |
330 | print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}'); | 314 | print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}'); |
315 | + | ||
316 | + print( | ||
317 | + '宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}', | ||
318 | + ); | ||
331 | print( | 319 | print( |
332 | - '宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); | ||
333 | - print('高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); | ||
334 | - print('系统的字体缩放比例:${ScreenUtil.textScaleFactor}'); | 320 | + '高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}', |
321 | + ); | ||
322 | + print('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'); | ||
323 | + | ||
324 | + print('屏幕宽度的0.5:${0.5.wp}'); | ||
325 | + print('屏幕高度的0.5:${0.5.hp}'); | ||
335 | } | 326 | } |
336 | } | 327 | } |
337 | 328 |
@@ -193,16 +193,16 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -193,16 +193,16 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
193 | @override | 193 | @override |
194 | Widget build(BuildContext context) { | 194 | Widget build(BuildContext context) { |
195 | ///Define o tamanho de ajuste (preenche o tamanho da tela do dispositivo no design). Se o design é baseado no tamanho do iPhone6 (iPhone6 750*1334) | 195 | ///Define o tamanho de ajuste (preenche o tamanho da tela do dispositivo no design). Se o design é baseado no tamanho do iPhone6 (iPhone6 750*1334) |
196 | - ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false); | 196 | + ScreenUtil.init(designSize: Size(750, 1334), allowFontScaling: false); |
197 | 197 | ||
198 | - print('Largura do dispositivo:${ScreenUtil.screenWidth}'); //Largura do dispositivo | ||
199 | - print('Altura do dispositivo:${ScreenUtil.screenHeight}'); //Altura do dispositivo | 198 | + print('Largura do dispositivo:${ScreenUtil().screenWidth}'); //Largura do dispositivo |
199 | + print('Altura do dispositivo:${ScreenUtil().screenHeight}'); //Altura do dispositivo | ||
200 | print( | 200 | print( |
201 | - 'Densidade de pixels do dispositivo:${ScreenUtil.pixelRatio}'); //Densidade de pixels do dispositivo | 201 | + 'Densidade de pixels do dispositivo:${ScreenUtil().pixelRatio}'); //Densidade de pixels do dispositivo |
202 | print( | 202 | print( |
203 | - 'Distância segura do rodapé:${ScreenUtil.bottomBarHeight}'); //Distância segura do rodapé, adequada para botões em tela cheia | 203 | + 'Distância segura do rodapé:${ScreenUtil().bottomBarHeight}'); //Distância segura do rodapé, adequada para botões em tela cheia |
204 | print( | 204 | print( |
205 | - 'Altura da status bar:${ScreenUtil.statusBarHeight}px'); //Altura da status bar em pixels, Notch será maior | 205 | + 'Altura da status bar:${ScreenUtil().statusBarHeight}px'); //Altura da status bar em pixels, Notch será maior |
206 | print( | 206 | print( |
207 | 'Razão entre a largura atual e a largura do protótipo de design em pixels:${ScreenUtil().scaleWidth}'); | 207 | 'Razão entre a largura atual e a largura do protótipo de design em pixels:${ScreenUtil().scaleWidth}'); |
208 | print( | 208 | print( |
@@ -246,11 +246,11 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -246,11 +246,11 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
246 | ), | 246 | ), |
247 | ], | 247 | ], |
248 | ), | 248 | ), |
249 | - Text('Largura do dispositivo:${ScreenUtil.screenWidth}dp'), | ||
250 | - Text('Altura do dispositivo:${ScreenUtil.screenHeight}dp'), | ||
251 | - Text('Densidade de pixels do dispositivo:${ScreenUtil.pixelRatio}'), | ||
252 | - Text('Distância segura do rodapé:${ScreenUtil.bottomBarHeight}dp'), | ||
253 | - Text('Altura da status bar:${ScreenUtil.statusBarHeight}dp'), | 249 | + Text('Largura do dispositivo:${ScreenUtil().screenWidth}dp'), |
250 | + Text('Altura do dispositivo:${ScreenUtil().screenHeight}dp'), | ||
251 | + Text('Densidade de pixels do dispositivo:${ScreenUtil().pixelRatio}'), | ||
252 | + Text('Distância segura do rodapé:${ScreenUtil().bottomBarHeight}dp'), | ||
253 | + Text('Altura da status bar:${ScreenUtil().statusBarHeight}dp'), | ||
254 | Text( | 254 | Text( |
255 | 'Razão entre a largura atual e a largura do protótipo de design em pixels:${ScreenUtil().scaleWidth}', | 255 | 'Razão entre a largura atual e a largura do protótipo de design em pixels:${ScreenUtil().scaleWidth}', |
256 | textAlign: TextAlign.center, | 256 | textAlign: TextAlign.center, |
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: 3.0.0-beta.1 | 3 | +version: 3.0.0-beta.2 |
4 | homepage: https://github.com/OpenFlutter/flutter_screenutil/tree/beta | 4 | homepage: https://github.com/OpenFlutter/flutter_screenutil/tree/beta |
5 | 5 | ||
6 | environment: | 6 | environment: |
-
Please register or login to post a comment