Wrap

Author: DIVINER-only

docs/widget/regular/wrap/index.md

@@ -0,0 +1,31 @@
+## **Wrap**
+
+>
+该控件以多个水平或垂直方向显示其子控件
+* 单行的Wrap和Row表现几乎一致，单列的Wrap和Column表现几乎一致，但是Row同Column系单行单列的，Wrap中行或列空间不足时，会自动换行
+
+### 构造方法
+``` dart
+Wrap({
+  Key key,
+  this.direction = Axis.horizontal,
+  this.alignment = WrapAlignment.start,
+  this.spacing = 0.0,
+  this.runAlignment = WrapAlignment.start,
+  this.runSpacing = 0.0,
+  this.crossAxisAlignment = WrapCrossAlignment.start,
+  this.textDirection,
+  this.verticalDirection = VerticalDirection.down,
+  List<Widget> children = const <Widget>[],
+})
+```
+
+### 属性介绍
+* direction：主轴的方向，默认为水平，值：Axis.horizontal/vertical
+* alignment：主轴方向上的对齐方式，默认为start, 值： WrapAlignment.start/center/end/spaceAround/spaceBetween/spaceEvenly
+* spacing：主轴方向上的间距。
+* runAlignment：run的对齐方式, 值： WrapAlignment.start/center/end/spaceAround/spaceBetween/spaceEvenly
+* runSpacing：run的间距。
+* crossAxisAlignment：交叉轴（crossAxis）方向上的对齐方式,值: WrapCrossAlignment.start/center/end
+* textDirection：文本方向, 值：TextDirection.ltr/rtl
+* verticalDirection：定义了children摆放顺序，默认是down,值： VerticalDirection.down/up

lib/widget/regular/constrainedbox/index.dart

@@ -5,7 +5,7 @@ import 'demo_expand.dart' as DemoExpand;
 
 class Index extends StatefulWidget {
   static String title = 'ConstrainedBox';
-  static String originCodeUrl = '';
+  static String originCodeUrl = 'https://docs.flutter.io/flutter/widgets/ConstrainedBox-class.html';
   static String mdUrl = 'docs/widget/regular/constrainedbox/index.md';
   @override
   _IndexState createState() => _IndexState();

lib/widget/regular/index.dart

@@ -8,6 +8,7 @@ import 'center/index.dart' as Center;
 import 'fittedbox/index.dart' as FittedBox;
 import 'aspectratio/index.dart' as AspectRatio;
 import 'constrainedbox/index.dart' as ConstrainedBox;
+import 'wrap/index.dart' as Wrap;
 
 const nameSpaces = '/regular_';
 
@@ -56,6 +57,11 @@ List widgets = [
     widget: ConstrainedBox.Index(),
     code: 57709, // low_priority 
     title: ConstrainedBox.Index.title
+  ),
+  ItemInfo(
+    widget: Wrap.Index(),
+    code: 59385, // pages 
+    title: Wrap.Index.title
   )
 ];
 

lib/widget/regular/wrap/demo.dart

@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+
+class Index extends StatefulWidget {
+  @override
+  _IndexState createState() => _IndexState();
+}
+
+class _IndexState extends State<Index> {
+  var direction = Axis.horizontal;
+  var directionValue = 'horizontal';
+  var verticalDirection = VerticalDirection.down;
+  var verticalDirectionValue = 'down';
+  var spacing = 10.0;
+  var runSpacing = 10.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('Wrap'),),
+      body: ListView(
+        children: <Widget>[
+          SizedBox(
+            child: Text('点击下面值查看变化'),
+          ),
+          Wrap(
+            alignment: WrapAlignment.center,
+            children: <Widget>[
+              FlatButton(
+                child: Text('direction:$directionValue', style: TextStyle(fontSize: 11.0),),
+                onPressed: (){
+                  setState(() {
+                    direction == Axis.horizontal ? direction = Axis.vertical : direction = Axis.horizontal;
+                    directionValue == 'horizontal' ? directionValue = 'vertical' : directionValue = 'horizontal';
+                  });
+                },
+              ),
+              FlatButton(
+                child: Text('verticalDirection:$verticalDirectionValue', style: TextStyle(fontSize: 11.0),),
+                onPressed: (){
+                  setState(() {
+                    verticalDirection == VerticalDirection.up ? verticalDirection = VerticalDirection.down : verticalDirection = VerticalDirection.up;
+                    verticalDirectionValue == 'up' ? verticalDirectionValue = 'down' : verticalDirectionValue = 'up';
+                  });
+                },
+              ),
+              FlatButton(
+                child: Text('spacing:$spacing', style: TextStyle(fontSize: 13.0),),
+                onPressed: (){
+                  setState(() {
+                    spacing == 10 ? spacing = 15 : spacing = 10;
+                  });
+                },
+              ),
+              FlatButton(
+                child: Text('runSpacing:$runSpacing', style: TextStyle(fontSize: 13.0),),
+                onPressed: (){
+                  setState(() {
+                    runSpacing == 10 ? runSpacing = 15 : runSpacing = 10;
+                  });
+                },
+              )
+            ],
+          ),
+          Container(
+            width: double.infinity,
+            height: 200,
+            color: Theme.of(context).primaryColor,
+            child: Wrap(
+              direction: direction,
+              alignment: WrapAlignment.center,
+              spacing: spacing,
+              runAlignment: WrapAlignment.center,
+              runSpacing: runSpacing,
+              crossAxisAlignment: WrapCrossAlignment.start,
+              textDirection: TextDirection.ltr,
+              verticalDirection: verticalDirection,
+              children: List.generate(7, (index) {
+                return Chip(
+                  avatar: CircleAvatar(
+                    backgroundColor: Theme.of(context).primaryColor,
+                    child: Text('E', style: TextStyle(fontSize: 20.0),),
+                  ),
+                  label: Text('Efox$index'),
+                );
+              })
+            ),
+          )
+        ],
+      )
+    );
+  }
+}

lib/widget/regular/wrap/index.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:efox_flutter/components/widgetComp.dart' as WidgetComp;
+import 'demo.dart' as Demo;
+
+class Index extends StatefulWidget {
+  static String title = 'Wrap';
+  static String originCodeUrl = 'https://docs.flutter.io/flutter/widgets/Wrap-class.html';
+  static String mdUrl = 'docs/widget/regular/wrap/index.md';
+  @override
+  _IndexState createState() => _IndexState();
+}
+
+class _IndexState extends State<Index> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetComp.Index(
+      title: Index.title,
+      originCodeUrl: Index.originCodeUrl,
+      mdUrl: Index.mdUrl,
+      demoChild: <Widget>[
+        Demo.Index()
+      ],
+    );
+  }
+}

pubspec.yaml

@@ -65,6 +65,7 @@ flutter:
       - docs/widget/regular/fittedbox/
       - docs/widget/regular/aspectratio/
       - docs/widget/regular/constrainedbox/
+      - docs/widget/regular/wrap/
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.io/assets-and-images/#resolution-aware.