Flutter 列表组件ListView 网格布局组件GridView

目录

一 列表布局ListView

二 GridView网格布局组件

一 列表布局 ListView

Flutter 中可以通过 ListView 来定义列表项，支持垂直和水平方向展示。

通过一个属性就可以控制列表的显示方向。列表有以下分类：

1 、垂直列表

2 、垂直图文列表

3 、水平列表

4 、动态列表

ListView列表组件常用参数 scrollDirection

名称	类型	说明
scrollDirection	Axis	Axis.horizontal水平列表 Axis.vertical垂直列表
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向排序
children	List	列表元

动态列表实现

void main(List<String> args) {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text("title")),
      body: MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  List list = [];
  MyApp({super.key}) {
    print(listData);
    for (var i = 0; i < 20; i++) {
      list.add("我是第${i}条数据");
    }
  }
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: list.length,
      itemBuilder: (context, index){
        return ListTile(
          title: Text("${list[index]}"),
        );
      },);
  }
}

二 GridView网格布局组件

当让可以滚动的元素使用矩阵方式排列的时 候。此时我们可以用网格列表组件GridView实现布局。 GridView创建网格列表主要有下面三种方式

1 、可以通过 GridView.count 实现网格布局

2 、可以通过 GridView.extent 实现网格布局

3 、通过 GridView.builder 实现动态网格布局

名称	类型	说明
scrollDirection	Axis	滚动方法
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向排序
crossAxisSpacing	double	水平子Widget之间间距
mainAxisSpacing	double	垂直子 Widget 之间间 距
crossAxisCount	int	用在 GridView.count 一行的 Widget 数量
maxCrossAxisExtent	double	用在 GridView.extent 横轴子元素的最大长度
childAspectRatio	double	子Widget宽高比例
children	[ ]
gridDelegate	SliverGridDelegateWithFixedCrossAxisCount SliverGridDelegateWithMaxCrossAxisExtent	控制布局主要用在 GridView.builder里面