Flutter 列表组件(GridView),与ListView一样,GridView
也是非常常用的组件,两者的属性很相近,系统提供了几种GridView的构建方法,下面一一分析。酷客教程的Flutter GridView也对GridView
做了简单介绍,请大家参考。
1)GridView.count
用法如下:
class GridViewDemo extends StatelessWidget {
List<Widget> _getItem() {
List<Widget> list = [];
for (int i = 0; i < 100; i++) {
list.add(_getWidget(i));
}
return list;
}
Widget _getWidget(int index) {
return Container(
height: 30,
alignment: Alignment.center,
color: Colors.black12,
child: Text(index.toString()),
);
}
@override
Widget build(BuildContext context) {
return GridView.count(
scrollDirection: Axis.vertical,
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 3 / 4,
padding: EdgeInsets.all(3),
children: _getItem(),
);
}
}
2)GridView.builder
用法如下:
class GridViewDemo extends StatelessWidget {
List<Widget> _getItem() {
List<Widget> list = [];
for (int i = 0; i < 100; i++) {
list.add(_getWidget(i));
}
return list;
}
Widget _getWidget(int index) {
return Container(
height: 30,
alignment: Alignment.center,
color: Colors.black12,
child: Text(index.toString()),
);
}
@override
Widget build(BuildContext context) {
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 20,
crossAxisSpacing: 10,
childAspectRatio: 1),
itemBuilder: (BuildContext context, int index) {
return _getWidget(index);
});
}
}
3)GridView.custom
用法如下:
import 'package:flutter/material.dart';
class GridViewDemo extends StatelessWidget {
List<Widget> _getItem() {
List<Widget> list = [];
for (int i = 0; i < 100; i++) {
list.add(_getWidget(i));
}
return list;
}
Widget _getWidget(int index) {
return Container(
height: 30,
alignment: Alignment.center,
color: Colors.black12,
child: Text(index.toString()),
);
}
@override
Widget build(BuildContext context) {
return GridView.custom(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 20,
crossAxisSpacing: 10,
childAspectRatio: 3/4),
childrenDelegate: SliverChildBuilderDelegate((context, index) {
return _getWidget(index);
}),
semanticChildCount: 100,
);
}
}
运行效果如图所示:
酷客网相关文章:
评论前必须登录!
注册