Skip to content

Commit

Permalink
feat(加入GridPaper&SliverGrid):
Browse files Browse the repository at this point in the history
  • Loading branch information
hanxu317317 committed Jan 13, 2019
1 parent 0a3bd9b commit 095387f
Show file tree
Hide file tree
Showing 5 changed files with 235 additions and 0 deletions.
62 changes: 62 additions & 0 deletions lib/widgets/components/Grid/GridPaper/demo.dart
Original file line number Diff line number Diff line change
@@ -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),
],
)
);
}
}
44 changes: 44 additions & 0 deletions lib/widgets/components/Grid/GridPaper/index.dart
Original file line number Diff line number Diff line change
@@ -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',
);
}
}
63 changes: 63 additions & 0 deletions lib/widgets/components/Grid/SliverGrid/demo.dart
Original file line number Diff line number Diff line change
@@ -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()
);
}
}
54 changes: 54 additions & 0 deletions lib/widgets/components/Grid/SliverGrid/index.dart
Original file line number Diff line number Diff line change
@@ -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',
);
}
}
12 changes: 12 additions & 0 deletions lib/widgets/components/Grid/index.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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<WidgetPoint> widgetPoints = [
WidgetPoint(
name: 'GridTile',
Expand All @@ -27,5 +29,15 @@ List<WidgetPoint> 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(),
)
];

0 comments on commit 095387f

Please sign in to comment.