diff --git a/lib/widgets/components/Grid/GridPaper/demo.dart b/lib/widgets/components/Grid/GridPaper/demo.dart new file mode 100644 index 00000000..5a0f17e8 --- /dev/null +++ b/lib/widgets/components/Grid/GridPaper/demo.dart @@ -0,0 +1,62 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 07/01/2019 + * Time: 10:31 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; + + +class GridPaperDemo extends StatefulWidget { + _Demo createState() => _Demo(); +} + +class _Demo extends State { + + + 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: [ + 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), + ], + ) + ); + } +} diff --git a/lib/widgets/components/Grid/GridPaper/index.dart b/lib/widgets/components/Grid/GridPaper/index.dart new file mode 100644 index 00000000..1044d44a --- /dev/null +++ b/lib/widgets/components/Grid/GridPaper/index.dart @@ -0,0 +1,44 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 07/01/2019 + * Time: 10:26 + * email: sanfan.hx@alibaba-inc.com + * 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 { + @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', + ); + } +} diff --git a/lib/widgets/components/Grid/GridView/index.dart b/lib/widgets/components/Grid/GridView/index.dart index 45b75165..dac9fcd2 100644 --- a/lib/widgets/components/Grid/GridView/index.dart +++ b/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 { @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', ); diff --git a/lib/widgets/components/Grid/SliverGrid/demo.dart b/lib/widgets/components/Grid/SliverGrid/demo.dart new file mode 100644 index 00000000..8950e17f --- /dev/null +++ b/lib/widgets/components/Grid/SliverGrid/demo.dart @@ -0,0 +1,63 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 07/01/2019 + * Time: 10:31 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; + + +class SliverGridDemo extends StatefulWidget { + _Demo createState() => _Demo(); +} + +class _Demo extends State { + + Widget showCustomScrollView() { + return new CustomScrollView( + slivers: [ + 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() + ); + } +} diff --git a/lib/widgets/components/Grid/SliverGrid/index.dart b/lib/widgets/components/Grid/SliverGrid/index.dart new file mode 100644 index 00000000..6b8c2a6a --- /dev/null +++ b/lib/widgets/components/Grid/SliverGrid/index.dart @@ -0,0 +1,54 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 07/01/2019 + * Time: 10:26 + * email: sanfan.hx@alibaba-inc.com + * 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 { + @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', + ); + } +} diff --git a/lib/widgets/components/Grid/index.dart b/lib/widgets/components/Grid/index.dart index 0cc69956..f2f4b06c 100644 --- a/lib/widgets/components/Grid/index.dart +++ b/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 widgetPoints = [ WidgetPoint( name: 'GridTile', @@ -22,5 +24,20 @@ List 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(), ) ];