优化 Flex 组件案例

ywda · Feb 21, 2022 · 1e858ac · 1e858ac
1 parent 2cc5dad
commit 1e858ac
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 36 deletions.
diff --git a/lib/widget_system/widgets/MultiChildRenderObjectWidget/Flex/node1_direction.dart b/lib/widget_system/widgets/MultiChildRenderObjectWidget/Flex/node1_direction.dart
@@ -13,23 +13,40 @@ import 'package:flutter/material.dart';
 //          "【direction】 : 方向   【Axis】",
 //    }
 class DirectionFlex extends StatelessWidget {
+  static TextStyle textStyle =
+      TextStyle(color: Colors.white, fontWeight: FontWeight.bold);
 
-  final  redBox= Container(
-    color: Colors.red,
-    height: 30,
-    width: 40,
-  );
-
-  final blueBox= Container(
+  final blueBox = Container(
+    alignment: Alignment.center,
     color: Colors.blue,
     height: 20,
     width: 30,
+    child: Text(
+      '1',
+      style: textStyle,
+    ),
+  );
+
+  final redBox = Container(
+    alignment: Alignment.center,
+    color: Colors.red,
+    height: 30,
+    width: 40,
+    child: Text(
+      '2',
+      style: textStyle,
+    ),
   );
 
-  final greenBox= Container(
+  final greenBox = Container(
+    alignment: Alignment.center,
     color: Colors.green,
     height: 20,
     width: 20,
+    child: Text(
+      '3',
+      style: textStyle,
+    ),
   );
 
   @override

diff --git a/lib/widget_system/widgets/MultiChildRenderObjectWidget/Flex/node2_mainAxisAlignment.dart b/lib/widget_system/widgets/MultiChildRenderObjectWidget/Flex/node2_mainAxisAlignment.dart
@@ -13,22 +13,40 @@ import 'package:flutter/material.dart';
 //    }
 class MainAxisAlignmentFlex extends StatelessWidget {
 
-  final  redBox= Container(
-    color: Colors.red,
-    height: 30,
-    width: 40,
-  );
+  static TextStyle textStyle =
+  TextStyle(color: Colors.white, fontWeight: FontWeight.bold);
 
-  final blueBox= Container(
+  final blueBox = Container(
+    alignment: Alignment.center,
     color: Colors.blue,
     height: 20,
     width: 30,
+    child: Text(
+      '1',
+      style: textStyle,
+    ),
+  );
+
+  final redBox = Container(
+    alignment: Alignment.center,
+    color: Colors.red,
+    height: 30,
+    width: 40,
+    child: Text(
+      '2',
+      style: textStyle,
+    ),
   );
 
-  final greenBox= Container(
+  final greenBox = Container(
+    alignment: Alignment.center,
     color: Colors.green,
     height: 20,
     width: 20,
+    child: Text(
+      '3',
+      style: textStyle,
+    ),
   );
 
   @override

diff --git a/lib/widget_system/widgets/MultiChildRenderObjectWidget/Flex/node3_crossAxisAlignment.dart b/lib/widget_system/widgets/MultiChildRenderObjectWidget/Flex/node3_crossAxisAlignment.dart
@@ -13,22 +13,40 @@ import 'package:flutter/material.dart';
 //    }
 class CrossAxisAlignmentFlex extends StatelessWidget {
 
-  final  redBox= Container(
-    color: Colors.red,
-    height: 30,
-    width: 40,
-  );
+  static TextStyle textStyle =
+  TextStyle(color: Colors.white, fontWeight: FontWeight.bold);
 
-  final blueBox= Container(
+  final blueBox = Container(
+    alignment: Alignment.center,
     color: Colors.blue,
     height: 20,
     width: 30,
+    child: Text(
+      '1',
+      style: textStyle,
+    ),
+  );
+
+  final redBox = Container(
+    alignment: Alignment.center,
+    color: Colors.red,
+    height: 30,
+    width: 40,
+    child: Text(
+      '2',
+      style: textStyle,
+    ),
   );
 
-  final greenBox= Container(
+  final greenBox = Container(
+    alignment: Alignment.center,
     color: Colors.green,
     height: 20,
     width: 20,
+    child: Text(
+      '3',
+      style: textStyle,
+    ),
   );
 
   @override

diff --git a/lib/widget_system/widgets/MultiChildRenderObjectWidget/Flex/node4_verticalDirection.dart b/lib/widget_system/widgets/MultiChildRenderObjectWidget/Flex/node4_verticalDirection.dart
@@ -13,22 +13,40 @@ import 'package:flutter/material.dart';
 //    }
 class VerticalDirectionFlex extends StatelessWidget {
 
-  final  redBox= Container(
-    color: Colors.red,
-    height: 30,
-    width: 40,
-  );
+  static TextStyle textStyle =
+  TextStyle(color: Colors.white, fontWeight: FontWeight.bold);
 
-  final blueBox= Container(
+  final blueBox = Container(
+    alignment: Alignment.center,
     color: Colors.blue,
     height: 20,
     width: 30,
+    child: Text(
+      '1',
+      style: textStyle,
+    ),
+  );
+
+  final redBox = Container(
+    alignment: Alignment.center,
+    color: Colors.red,
+    height: 30,
+    width: 40,
+    child: Text(
+      '2',
+      style: textStyle,
+    ),
   );
 
-  final greenBox= Container(
+  final greenBox = Container(
+    alignment: Alignment.center,
     color: Colors.green,
     height: 20,
     width: 20,
+    child: Text(
+      '3',
+      style: textStyle,
+    ),
   );
 
   @override

diff --git a/lib/widget_system/widgets/MultiChildRenderObjectWidget/Flex/node5_textDirection.dart b/lib/widget_system/widgets/MultiChildRenderObjectWidget/Flex/node5_textDirection.dart
@@ -13,22 +13,40 @@ import 'package:flutter/material.dart';
 //    }
 class TextDirectionFlex extends StatelessWidget {
 
-  final  redBox= Container(
-    color: Colors.red,
-    height: 30,
-    width: 40,
-  );
+  static TextStyle textStyle =
+  TextStyle(color: Colors.white, fontWeight: FontWeight.bold);
 
-  final blueBox= Container(
+  final blueBox = Container(
+    alignment: Alignment.center,
     color: Colors.blue,
     height: 20,
     width: 30,
+    child: Text(
+      '1',
+      style: textStyle,
+    ),
+  );
+
+  final redBox = Container(
+    alignment: Alignment.center,
+    color: Colors.red,
+    height: 30,
+    width: 40,
+    child: Text(
+      '2',
+      style: textStyle,
+    ),
   );
 
-  final greenBox= Container(
+  final greenBox = Container(
+    alignment: Alignment.center,
     color: Colors.green,
     height: 20,
     width: 20,
+    child: Text(
+      '3',
+      style: textStyle,
+    ),
   );
 
   @override