Flutter - ListView与GridView

欢迎关注微信公众号：FSA全栈行动 👋前端

1、ListView

ListView(): 当 children 比较明确, 数量较少的时候可使用, 列表 item 一次性所有加载
ListView.builder(): children 数量较多的时候使用, 在 item 即将展现出来的时候才会被建立
ListView.separated(): 比 ListView.builder()多了分割线功能

一、ListView()

经过 ListView() 默认构造器建立出来的列表, 会一次性加载所有的 item, 是比较消耗性能的, 在列表 item 个数明确只有较少的情景下可使用, 常见参数有:微信

scrollDirection: 列表滚动方向, 默认是纵向, 可使用 Axis.horizontal 改成横向
itemExtent: item 在 scrollDirection 方向上的尺寸, 若是列表是纵向, 则设置的是 item 的高度, 若是列表是横向, 则设置的是 item 的宽度
reverse: 逆向排序, 默认为正向(false)
children: 列表中全部的子 widget, 若是 item 类型一致, 能够借助 List.generate() 批量建立

class ListViewDemo1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      // scrollDirection: Axis.horizontal, // 滚动方向
      // itemExtent: 100, // item在scrollDirection方向上的尺寸
      reverse: true,
      children: List.generate(100, (index) {
        // return Text("Hello lqr : $index", style: TextStyle(fontSize: 30));
        return ListTile(
          leading: Icon(Icons.people),
          trailing: Icon(Icons.delete),
          title: Text("联系人$index"),
          subtitle: Text("联系人电话号码:18812345678"),
        );
      }),
    );
  }
}
复制代码

二、ListView.builder()

使用 ListView 的命名构造函数 builder() 建立出来的列表, 只有当 item 须要展现时才会建立加载(调用 itemBuilder 函数), 适用于有大量数据的列表场景, 常见参数以下:markdown

itemCount: 列表的 item 数量, 不指定则有无限个 item
itemExtent: item 在 scrollDirection 方向上的尺寸, 若是列表是纵向, 则设置的是 item 的高度, 若是列表是横向, 则设置的是 item 的宽度
itemBuilder: 用于建立 item 的函数, (BuildContext context, int index){}

itemBuilder 的函数类型定义是: typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);less

class ListViewDemo2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 100,
      itemExtent: 60,
      itemBuilder: (BuildContext context, int index) {
        return Text("Hello lqr: $index", style: TextStyle(fontSize: 20));
      },
    );
  }
}
复制代码

三、ListView.separated()

使用 ListView 的命名构造函数 separated() 建立列表与 builder() 同样, 都是按需建立加载 item, 区别在于 separated() 能够绘制分割线, 常见属性以下:dom

separatorBuilder: 用于建立分割线的函数, (BuildContext context, int index){}

separatorBuilder 的函数类型定义是: typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);ide

通常使用 Divider 这个 widget 来建立分割线, 其构造函数参数有:函数

Divider
- color: 分割线颜色
- height: Divider 自己的占用的高度 (注意:不是分割线的厚度)
- thickness: 分割线的厚度
- indent: 分割线前端的空隙
- endIndent: 分割线末端的空隙

class ListViewDemo3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: 100,
      itemBuilder: (BuildContext context, int index) {
        return Text("Hello lqr: $index", style: TextStyle(fontSize: 20));
      },
      separatorBuilder: (BuildContext context, int index) {
        return Divider(
          color: Colors.red,
          height: 40, // widget的高度
          thickness: 10, // 分割线的厚度
          indent: 10, // 分割线前端的空隙
          endIndent: 30, // 分割线末端的空隙
        );
      },
    );
  }
}
复制代码

2、GridView

GridView(): 列表 item 一次性所有加载
GridView.count(): 是 GridView() + SliverGridDelegateWithFixedCrossAxisCount 的简写
GridView.extent(): 是 GridView() + SliverGridDelegateWithMaxCrossAxisExtent 的简写
GridView.builder(): 当 item 将显示的时候建立

一、GridView()

使用 GridView 默认构造函数建立的网格会一次性加载全部 item, 适用于 item 个数较少的场景, 能够把 GridView 理解为是能够有多列的 ListView, 当有行有列时, 就会有定制行列样式的需求, 由参数 gridDelegate 来配置, gridDelegate 的类型是 SliverGridDelegate, 该抽象类有 2 个实现类:oop

SliverGridDelegateWithFixedCrossAxisCount: 交叉轴固定 item 个数 (几列咱们本身定)
SliverGridDelegateWithMaxCrossAxisExtent: 交叉轴上 item 最大范围 (几列交给 flutter 算)

gridDelegate: 网格代理, 用于控制子 widget 在 GridView 中的摆放性能

SliverGridDelegateWithFixedCrossAxisCount 常见参数有:ui

crossAxisCount: 交叉轴 item 个数 (若是网格是纵向, 则指定网格有几列, 反之则指定网格有几行)
childAspectRatio: item 的宽高比
crossAxisSpacing: 交叉轴 item 间空隙 (纵向: 列间距)
mainAxisSpacing: 主轴 item 间空隙 (纵向: 行间距)

class GridViewDemo1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// SliverGridDelegateWithFixedCrossAxisCount: 交叉轴固定item个数(几列咱们本身定)
    /// 简写: GridView.count(crossAxisCount: 3)
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        childAspectRatio: .8, // ratio = 宽度 / 高度
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
      ),
      children: List.generate(100, (index) {
        return Container(
          color: Color.fromARGB(
            255,
            Random().nextInt(256),
            Random().nextInt(256),
            Random().nextInt(256),
          ),
        );
      }),
    );
  }
}
复制代码

SliverGridDelegateWithMaxCrossAxisExtent 常见参数有:

maxCrossAxisExtent: 交叉轴上 item 最大范围 (纵向: Flutter 会根据屏幕宽度与 item 最大范围自动计算出列数)
childAspectRatio: item 的宽高比
crossAxisSpacing: 交叉轴 item 间空隙 (纵向: 列间距)
mainAxisSpacing: 主轴 item 间空隙 (纵向: 行间距)

class GridViewDemo2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView(
      /// SliverGridDelegateWithMaxCrossAxisExtent: 交叉轴上item最大范围(几列交给flutter算)
      /// 简写: GridView.extent(maxCrossAxisExtent: 400)
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 400,
        mainAxisSpacing: 8,
        crossAxisSpacing: 8,
        childAspectRatio: 1.8,
      ),
      itemCount: 100,
      children: List.generate(100, (index) {
        return Container(
          color: Color.fromARGB(
            255,
            Random().nextInt(256),
            Random().nextInt(256),
            Random().nextInt(256),
          ),
        );
      }),
    );
  }
}
复制代码

二、GridView.builder()

使用 GridView 命名构造函数 builder() 建立的网格会按需建立加载 item, 适用于有大量的数据展现场景, 常见参数有:

gridDelegate: 网格代理, 用于控制子 widget 在 GridView 中的摆放, 类型是 SliverGridDelegate, 经常使用子类有:
- SliverGridDelegateWithFixedCrossAxisCount
- SliverGridDelegateWithMaxCrossAxisExtent
itemCount: 网格的 item 数量, 不指定则有无限个 item
itemBuilder: 用于建立 item 的函数, (BuildContext context, int index){}

itemBuilder 的函数类型定义是: typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);

class GridViewDemo3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
      itemCount: 100,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          color: Color.fromARGB(255, Random().nextInt(256),
              Random().nextInt(256), Random().nextInt(256)),
        );
      },
    );
  }
}
复制代码

若是文章对您有所帮助, 请不吝点击关注一下个人微信公众号：FSA全栈行动, 这将是对我最大的激励. 公众号不只有Android技术, 还有iOS, Python等文章, 可能有你想要了解的技能知识点哦~