Showing
6 changed files
with
31 additions
and
8 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), | 57 | + decoration: BoxDecoration( |
58 | + borderRadius: BorderRadius.all(Radius.circular(16).w), | ||
60 | color: Colors.blue, | 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, | 63 | + decoration: BoxDecoration( |
64 | + borderRadius: BorderRadius.all(Radius.circular(16)).w, | ||
66 | color: Colors.green, | 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,12 +57,14 @@ extension EdgeInsetsExtension on EdgeInsets { | @@ -57,12 +57,14 @@ 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 | top: top.w, |
62 | bottom: bottom.w, | 63 | bottom: bottom.w, |
63 | right: right.w, | 64 | right: right.w, |
64 | left: left.w, | 65 | left: left.w, |
65 | ); | 66 | ); |
67 | + | ||
66 | EdgeInsets get h => copyWith( | 68 | EdgeInsets get h => copyWith( |
67 | top: top.h, | 69 | top: top.h, |
68 | bottom: bottom.h, | 70 | bottom: bottom.h, |
@@ -79,12 +81,14 @@ extension BorderRaduisExtension on BorderRadius { | @@ -79,12 +81,14 @@ extension BorderRaduisExtension on BorderRadius { | ||
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, | 86 | bottomLeft: bottomLeft.w, |
84 | bottomRight: bottomRight.w, | 87 | bottomRight: bottomRight.w, |
85 | topLeft: topLeft.w, | 88 | topLeft: topLeft.w, |
86 | topRight: topRight.w, | 89 | topRight: topRight.w, |
87 | ); | 90 | ); |
91 | + | ||
88 | BorderRadius get h => copyWith( | 92 | BorderRadius get h => copyWith( |
89 | bottomLeft: bottomLeft.h, | 93 | bottomLeft: bottomLeft.h, |
90 | bottomRight: bottomRight.h, | 94 | bottomRight: bottomRight.h, |
@@ -96,7 +100,9 @@ extension BorderRaduisExtension on BorderRadius { | @@ -96,7 +100,9 @@ extension BorderRaduisExtension on BorderRadius { | ||
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,12 +122,14 @@ extension BoxConstraintsExtension on BoxConstraints { | @@ -116,12 +122,14 @@ 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, | 127 | maxHeight: maxHeight.w, |
121 | maxWidth: maxWidth.w, | 128 | maxWidth: maxWidth.w, |
122 | minHeight: minHeight.w, | 129 | minHeight: minHeight.w, |
123 | minWidth: minWidth.w, | 130 | minWidth: minWidth.w, |
124 | ); | 131 | ); |
132 | + | ||
125 | BoxConstraints get h => this.copyWith( | 133 | BoxConstraints get h => this.copyWith( |
126 | maxHeight: maxHeight.h, | 134 | maxHeight: maxHeight.h, |
127 | maxWidth: maxWidth.h, | 135 | maxWidth: maxWidth.h, |
-
Please register or login to post a comment