GridView使用详情
GridView网格布局在实际项目中用的也非常多,当我们想让可以滚动的元素使用矩阵方式排列的时候.此时我们可以用网格列表组件GridView实现布局.
GridView创建网格列表主要有下面三种方式
1.可以通过GridView.count实现网格布局;
2.可以通过GridView.extent实现网格布局;
3.可以通过GridView.builder实现网格布局;
重用属性:
名称 | 类型 | 说明 |
scrollDirection | Axis | 滚动方法 |
padding | 内边距 | |
resolve | Bool | 组件反向排序 |
crossAxisSpacing | double | 水平子Widget之间间距 |
mainAxisSpacing | double | 垂直子Widget之间间距 |
crossAxisCount | int用在GridView.count | 一行的Widget数量 |
maxCrossAxisExtent | double用在GridView.extent | 横轴子元素的最大长度 |
childAspectRatio | double | 子Widget宽高比例 |
children | [] | |
gridDelegate | SliverChildListDelegateWithFixedCrossAxisCount SliverChildListDelegateWithMaxCrossAxisExtent | 控制布局主要用在GridView.builder里面 |
1.GridView.count实现网格布局
class GridViewApp extends StatelessWidget {
const GridViewApp({super.key});
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisSpacing: 1,
mainAxisSpacing: 2,
crossAxisCount: 5,//每行显示的个数
children: <Widget> [
Icon(Icons.pedal_bike),
Icon(Icons.pedal_bike),
Icon(Icons.pedal_bike),
Icon(Icons.pedal_bike),
Icon(Icons.pedal_bike),
Icon(Icons.pedal_bike),
],
);
}
}
2.GridView.extent实现网格布局
通过它可以快速的创建横轴子元素为固定最大长度的GridView
class GridViewApp extends StatelessWidget {
const GridViewApp({super.key});
@override
Widget build(BuildContext context) {
return GridView.extent(
maxCrossAxisExtent: 40, //一个元素的最大长度
children: <Widget>[
Icon(Icons.ac_unit_sharp),
Icon(Icons.ac_unit_sharp),
Icon(Icons.ac_unit_sharp),
Icon(Icons.ac_unit_sharp),
Icon(Icons.ac_unit_sharp),
],
);
}
}
3.GridView.builder实现网格布局
class GridViewApp extends StatelessWidget {
const GridViewApp({super.key});
Widget _initGridViewData(BuildContext context, int index) {
return Container(
decoration:const BoxDecoration(
color: Colors.blue,
),
child: Column(
children: [
Image.network(
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F11%2F20210711182416_f8763.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668248840&t=ac563bd2a41cb84cea59c84072419158"),
const SizedBox(
height: 5,
),
const Text("重复表示"),
],
),
);
}
@override
Widget build(BuildContext context) {
return GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, //每行显示的元素个数
mainAxisSpacing: 10.0, //垂直item之间间距
crossAxisSpacing: 10.0, //水平item之间间距
childAspectRatio: 0.85, //宽高比
),
itemCount: 12,
itemBuilder: _initGridViewData,
);
}
}