Skip to content

Commit adbd7a4

Browse files
authored
Merge pull request #21 from efoxTeam/test
Test
2 parents 4e3ef13 + c1a221a commit adbd7a4

File tree

3 files changed

+151
-260
lines changed

3 files changed

+151
-260
lines changed

docs/widget/scrollview/gridview/code.md

Lines changed: 0 additions & 152 deletions
This file was deleted.

docs/widget/scrollview/gridview/index.md

Lines changed: 51 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
## **GridView**
2-
3-
>
4-
GridView是自带滚动的二维列表组件。
2+
> GridView是自带滚动的二维列表组件。
53
64
### 构造方法
75
```
@@ -23,6 +21,7 @@ GridView({
2321
int semanticChildCount
2422
})
2523
```
24+
2625
### 高级用法
2726
```
2827
GridView.builder // 动态加载,用于分页较多
@@ -102,52 +101,48 @@ GridView.extent
102101
},
103102
),
104103
),
105-
);
106104
```
107105

108106
> GridView.custom
109107
动态创建子组件
110108
- SliverGridDelegate gridDelegate : 布局相关
111109
- SliverChildDelegate childrenDelegate:动态创建子组件
112-
113110
```
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-
),
111+
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount // 单行最大数量布局
112+
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
113+
crossAxisCount: 10, // 单行最大10个元素布局
114+
),
115+
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent // 单列最大宽度布局
116+
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
117+
maxCrossAxisExtent: 100, // 单列最大宽度100
118+
),
119+
childrenDelegate: SliverChildBuilderDelegate( // 创建无限滚动
120+
(context, index) {
121+
return Container(
122+
child: Text('$index'),
123+
);
124+
},
125+
semanticIndexCallback: (widget, index) { // 滚动时回调函数
126+
print('index $index');
127+
},
128+
),
129+
childrenDelegate: SliverChildListDelegate( // 创建有数量的滚动
130+
List.generate(30, (index) {
131+
return Container(
132+
child: Text('index $index'),
133+
);
134+
}),
135+
),
142136
```
137+
143138
```
144139
GridView.custom(
145140
// gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
146141
// crossAxisCount: 10, // 单行最大10个元素布局
147142
// ),
148-
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
149-
maxCrossAxisExtent: 100, // 单列最大宽度100
150-
),
143+
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
144+
maxCrossAxisExtent: 100, // 单列最大宽度100
145+
),
151146
// childrenDelegate: SliverChildBuilderDelegate(
152147
// (context, index) {
153148
// return Container(
@@ -159,36 +154,35 @@ GridView.extent
159154
// print('index $index');
160155
// },
161156
// ),
162-
// 数量滚滚动限制,类似GridView.count
163-
childrenDelegate: SliverChildListDelegate(
164-
List.generate(30, (index) {
165-
return Container(
166-
child: Text('index $index'),
167-
);
168-
}),
169-
),
170-
)
157+
// 数量滚滚动限制,类似GridView.count
158+
childrenDelegate: SliverChildListDelegate(
159+
List.generate(30, (index) {
160+
return Container(
161+
child: Text('index $index'),
162+
);
163+
}),
164+
),
165+
)
171166
```
172167

173168
> GridView.builder
174169
按需创建组件,跟custom差不多,但增加itemCount来限制加载子组件最大值,itemCount取代childrenDelegate来动态创建组件。
175170
- itemCount: 子组件最大数量,默认没有限制。效果跟GridView.custom一致
176171
- gridDelegate:设置布局,单行最大布局数量或单列单项最大长度,参考GridView.custom
177172
- itemBuilder:子组件动态加载回调方法,长度受itemCount值影响,itemCount不为0且存在时,数量需小于itemCount值
178-
179173
```
180174
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-
),
175+
itemCount: 31,
176+
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
177+
crossAxisCount: 3, // 单行最大数量值
178+
),
179+
itemBuilder: (context, index) {
180+
print('index $index');
181+
return Center(
182+
child: Text('index $index'),
183+
);
184+
},
185+
),
192186
```
193187

194188
### 其它补充

0 commit comments

Comments
 (0)