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