add open grammar support

hackware1993 · hackware1993 · commit bbfc471a752c · 2022-05-22T00:21:19.000+08:00
diff --git a/README.md b/README.md
@@ -174,6 +174,63 @@ two-way constraints, such as chains(not yet supported, please use with Flex).
     4. showChildDepth
     5. debugPrintConstraints
     6. showLayoutPerformanceOverlay
+24. open grammar gives you more flexibility to organize child elements, solving the problem of using
+    only limited expressions in the children list
+
+```dart
+class OpenGrammarExample extends StatelessWidget {
+  const OpenGrammarExample({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: ConstraintLayout().open(() {
+        if (DateTime
+            .now()
+            .millisecond % 2 == 0) {
+          Container(
+            color: Colors.red,
+          ).applyConstraint(
+            size: 200,
+            centerTo: parent,
+          );
+        } else {
+          Container(
+            color: Colors.yellow,
+          ).applyConstraint(
+            size: 200,
+            centerTo: parent,
+          );
+        }
+
+        for (int i = 0; i < 5; i++) {
+          Row().open(() {
+            for (int j = 0; j < 10; j++) {
+              Text("$i x $j").enter();
+              const SizedBox(
+                width: 20,
+              ).enter();
+            }
+          }).applyConstraint(
+            height: 100,
+            left: parent.left.margin(100),
+            top: i == 0 ? parent.top : sId(-1).bottom,
+          );
+        }
+
+        int i = 0;
+        while (i < 100) {
+          Text("$i").applyConstraint(
+            left: parent.left,
+            top: i == 0 ? parent.top : sId(-1).bottom,
+          );
+          i++;
+        }
+      }),
+    );
+  }
+}
+```
 
 Follow-up development plan:
 
diff --git a/README_CN.md b/README_CN.md
@@ -147,6 +147,62 @@ build 耗时有时甚至超过渲染耗时。
     4. showChildDepth
     5. debugPrintConstraints
     6. showLayoutPerformanceOverlay
+24. 开放式语法让你更灵活的来组织子元素，解决了在 children 列表中仅能使用有限的表达式的问题
+
+```dart
+class OpenGrammarExample extends StatelessWidget {
+  const OpenGrammarExample({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: ConstraintLayout().open(() {
+        if (DateTime
+            .now()
+            .millisecond % 2 == 0) {
+          Container(
+            color: Colors.red,
+          ).applyConstraint(
+            size: 200,
+            centerTo: parent,
+          );
+        } else {
+          Container(
+            color: Colors.yellow,
+          ).applyConstraint(
+            size: 200,
+            centerTo: parent,
+          );
+        }
+
+        for (int i = 0; i < 5; i++) {
+          Row().open(() {
+            for (int j = 0; j < 10; j++) {
+              Text("$i x $j").enter();
+              const SizedBox(
+                width: 20,
+              ).enter();
+            }
+          }).applyConstraint(
+            height: 100,
+            left: parent.left.margin(100),
+            top: i == 0 ? parent.top : sId(-1).bottom,
+          );
+        }
+
+        int i = 0;
+        while (i < 100) {
+          Text("$i").applyConstraint(
+            left: parent.left,
+            top: i == 0 ? parent.top : sId(-1).bottom,
+          );
+          i++;
+        }
+      }),
+    );
+  }
+}
+```
 
 后续开发计划:
 
diff --git a/example/home.dart b/example/home.dart
@@ -14,6 +14,7 @@ import 'grid.dart';
 import 'guideline.dart';
 import 'horizontal_list.dart';
 import 'margin.dart';
+import 'open_grammar.dart';
 import 'percentage_layout.dart';
 import 'pinned_position.dart';
 import 'relative_id.dart';
@@ -29,6 +30,7 @@ class ExampleHome extends StatelessWidget {
 
   final Map<String, Widget?> exampleMap = {
     'Summary': const SummaryExample(),
+    'Open Grammar': const OpenGrammarExample(),
     'Guideline': const GuidelineExample(),
     'Barrier': const BarrierExample(),
     'Complex List': const ComplexListExample(),
diff --git a/example/open_grammar.dart b/example/open_grammar.dart
@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_constraintlayout/flutter_constraintlayout.dart';
+
+import 'custom_app_bar.dart';
+
+class OpenGrammarExample extends StatelessWidget {
+  const OpenGrammarExample({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: const CustomAppBar(
+        title: 'Open Grammar',
+        codePath: 'example/open_grammar.dart',
+      ),
+      body: ConstraintLayout().open(() {
+        if (DateTime.now().millisecond % 2 == 0) {
+          Container(
+            color: Colors.red,
+          ).applyConstraint(
+            size: 200,
+            centerTo: parent,
+          );
+        } else {
+          Container(
+            color: Colors.yellow,
+          ).applyConstraint(
+            size: 200,
+            centerTo: parent,
+          );
+        }
+
+        for (int i = 0; i < 5; i++) {
+          Row().open(() {
+            for (int j = 0; j < 10; j++) {
+              Text("$i x $j").enter();
+              const SizedBox(
+                width: 20,
+              ).enter();
+            }
+          }).applyConstraint(
+            height: 100,
+            left: parent.left.margin(100),
+            top: i == 0 ? parent.top : sId(-1).bottom,
+          );
+        }
+
+        int i = 0;
+        while (i < 100) {
+          Text("$i").applyConstraint(
+            left: parent.left,
+            top: i == 0 ? parent.top : sId(-1).bottom,
+          );
+          i++;
+        }
+      }),
+    );
+  }
+}
diff --git a/lib/src/core.dart b/lib/src/core.dart
@@ -83,7 +83,7 @@ class ConstraintLayout extends MultiChildRenderObjectWidget {
   ConstraintLayout({
     Key? key,
     this.childConstraints,
-    required List<Widget> children,
+    List<Widget>? children,
     this.showLayoutPerformanceOverlay = false,
     this.showHelperWidgets = false,
     this.showClickArea = false,
@@ -96,7 +96,7 @@ class ConstraintLayout extends MultiChildRenderObjectWidget {
     this.controller,
   }) : super(
           key: key,
-          children: children,
+          children: children ?? [],
         );
 
   @override
diff --git a/lib/src/extensions.dart b/lib/src/extensions.dart
@@ -48,9 +48,67 @@ class OffBuildWidget extends StatelessWidget {
   int get hashCode => id.hashCode;
 }
 
+class MultiChildWidgetContext {
+  static MultiChildWidgetContext? currentContext;
+  List<Widget> contextChildren = [];
+}
+
+extension MultiChildWidgetChildExt on Widget {
+  Widget enter() {
+    MultiChildWidgetContext.currentContext?.contextChildren.add(this);
+    return this;
+  }
+}
+
+extension ConstraintLayoutExt on MultiChildRenderObjectWidget {
+  Widget open(void Function() block) {
+    MultiChildWidgetContext? temp = MultiChildWidgetContext.currentContext;
+    MultiChildWidgetContext context = MultiChildWidgetContext();
+    MultiChildWidgetContext.currentContext = context;
+    block();
+    MultiChildWidgetContext.currentContext = temp;
+    if (this is ConstraintLayout) {
+      (this as ConstraintLayout).children.addAll(context.contextChildren);
+    } else if (this is Row) {
+      Row row = (this as Row);
+      return Row(
+          key: key,
+          mainAxisAlignment: row.mainAxisAlignment,
+          mainAxisSize: row.mainAxisSize,
+          crossAxisAlignment: row.crossAxisAlignment,
+          textDirection: row.textDirection,
+          verticalDirection: row.verticalDirection,
+          textBaseline: row.textBaseline,
+          children: context.contextChildren);
+    } else if (this is Column) {
+      Column column = (this as Column);
+      return Column(
+          key: key,
+          mainAxisAlignment: column.mainAxisAlignment,
+          mainAxisSize: column.mainAxisSize,
+          crossAxisAlignment: column.crossAxisAlignment,
+          textDirection: column.textDirection,
+          verticalDirection: column.verticalDirection,
+          textBaseline: column.textBaseline,
+          children: context.contextChildren);
+    } else if (this is Stack) {
+      Stack stack = (this as Stack);
+      return Stack(
+          key: key,
+          alignment: stack.alignment,
+          textDirection: stack.textDirection,
+          fit: stack.fit,
+          overflow: stack.overflow,
+          clipBehavior: stack.clipBehavior,
+          children: context.contextChildren);
+    }
+    return this;
+  }
+}
+
 /// For easy use
-extension ConstrainedWidgetsExt on Widget {
-  Constrained applyConstraint({
+extension ConstrainedWidgetExt on Widget {
+  Widget applyConstraint({
     ConstraintId? id,
     double width = wrapContent,
     double height = wrapContent,
@@ -188,27 +246,27 @@ extension ConstrainedWidgetsExt on Widget {
         calcOffsetCallback: calcOffsetCallback,
       ),
       child: this,
-    );
+    ).enter();
   }
 
-  Constrained apply({
+  Widget apply({
     required Constraint constraint,
   }) {
     return Constrained(
       key: key,
       constraint: constraint,
       child: this,
-    );
+    ).enter();
   }
 
-  UnConstrained applyConstraintId({
+  Widget applyConstraintId({
     required ConstraintId id,
   }) {
     return UnConstrained(
       key: key,
       id: id,
       child: this,
-    );
+    ).enter();
   }
 
   /// When the layout is complex, if the child elements need to be repainted frequently, it
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -42,4 +42,5 @@ flutter:
     - example/pinned_position.dart
     - example/arbitrary_position.dart
     - example/constraint_controller.dart
-    - example/translate.dart
+    - example/translate.dart
+    - example/open_grammar.dart
