Skip to content

Commit 5c04862

Browse files
wanwusangzhiwanwusangzhi
committed
增加gridview文档
1 parent b8f4168 commit 5c04862

File tree

13 files changed

+518
-118
lines changed

13 files changed

+518
-118
lines changed

‎docs/widget/scrollview/gridview/code.md‎

Lines changed: 113 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
### GridView.count
12
```
23
import 'package:flutter/material.dart';
34
class Example extends StatelessWidget {
@@ -37,4 +38,115 @@ class Example extends StatelessWidget {
3738
}
3839
}
3940
40-
```
41+
```
42+
43+
### GridView.extent
44+
```extent
45+
import 'package:flutter/material.dart';
46+
47+
class Index extends StatelessWidget {
48+
@override
49+
Widget build(BuildContext context) {
50+
return Scaffold(
51+
appBar: AppBar(
52+
title: Text('GridView.extent'),
53+
),
54+
body: GridView.extent(
55+
scrollDirection: Axis.vertical,
56+
maxCrossAxisExtent: 150,
57+
mainAxisSpacing: 10,
58+
crossAxisSpacing: 10,
59+
childAspectRatio: 1,
60+
padding: EdgeInsets.all(10),
61+
children: List.generate(
62+
10,
63+
(index) {
64+
return Container(
65+
decoration: BoxDecoration(
66+
border: Border.all(
67+
width: 0.1,
68+
)
69+
),
70+
child: Image.network('https://dianhu-1253537286.cos.eu-moscow.myqcloud.com/efoxfile/Moschat/ojbk.png'),
71+
);
72+
},
73+
),
74+
),
75+
);
76+
}
77+
}
78+
79+
```
80+
81+
### GridView.custom
82+
```flutter
83+
import 'package:flutter/material.dart';
84+
85+
class Index extends StatelessWidget {
86+
@override
87+
Widget build(BuildContext context) {
88+
return Scaffold(
89+
appBar: AppBar(
90+
title: Text('GridView.costom'),
91+
),
92+
body: GridView.custom(
93+
// gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
94+
// crossAxisCount: 10, // 单行最大10个元素布局
95+
// ),
96+
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
97+
maxCrossAxisExtent: 100, // 单列最大宽度100
98+
),
99+
childrenDelegate: SliverChildBuilderDelegate(
100+
(context, index) {
101+
return Container(
102+
child: Text('$index'),
103+
);
104+
},
105+
// 滚动时回调函数
106+
semanticIndexCallback: (widget, index) {
107+
print('index $index');
108+
},
109+
),
110+
// 数量滚滚动限制，类似GridView.count
111+
// childrenDelegate: SliverChildListDelegate(
112+
// List.generate(30, (index) {
113+
// return Container(
114+
// child: Text('index $index'),
115+
// );
116+
// }),
117+
// ),
118+
),
119+
);
120+
}
121+
}
122+
123+
```
124+
125+
### GridView.builder
126+
```flutter
127+
import 'package:flutter/material.dart';
128+
129+
class Index extends StatelessWidget {
130+
@override
131+
Widget build(BuildContext context) {
132+
return Scaffold(
133+
appBar: AppBar(
134+
title: Text('GridView.builder'),
135+
),
136+
body: GridView.builder(
137+
itemCount: 31,
138+
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
139+
crossAxisCount: 3, // 单行最大数量值
140+
),
141+
itemBuilder: (context, index) {
142+
print('index $index');
143+
return Center(
144+
child: Text('index $index'),
145+
);
146+
},
147+
),
148+
);
149+
}
150+
}
151+
152+
```

‎docs/widget/scrollview/gridview/index.md‎

Lines changed: 156 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
## ***GridView***
1+
## **GridView**
22

3-
> GridView是自带滚动的二维列表组件。
3+
>
4+
GridView是自带滚动的二维列表组件。
45

56
### 构造方法
67
```
@@ -22,7 +23,7 @@ GridView({
2223
int semanticChildCount
2324
})
2425
```
25-
### 进阶用法
26+
### 高级用法
2627
```
2728
GridView.builder // 动态加载，用于分页较多
2829
GridView.count // 指定数据加载
@@ -32,7 +33,7 @@ GridView.extent
3233

3334
### 用例
3435
* GridView.count
35-
>
36+
> 指定长度创建子组件
3637
crossAxisCount：必填，指定列数
3738
children: 子组件
3839
reverse：默认false, 当为true时反转滚动方向，即上到下反转成下到上，左到右反转成右到左
@@ -46,35 +47,159 @@ mainAxisSpacing: 主轴方向间距, 主轴方向由scrollDirection确定
4647
crossAxisSpacing: 副轴方向间距,
4748
childAspectRatio: 子元素中宽高比，宽度由ViewPort/crossAxisCount确定
4849

50+
```
51+
GridView.count(
52+
crossAxisCount: 3,
53+
reverse: false,
54+
scrollDirection: Axis.vertical,
55+
controller: ScrollController(
56+
initialScrollOffset: 0.0,
57+
),
58+
crossAxisSpacing: 10.0,
59+
mainAxisSpacing: 20.0,
60+
childAspectRatio: 2,
61+
physics: BouncingScrollPhysics(),
62+
primary: false,
63+
children: List.generate(15, (index) {
64+
return Container(
65+
decoration: BoxDecoration(
66+
border: Border.all(
67+
color: Colors.redAccent,
68+
),
69+
),
70+
child: Center(
71+
child: Text('Item $index',
72+
style: Theme.of(context).textTheme.headline),
73+
),
74+
);
75+
}, growable: false),
76+
),
77+
);
78+
```
79+
80+
* GridView.extent
81+
> 指定长度创建子组件
82+
maxCrossAxisExtent: 设置副轴最大单项宽度，如外层容器宽度100, maxCrossAxisExtent为50，单行显示2个widget，如果外层容器变成150,则单行显示3个widget.如果超过容器宽度，或者单行没法满足两个，则按照一行填充1个widget。下面代码可以通过修改scrollDirection方向来看到不同效果。
83+
4984
```
50-
GridView.count(
51-
crossAxisCount: 3,
52-
reverse: false,
53-
scrollDirection: Axis.vertical,
54-
controller: ScrollController(
55-
initialScrollOffset: 0.0,
56-
),
57-
crossAxisSpacing: 10.0,
58-
mainAxisSpacing: 20.0,
59-
childAspectRatio: 2,
60-
physics: BouncingScrollPhysics(),
61-
primary: false,
62-
children: List.generate(15, (index) {
63-
return Container(
64-
decoration: BoxDecoration(
65-
border: Border.all(
66-
color: Colors.redAccent,
67-
),
68-
),
69-
child: Center(
70-
child: Text('Item $index',
71-
style: Theme.of(context).textTheme.headline),
72-
),
73-
);
74-
}, growable: false),
85+
GridView.extent(
86+
scrollDirection: Axis.vertical,
87+
maxCrossAxisExtent: 150,
88+
mainAxisSpacing: 10,
89+
crossAxisSpacing: 10,
90+
childAspectRatio: 1,
91+
children: List.generate(
92+
10,
93+
(index) {
94+
return Container(
95+
decoration: BoxDecoration(
96+
border: Border.all(
97+
width: 0.1,
98+
)
99+
),
100+
child: Image.network('https://dianhu-1253537286.cos.eu-moscow.myqcloud.com/efoxfile/Moschat/ojbk.png'),
101+
);
102+
},
103+
),
75104
),
76105
);
77106
```
78107

79-
>ScrollPhysics类:
80-
* BouncingScrollPhysics，ClampingScrollPhysics，AlwaysScrollableScrollPhysics，NeverScrollableScrollPhysics
108+
* GridView.custom
109+
> 动态创建子组件
110+
SliverGridDelegate gridDelegate : 布局相关
111+
SliverChildDelegate childrenDelegate：动态创建子组件
112+
113+
```
114+
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount 单行最大数量布局
115+
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
116+
crossAxisCount: 10, // 单行最大10个元素布局
117+
),
118+
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent 单列最大宽度布局
119+
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
120+
maxCrossAxisExtent: 100, // 单列最大宽度100
121+
),
122+
// 创建无限滚动
123+
childrenDelegate: SliverChildBuilderDelegate(
124+
(context, index) {
125+
return Container(
126+
child: Text('$index'),
127+
);
128+
},
129+
// 滚动时回调函数
130+
semanticIndexCallback: (widget, index) {
131+
print('index $index');
132+
},
133+
),
134+
// 创建有数量的滚动
135+
childrenDelegate: SliverChildListDelegate(
136+
List.generate(30, (index) {
137+
return Container(
138+
child: Text('index $index'),
139+
);
140+
}),
141+
),
142+
```
143+
```
144+
GridView.custom(
145+
// gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
146+
// crossAxisCount: 10, // 单行最大10个元素布局
147+
// ),
148+
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
149+
maxCrossAxisExtent: 100, // 单列最大宽度100
150+
),
151+
// childrenDelegate: SliverChildBuilderDelegate(
152+
// (context, index) {
153+
// return Container(
154+
// child: Text('$index'),
155+
// );
156+
// },
157+
// // 滚动时回调函数
158+
// semanticIndexCallback: (widget, index) {
159+
// print('index $index');
160+
// },
161+
// ),
162+
// 数量滚滚动限制，类似GridView.count
163+
childrenDelegate: SliverChildListDelegate(
164+
List.generate(30, (index) {
165+
return Container(
166+
child: Text('index $index'),
167+
);
168+
}),
169+
),
170+
)
171+
```
172+
173+
* GridView.builder
174+
> 按需创建组件，跟custom差不多，但增加itemCount来限制加载子组件最大值，itemCount取代childrenDelegate来动态创建组件。
175+
itemCount： 子组件最大数量，默认没有限制。效果跟GridView.custom一致
176+
gridDelegate：设置布局，单行最大布局数量或单列单项最大长度，参考GridView.custom
177+
itemBuilder：子组件动态加载回调方法，长度受itemCount值影响，itemCount不为0且存在时，数量需小于itemCount值
178+
179+
```
180+
GridView.builder(
181+
itemCount: 31,
182+
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
183+
crossAxisCount: 3, // 单行最大数量值
184+
),
185+
itemBuilder: (context, index) {
186+
print('index $index');
187+
return Center(
188+
child: Text('index $index'),
189+
);
190+
},
191+
),
192+
```
193+
194+
### 其它补充
195+
* ScrollPhysics
196+
> BouncingScrollPhysics
197+
> ClampingScrollPhysics
198+
> AlwaysScrollableScrollPhysics
199+
> NeverScrollableScrollPhysics
200+
* SliverGridDelegate
201+
> SliverGridDelegateWithFixedCrossAxisCount
202+
> SliverGridDelegateWithMaxCrossAxisExtent
203+
* SliverChildDelegate
204+
> SliverChildBuilderDelegate
205+
> SliverChildListDelegate

0 commit comments

Comments
 (0)