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/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 4b109f8b..f2f4b06c 100644 --- a/lib/widgets/components/Grid/index.dart +++ b/lib/widgets/components/Grid/index.dart @@ -12,6 +12,8 @@ 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', @@ -27,5 +29,15 @@ List widgetPoints = [ 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(), ) ];