Merge pull request alibaba#39 from hanxu317317/develop

feat(加入GridPaper&SliverGrid):

lib/widgets/components/Grid/GridPaper/demo.dart

@@ -0,0 +1,62 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:31
+ * email: [email protected]
+ * tartget:  xxx
+ */
+
+import 'package:flutter/material.dart';
+
+
+class GridPaperDemo extends StatefulWidget {
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<GridPaperDemo> {
+
+
+  Widget build(BuildContext context) {
+    return Container(
+      height: 400,
+      color: Color(0xffc91b3a),
+      child:  new GridView.count(
+          crossAxisCount: 2,
+          mainAxisSpacing: 10.0,
+          crossAxisSpacing: 4.0,
+          padding: const EdgeInsets.all(4.0),
+          childAspectRatio: 1.3,
+        children: <Widget>[
+          GridTile(
+            header: GridTileBar(
+              title: Text('title'),
+              subtitle: Text('subtitle'),
+              leading: Icon(Icons.add),
+              trailing: Text("trailing"),
+            ),
+            child: Container(),
+
+          ),
+          GridPaper(
+            color: Colors.red,
+            child: new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          ),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+        ],
+      )
+    );
+  }
+}

lib/widgets/components/Grid/GridPaper/index.dart

@@ -0,0 +1,44 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:26
+ * email: [email protected]
+ * tartget:  xxx
+ */
+import '../../../../common/widget_demo.dart';
+import 'package:flutter/material.dart';
+import 'demo.dart';
+
+const String _Text0 = """
+### **简介**
+> GridViewPaper是GridView中的item的一种展现形式, 会在上层浮现一层网络.
+
+""";
+
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Grid/GridPaper';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'GridPaper',
+      codeUrl: 'components/Grid/GridPaper/demo.dart',
+      contentList: [
+        _Text0,
+        GridPaperDemo(),
+        SizedBox(
+          height: 100.0,
+        )
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/GridPaper-class.html',
+    );
+  }
+}

lib/widgets/components/Grid/GridView/index.dart

@@ -12,12 +12,41 @@ import 'demo.dart';
 
 const String _Text0 = """
 ### **简介**
-> GridView 通常用来做GridTile的header与footer组件;
+> GridView在移动端上非常的常见的滚动列表,  会占满给出的空间区域.
 
 
 ### **基本用法**
 
-> 1231
+> 创建一个列表
+
+属性介绍
+
+- scrollDirection：滚动的方向，有垂直和水平两种，默认为垂直方向（Axis.vertical）。
+
+- reverse：默认是从上或者左向下或者右滚动的，这个属性控制是否反向，默认值为false，不反向滚动。
+
+- controller：控制child滚动时候的位置。
+
+- primary：是否是与父节点的PrimaryScrollController所关联的主滚动视图。
+
+- physics：滚动的视图如何响应用户的输入。
+
+- shrinkWrap：滚动方向的滚动视图内容是否应该由正在查看的内容所决定。
+
+- padding：四周的空白区域。
+
+- gridDelegate：控制GridView中子节点布局的delegate。
+
+- cacheExtent：缓存区域。
+
+### **进阶用法**
+
+> GridView 提供其他四种构造方法
+
+- GridView.builder
+- GridView.custom
+- GridView.count
+- GridView.extent
 """;
 
 
@@ -33,11 +62,14 @@ class _DemoState extends State<Demo> {
   @override
   Widget build(BuildContext context) {
     return WidgetDemo(
-      title: 'GridTileBar',
+      title: 'GridView',
       codeUrl: 'components/Grid/GridView/demo.dart',
       contentList: [
         _Text0,
         GridTileDemo(),
+        SizedBox(
+          height: 100.0,
+        )
       ],
       docUrl: 'https://docs.flutter.io/flutter/material/GridView-class.html',
     );

lib/widgets/components/Grid/SliverGrid/demo.dart

@@ -0,0 +1,63 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:31
+ * email: [email protected]
+ * tartget:  xxx
+ */
+
+import 'package:flutter/material.dart';
+
+
+class SliverGridDemo extends StatefulWidget {
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<SliverGridDemo> {
+
+  Widget showCustomScrollView() {
+    return new CustomScrollView(
+      slivers: <Widget>[
+        new SliverGrid(
+          gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(
+            maxCrossAxisExtent: 200.0,
+            mainAxisSpacing: 10.0,
+            crossAxisSpacing: 10.0,
+            childAspectRatio: 4.0,
+          ),
+          delegate: new SliverChildBuilderDelegate(
+                (BuildContext context, int index) {
+              return new Container(
+                alignment: Alignment.center,
+                color: Colors.cyan[100 * (index % 5)],
+                child: new Text('grid item $index'),
+              );
+            },
+            childCount: 20,
+          ),
+        ),
+//        new SliverFixedExtentList(
+//          itemExtent: 100.0,
+//          delegate: new SliverChildBuilderDelegate(
+//                (BuildContext context, int index) {
+//              return new Container(
+//                alignment: Alignment.center,
+//                color: Colors.lightBlue[100 * (index % 9)],
+//                child: new Text('list item $index'),
+//              );
+//            },
+//          ),
+//        ),
+      ],
+    );
+  }
+
+  Widget build(BuildContext context) {
+    return Container(
+      height: 400,
+      color: Color(0xffc91b3a),
+      child: showCustomScrollView()
+    );
+  }
+}

lib/widgets/components/Grid/SliverGrid/index.dart

@@ -0,0 +1,54 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:26
+ * email: [email protected]
+ * tartget:  xxx
+ */
+import '../../../../common/widget_demo.dart';
+import 'package:flutter/material.dart';
+import 'demo.dart';
+
+const String _Text0 = """
+### **简介**
+> SliverGrid 将多个item以每行二个的形式, 进行排列.
+
+### **基本用法**
+
+> 创建
+
+在排列列表时，将基于现有的小部件, 延迟创建可见子项的元素、状态和呈现对象。 也就是只有视口中的元素, 才会被创建, 类似于我们网页中的懒加载.
+
+> 销毁
+
+当元素滚动到视图之外时，关联的元素子树、状态和渲染对象将被销毁, 进入视觉窗口的元素将以懒加载的形式进行创建。
+
+""";
+
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Grid/SliverGrid';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'SliverGrid',
+      codeUrl: 'components/Grid/GridPaper/demo.dart',
+      contentList: [
+        _Text0,
+        SliverGridDemo(),
+        SizedBox(
+          height: 100.0,
+        )
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/SliverGrid-class.html',
+    );
+  }
+}

lib/widgets/components/Grid/index.dart

@@ -10,8 +10,10 @@
 import "package:flutter/material.dart";
 import '../../../model/widget.dart';
 import 'GridTile/index.dart' as GridTile;
-
+import 'GridView/index.dart' as GridView;
 import 'GridTileBar/index.dart' as GridTileBar;
+import 'GridPaper/index.dart' as GridPaper;
+import 'SliverGrid/index.dart' as SliverGrid;
 List<WidgetPoint> widgetPoints = [
   WidgetPoint(
     name: 'GridTile',
@@ -22,5 +24,20 @@ List<WidgetPoint> widgetPoints = [
     name: 'GridTileBar',
     routerName: GridTileBar.Demo.routeName,
     buildRouter: (BuildContext context) => GridTileBar.Demo(),
+  ),
+  WidgetPoint(
+    name: 'GridView',
+    routerName: GridView.Demo.routeName,
+    buildRouter: (BuildContext context) => GridView.Demo(),
+  ),
+  WidgetPoint(
+    name: 'GridPaper',
+    routerName: GridPaper.Demo.routeName,
+    buildRouter: (BuildContext context) => GridPaper.Demo(),
+  ),
+  WidgetPoint(
+    name: 'SliverGrid',
+    routerName: SliverGrid.Demo.routeName,
+    buildRouter: (BuildContext context) => SliverGrid.Demo(),
   )
 ];