Showing
6 changed files
with
76 additions
and
32 deletions
@@ -40,6 +40,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -40,6 +40,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
40 | ### Initialize and set the fit size and font size to scale according to the system's "font size" accessibility option | 40 | ### Initialize and set the fit size and font size to scale according to the system's "font size" accessibility option |
41 | Please set the size of the design draft before use, the width and height of the design draft. | 41 | Please set the size of the design draft before use, the width and height of the design draft. |
42 | 42 | ||
43 | +The first way: | ||
43 | ```dart | 44 | ```dart |
44 | void main() => runApp(MyApp()); | 45 | void main() => runApp(MyApp()); |
45 | 46 | ||
@@ -57,6 +58,24 @@ class MyApp extends StatelessWidget { | @@ -57,6 +58,24 @@ class MyApp extends StatelessWidget { | ||
57 | } | 58 | } |
58 | } | 59 | } |
59 | ``` | 60 | ``` |
61 | +The second way: | ||
62 | +``` | ||
63 | +class MyApp extends StatelessWidget { | ||
64 | + @override | ||
65 | + Widget build(BuildContext context) { | ||
66 | + //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 360*690 | ||
67 | + ScreenUtil.init(BoxConstraints(maxWidth: 360, maxHeight: 690)); | ||
68 | + return MaterialApp( | ||
69 | + debugShowCheckedModeBanner: false, | ||
70 | + title: 'Flutter_ScreenUtil', | ||
71 | + theme: ThemeData( | ||
72 | + primarySwatch: Colors.blue, | ||
73 | + ), | ||
74 | + home: HomePage(title: 'FlutterScreenUtil Demo'), | ||
75 | + ); | ||
76 | + } | ||
77 | +} | ||
78 | +``` | ||
60 | 79 | ||
61 | ### Use: | 80 | ### Use: |
62 | 81 |
@@ -46,14 +46,14 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -46,14 +46,14 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
46 | 在使用之前请设置好设计稿的宽度和高度,传入设计稿的宽度和高度(单位随意,但在使用过程中必须保持一致) | 46 | 在使用之前请设置好设计稿的宽度和高度,传入设计稿的宽度和高度(单位随意,但在使用过程中必须保持一致) |
47 | 一定要进行初始化(只需设置一次),以保证在每次使用之前设置好了适配尺寸: | 47 | 一定要进行初始化(只需设置一次),以保证在每次使用之前设置好了适配尺寸: |
48 | 48 | ||
49 | +方式一: | ||
49 | ```dart | 50 | ```dart |
50 | -//填入设计稿中设备的屏幕尺寸 | ||
51 | - | ||
52 | void main() => runApp(MyApp()); | 51 | void main() => runApp(MyApp()); |
53 | 52 | ||
54 | class MyApp extends StatelessWidget { | 53 | class MyApp extends StatelessWidget { |
55 | @override | 54 | @override |
56 | Widget build(BuildContext context) { | 55 | Widget build(BuildContext context) { |
56 | + //填入设计稿中设备的屏幕尺寸,单位dp | ||
57 | return ScreenUtilInit( | 57 | return ScreenUtilInit( |
58 | designSize: Size(360, 690), | 58 | designSize: Size(360, 690), |
59 | allowFontScaling: false, | 59 | allowFontScaling: false, |
@@ -69,6 +69,24 @@ class MyApp extends StatelessWidget { | @@ -69,6 +69,24 @@ class MyApp extends StatelessWidget { | ||
69 | } | 69 | } |
70 | } | 70 | } |
71 | ``` | 71 | ``` |
72 | +方式二: | ||
73 | +``` | ||
74 | +class MyApp extends StatelessWidget { | ||
75 | + @override | ||
76 | + Widget build(BuildContext context) { | ||
77 | + //填入设计稿中设备的屏幕尺寸 (例如:360*690) , 单位dp | ||
78 | + ScreenUtil.init(BoxConstraints(maxWidth: 360, maxHeight: 690)); | ||
79 | + return MaterialApp( | ||
80 | + debugShowCheckedModeBanner: false, | ||
81 | + title: 'Flutter_ScreenUtil', | ||
82 | + theme: ThemeData( | ||
83 | + primarySwatch: Colors.blue, | ||
84 | + ), | ||
85 | + home: HomePage(title: 'FlutterScreenUtil Demo'), | ||
86 | + ); | ||
87 | + } | ||
88 | +} | ||
89 | +``` | ||
72 | 90 | ||
73 | ### 使用 | 91 | ### 使用 |
74 | 92 |
@@ -44,13 +44,14 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -44,13 +44,14 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
44 | Por favor, defina a largura e altura do protótipo de design antes de usar (em pixels). | 44 | Por favor, defina a largura e altura do protótipo de design antes de usar (em pixels). |
45 | Certifique-se de definir as dimensões na paginal inicial do MaterialApp (ou seja, no arquivo de entrada, defina apenas uma vez) para garantir que o tamanho de ajuste seja o mesmo antes de cada uso: | 45 | Certifique-se de definir as dimensões na paginal inicial do MaterialApp (ou seja, no arquivo de entrada, defina apenas uma vez) para garantir que o tamanho de ajuste seja o mesmo antes de cada uso: |
46 | 46 | ||
47 | +The first way: | ||
47 | ```dart | 48 | ```dart |
48 | void main() => runApp(MyApp()); | 49 | void main() => runApp(MyApp()); |
49 | 50 | ||
50 | class MyApp extends StatelessWidget { | 51 | class MyApp extends StatelessWidget { |
51 | @override | 52 | @override |
52 | Widget build(BuildContext context) { | 53 | Widget build(BuildContext context) { |
53 | - //Preencha o tamanho da tela do dispositivo no protótipo de design , in dp | 54 | + //Set the fit size (fill in the screen size of the device in the design,in dp) |
54 | return ScreenUtilInit( | 55 | return ScreenUtilInit( |
55 | designSize: Size(360, 690), | 56 | designSize: Size(360, 690), |
56 | allowFontScaling: false, | 57 | allowFontScaling: false, |
@@ -61,6 +62,24 @@ class MyApp extends StatelessWidget { | @@ -61,6 +62,24 @@ class MyApp extends StatelessWidget { | ||
61 | } | 62 | } |
62 | } | 63 | } |
63 | ``` | 64 | ``` |
65 | +The second way: | ||
66 | +``` | ||
67 | +class MyApp extends StatelessWidget { | ||
68 | + @override | ||
69 | + Widget build(BuildContext context) { | ||
70 | + //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 360*690 | ||
71 | + ScreenUtil.init(BoxConstraints(maxWidth: 360, maxHeight: 690)); | ||
72 | + return MaterialApp( | ||
73 | + debugShowCheckedModeBanner: false, | ||
74 | + title: 'Flutter_ScreenUtil', | ||
75 | + theme: ThemeData( | ||
76 | + primarySwatch: Colors.blue, | ||
77 | + ), | ||
78 | + home: HomePage(title: 'FlutterScreenUtil Demo'), | ||
79 | + ); | ||
80 | + } | ||
81 | +} | ||
82 | +``` | ||
64 | 83 | ||
65 | ### Uso: | 84 | ### Uso: |
66 | 85 |
@@ -6,18 +6,15 @@ void main() => runApp(MyApp()); | @@ -6,18 +6,15 @@ void main() => runApp(MyApp()); | ||
6 | class MyApp extends StatelessWidget { | 6 | class MyApp extends StatelessWidget { |
7 | @override | 7 | @override |
8 | Widget build(BuildContext context) { | 8 | Widget build(BuildContext context) { |
9 | - //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) | ||
10 | - return ScreenUtilInit( | ||
11 | - designSize: Size(360, 690), | ||
12 | - allowFontScaling: false, | ||
13 | - builder: () => MaterialApp( | ||
14 | - debugShowCheckedModeBanner: false, | ||
15 | - title: 'Flutter_ScreenUtil', | ||
16 | - theme: ThemeData( | ||
17 | - primarySwatch: Colors.blue, | ||
18 | - ), | ||
19 | - home: HomePage(title: 'FlutterScreenUtil Demo'), | 9 | + //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 360*690 |
10 | + ScreenUtil.init(BoxConstraints(maxWidth: 360, maxHeight: 690)); | ||
11 | + return MaterialApp( | ||
12 | + debugShowCheckedModeBanner: false, | ||
13 | + title: 'Flutter_ScreenUtil', | ||
14 | + theme: ThemeData( | ||
15 | + primarySwatch: Colors.blue, | ||
20 | ), | 16 | ), |
17 | + home: HomePage(title: 'FlutterScreenUtil Demo'), | ||
21 | ); | 18 | ); |
22 | } | 19 | } |
23 | } | 20 | } |
@@ -64,9 +61,7 @@ class _HomePageState extends State<HomePage> { | @@ -64,9 +61,7 @@ class _HomePageState extends State<HomePage> { | ||
64 | child: Text( | 61 | child: Text( |
65 | '我的设计稿宽度: 180dp \n' | 62 | '我的设计稿宽度: 180dp \n' |
66 | '我的设计稿高度: 200dp', | 63 | '我的设计稿高度: 200dp', |
67 | - style: TextStyle( | ||
68 | - color: Colors.white, | ||
69 | - fontSize: ScreenUtil().setSp(12))), | 64 | + style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(12))), |
70 | ), | 65 | ), |
71 | ], | 66 | ], |
72 | ), | 67 | ), |
@@ -133,10 +128,8 @@ class _HomePageState extends State<HomePage> { | @@ -133,10 +128,8 @@ class _HomePageState extends State<HomePage> { | ||
133 | print('状态栏高度:${ScreenUtil().statusBarHeight}dp'); | 128 | print('状态栏高度:${ScreenUtil().statusBarHeight}dp'); |
134 | print('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}'); | 129 | print('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}'); |
135 | print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}'); | 130 | print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}'); |
136 | - print( | ||
137 | - '宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}'); | ||
138 | - print( | ||
139 | - '高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}'); | 131 | + print('宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}'); |
132 | + print('高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}'); | ||
140 | print('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'); | 133 | print('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'); |
141 | print('屏幕宽度的0.5:${0.5.sw}dp'); | 134 | print('屏幕宽度的0.5:${0.5.sw}dp'); |
142 | print('屏幕高度的0.5:${0.5.sh}dp'); | 135 | print('屏幕高度的0.5:${0.5.sh}dp'); |
@@ -37,8 +37,8 @@ class ScreenUtil { | @@ -37,8 +37,8 @@ class ScreenUtil { | ||
37 | } | 37 | } |
38 | 38 | ||
39 | static void init( | 39 | static void init( |
40 | - BoxConstraints constraints, | ||
41 | - Orientation orientation, { | 40 | + BoxConstraints constraints, { |
41 | + Orientation orientation = Orientation.portrait, | ||
42 | Size designSize = defaultSize, | 42 | Size designSize = defaultSize, |
43 | bool allowFontScaling = false, | 43 | bool allowFontScaling = false, |
44 | }) { | 44 | }) { |
@@ -125,12 +125,7 @@ class ScreenUtil { | @@ -125,12 +125,7 @@ class ScreenUtil { | ||
125 | ///Font size adaptation method | 125 | ///Font size adaptation method |
126 | ///- [fontSize] The size of the font on the UI design, in dp. | 126 | ///- [fontSize] The size of the font on the UI design, in dp. |
127 | ///- [allowFontScaling] | 127 | ///- [allowFontScaling] |
128 | - double setSp(num fontSize, {bool? allowFontScalingSelf}) => | ||
129 | - allowFontScalingSelf == null | ||
130 | - ? (allowFontScaling | ||
131 | - ? (fontSize * scaleText) * _textScaleFactor | ||
132 | - : (fontSize * scaleText)) | ||
133 | - : (allowFontScalingSelf | ||
134 | - ? (fontSize * scaleText) * _textScaleFactor | ||
135 | - : (fontSize * scaleText)); | 128 | + double setSp(num fontSize, {bool? allowFontScalingSelf}) => allowFontScalingSelf == null |
129 | + ? (allowFontScaling ? (fontSize * scaleText) * _textScaleFactor : (fontSize * scaleText)) | ||
130 | + : (allowFontScalingSelf ? (fontSize * scaleText) * _textScaleFactor : (fontSize * scaleText)); | ||
136 | } | 131 | } |
@@ -26,7 +26,7 @@ class ScreenUtilInit extends StatelessWidget { | @@ -26,7 +26,7 @@ class ScreenUtilInit extends StatelessWidget { | ||
26 | if (constraints.maxWidth != 0) { | 26 | if (constraints.maxWidth != 0) { |
27 | ScreenUtil.init( | 27 | ScreenUtil.init( |
28 | constraints, | 28 | constraints, |
29 | - orientation, | 29 | + orientation: orientation, |
30 | designSize: designSize, | 30 | designSize: designSize, |
31 | allowFontScaling: allowFontScaling, | 31 | allowFontScaling: allowFontScaling, |
32 | ); | 32 | ); |
-
Please register or login to post a comment