11## ** GridView**
2-
3- >
4- GridView是自带滚动的二维列表组件。
2+ > GridView是自带滚动的二维列表组件。
53
64### 构造方法
75```
@@ -23,6 +21,7 @@ GridView({
2321 int semanticChildCount
2422})
2523```
24+
2625### 高级用法
2726```
2827GridView.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