Showing
6 changed files
with
64 additions
and
41 deletions
@@ -195,8 +195,12 @@ class _HomePageState extends State<HomePage> { | @@ -195,8 +195,12 @@ class _HomePageState extends State<HomePage> { | ||
195 | 20.setVerticalSpacing // SizedBox(height: 20 * scaleHeight) | 195 | 20.setVerticalSpacing // SizedBox(height: 20 * scaleHeight) |
196 | 20.horizontalSpace // SizedBox(height: 20 * scaleWidth) | 196 | 20.horizontalSpace // SizedBox(height: 20 * scaleWidth) |
197 | const RPadding.all(8) // Padding.all(8.r) - take advantage of const key word | 197 | const RPadding.all(8) // Padding.all(8.r) - take advantage of const key word |
198 | + EdgeInsets.all(10).w //EdgeInsets.all(10.w) | ||
198 | REdgeInsets.all(8) // EdgeInsets.all(8.r) | 199 | REdgeInsets.all(8) // EdgeInsets.all(8.r) |
199 | EdgeInsets.only(left:8,right:8).r // EdgeInsets.only(left:8.r,right:8.r). | 200 | EdgeInsets.only(left:8,right:8).r // EdgeInsets.only(left:8.r,right:8.r). |
201 | + BoxConstraints(maxWidth: 100, minHeight: 100).w //BoxConstraints(maxWidth: 100.w, minHeight: 100.w) | ||
202 | + Radius.circular(16).w //Radius.circular(16.w) | ||
203 | + BorderRadius.all(Radius.circular(16)).w | ||
200 | ``` | 204 | ``` |
201 | 205 | ||
202 | #### Adapt screen size | 206 | #### Adapt screen size |
@@ -188,9 +188,12 @@ class _HomePageState extends State<HomePage> { | @@ -188,9 +188,12 @@ class _HomePageState extends State<HomePage> { | ||
188 | 20.setVerticalSpacing // SizedBox(height: 20 * scaleHeight) | 188 | 20.setVerticalSpacing // SizedBox(height: 20 * scaleHeight) |
189 | 20.horizontalSpace // SizedBox(height: 20 * scaleWidth) | 189 | 20.horizontalSpace // SizedBox(height: 20 * scaleWidth) |
190 | const RPadding.all(8) // Padding.all(8.r) - 获取到const的优点 | 190 | const RPadding.all(8) // Padding.all(8.r) - 获取到const的优点 |
191 | - REdgeInsts.all(8) // EdgeInsets.all(8.r) | 191 | + EdgeInsets.all(10).w //EdgeInsets.all(10.w) |
192 | + REdgeInsets.all(8) // EdgeInsets.all(8.r) | ||
192 | EdgeInsets.only(left:8,right:8).r // EdgeInsets.only(left:8.r,right:8.r). | 193 | EdgeInsets.only(left:8,right:8).r // EdgeInsets.only(left:8.r,right:8.r). |
193 | - | 194 | + BoxConstraints(maxWidth: 100, minHeight: 100).w //BoxConstraints(maxWidth: 100.w, minHeight: 100.w) |
195 | + Radius.circular(16).w //Radius.circular(16.w) | ||
196 | + BorderRadius.all(Radius.circular(16)).w | ||
194 | ``` | 197 | ``` |
195 | 198 | ||
196 | 199 |
@@ -54,10 +54,12 @@ class HomePageScaffold extends StatelessWidget { | @@ -54,10 +54,12 @@ class HomePageScaffold extends StatelessWidget { | ||
54 | ), | 54 | ), |
55 | // Without using Extensions | 55 | // Without using Extensions |
56 | Container( | 56 | Container( |
57 | - padding: EdgeInsets.all(ScreenUtil().setWidth(10)), | ||
58 | - width: ScreenUtil().setWidth(180), | ||
59 | - height: ScreenUtil().setHeight(200), | ||
60 | - color: Colors.blue, | 57 | + decoration: BoxDecoration( |
58 | + borderRadius: BorderRadius.all(Radius.circular(16).w), | ||
59 | + color: Colors.blue, | ||
60 | + ), | ||
61 | + constraints: BoxConstraints(maxWidth: 100, minHeight: 100).w, | ||
62 | + padding: EdgeInsets.all(10.w), | ||
61 | child: Text( | 63 | child: Text( |
62 | 'My design draft width: 180dp\n\n' | 64 | 'My design draft width: 180dp\n\n' |
63 | 'My design draft height: 200dp', | 65 | 'My design draft height: 200dp', |
@@ -60,10 +60,12 @@ class HomePageScaffold extends StatelessWidget { | @@ -60,10 +60,12 @@ class HomePageScaffold extends StatelessWidget { | ||
60 | ], | 60 | ], |
61 | ), | 61 | ), |
62 | Container( | 62 | Container( |
63 | - padding: EdgeInsets.all(ScreenUtil().setWidth(10)), | ||
64 | - width: 100.r, | ||
65 | - height: 100.r, | ||
66 | - color: Colors.green, | 63 | + decoration: BoxDecoration( |
64 | + borderRadius: BorderRadius.all(Radius.circular(16)).w, | ||
65 | + color: Colors.green, | ||
66 | + ), | ||
67 | + constraints: BoxConstraints(maxWidth: 100, minHeight: 100).r, | ||
68 | + padding: EdgeInsets.all(10).w, | ||
67 | child: Text( | 69 | child: Text( |
68 | '我是正方形,边长是100', | 70 | '我是正方形,边长是100', |
69 | style: TextStyle( | 71 | style: TextStyle( |
@@ -57,18 +57,20 @@ extension EdgeInsetsExtension on EdgeInsets { | @@ -57,18 +57,20 @@ extension EdgeInsetsExtension on EdgeInsets { | ||
57 | right: right.r, | 57 | right: right.r, |
58 | left: left.r, | 58 | left: left.r, |
59 | ); | 59 | ); |
60 | + | ||
60 | EdgeInsets get w => copyWith( | 61 | EdgeInsets get w => copyWith( |
61 | - top: top.w, | ||
62 | - bottom: bottom.w, | ||
63 | - right: right.w, | ||
64 | - left: left.w, | ||
65 | - ); | 62 | + top: top.w, |
63 | + bottom: bottom.w, | ||
64 | + right: right.w, | ||
65 | + left: left.w, | ||
66 | + ); | ||
67 | + | ||
66 | EdgeInsets get h => copyWith( | 68 | EdgeInsets get h => copyWith( |
67 | - top: top.h, | ||
68 | - bottom: bottom.h, | ||
69 | - right: right.h, | ||
70 | - left: left.h, | ||
71 | - ); | 69 | + top: top.h, |
70 | + bottom: bottom.h, | ||
71 | + right: right.h, | ||
72 | + left: left.h, | ||
73 | + ); | ||
72 | } | 74 | } |
73 | 75 | ||
74 | extension BorderRaduisExtension on BorderRadius { | 76 | extension BorderRaduisExtension on BorderRadius { |
@@ -78,25 +80,29 @@ extension BorderRaduisExtension on BorderRadius { | @@ -78,25 +80,29 @@ extension BorderRaduisExtension on BorderRadius { | ||
78 | bottomRight: bottomRight.r, | 80 | bottomRight: bottomRight.r, |
79 | topLeft: topLeft.r, | 81 | topLeft: topLeft.r, |
80 | topRight: topRight.r, | 82 | topRight: topRight.r, |
81 | - ); | 83 | + ); |
84 | + | ||
82 | BorderRadius get w => copyWith( | 85 | BorderRadius get w => copyWith( |
83 | - bottomLeft: bottomLeft.w, | ||
84 | - bottomRight: bottomRight.w, | ||
85 | - topLeft: topLeft.w, | ||
86 | - topRight: topRight.w, | ||
87 | - ); | 86 | + bottomLeft: bottomLeft.w, |
87 | + bottomRight: bottomRight.w, | ||
88 | + topLeft: topLeft.w, | ||
89 | + topRight: topRight.w, | ||
90 | + ); | ||
91 | + | ||
88 | BorderRadius get h => copyWith( | 92 | BorderRadius get h => copyWith( |
89 | - bottomLeft: bottomLeft.h, | ||
90 | - bottomRight: bottomRight.h, | ||
91 | - topLeft: topLeft.h, | ||
92 | - topRight: topRight.h, | ||
93 | - ); | 93 | + bottomLeft: bottomLeft.h, |
94 | + bottomRight: bottomRight.h, | ||
95 | + topLeft: topLeft.h, | ||
96 | + topRight: topRight.h, | ||
97 | + ); | ||
94 | } | 98 | } |
95 | 99 | ||
96 | extension RaduisExtension on Radius { | 100 | extension RaduisExtension on Radius { |
97 | /// Creates adapt Radius using r [SizeExtension]. | 101 | /// Creates adapt Radius using r [SizeExtension]. |
98 | Radius get r => Radius.elliptical(x.r, y.r); | 102 | Radius get r => Radius.elliptical(x.r, y.r); |
103 | + | ||
99 | Radius get w => Radius.elliptical(x.w, y.w); | 104 | Radius get w => Radius.elliptical(x.w, y.w); |
105 | + | ||
100 | Radius get h => Radius.elliptical(x.h, y.h); | 106 | Radius get h => Radius.elliptical(x.h, y.h); |
101 | } | 107 | } |
102 | 108 | ||
@@ -116,16 +122,18 @@ extension BoxConstraintsExtension on BoxConstraints { | @@ -116,16 +122,18 @@ extension BoxConstraintsExtension on BoxConstraints { | ||
116 | minHeight: minHeight.h, | 122 | minHeight: minHeight.h, |
117 | minWidth: minWidth.w, | 123 | minWidth: minWidth.w, |
118 | ); | 124 | ); |
125 | + | ||
119 | BoxConstraints get w => this.copyWith( | 126 | BoxConstraints get w => this.copyWith( |
120 | - maxHeight: maxHeight.w, | ||
121 | - maxWidth: maxWidth.w, | ||
122 | - minHeight: minHeight.w, | ||
123 | - minWidth: minWidth.w, | ||
124 | - ); | 127 | + maxHeight: maxHeight.w, |
128 | + maxWidth: maxWidth.w, | ||
129 | + minHeight: minHeight.w, | ||
130 | + minWidth: minWidth.w, | ||
131 | + ); | ||
132 | + | ||
125 | BoxConstraints get h => this.copyWith( | 133 | BoxConstraints get h => this.copyWith( |
126 | - maxHeight: maxHeight.h, | ||
127 | - maxWidth: maxWidth.h, | ||
128 | - minHeight: minHeight.h, | ||
129 | - minWidth: minWidth.h, | ||
130 | - ); | 134 | + maxHeight: maxHeight.h, |
135 | + maxWidth: maxWidth.h, | ||
136 | + minHeight: minHeight.h, | ||
137 | + minWidth: minWidth.h, | ||
138 | + ); | ||
131 | } | 139 | } |
-
Please register or login to post a comment