1
1
## ** GridView**
2
-
3
- >
4
- GridView是自带滚动的二维列表组件。
2
+ > GridView是自带滚动的二维列表组件。
5
3
6
4
### 构造方法
7
5
```
@@ -23,6 +21,7 @@ GridView({
23
21
int semanticChildCount
24
22
})
25
23
```
24
+
26
25
### 高级用法
27
26
```
28
27
GridView.builder // 动态加载,用于分页较多
@@ -102,52 +101,48 @@ GridView.extent
102
101
},
103
102
),
104
103
),
105
- );
106
104
```
107
105
108
106
> GridView.custom
109
107
动态创建子组件
110
108
- SliverGridDelegate gridDelegate : 布局相关
111
109
- SliverChildDelegate childrenDelegate:动态创建子组件
112
-
113
110
```
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
+ ),
142
136
```
137
+
143
138
```
144
139
GridView.custom(
145
140
// gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
146
141
// crossAxisCount: 10, // 单行最大10个元素布局
147
142
// ),
148
- gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
149
- maxCrossAxisExtent: 100, // 单列最大宽度100
150
- ),
143
+ gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
144
+ maxCrossAxisExtent: 100, // 单列最大宽度100
145
+ ),
151
146
// childrenDelegate: SliverChildBuilderDelegate(
152
147
// (context, index) {
153
148
// return Container(
@@ -159,36 +154,35 @@ GridView.extent
159
154
// print('index $index');
160
155
// },
161
156
// ),
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
+ )
171
166
```
172
167
173
168
> GridView.builder
174
169
按需创建组件,跟custom差不多,但增加itemCount来限制加载子组件最大值,itemCount取代childrenDelegate来动态创建组件。
175
170
- itemCount: 子组件最大数量,默认没有限制。效果跟GridView.custom一致
176
171
- gridDelegate:设置布局,单行最大布局数量或单列单项最大长度,参考GridView.custom
177
172
- itemBuilder:子组件动态加载回调方法,长度受itemCount值影响,itemCount不为0且存在时,数量需小于itemCount值
178
-
179
173
```
180
174
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
+ ),
192
186
```
193
187
194
188
### 其它补充
0 commit comments