Flutter开发之——可滑动组件—ListView

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

ListView跟GridView的功能类似，都是常用的滚动展示数据的列表组件

  • 通过构造创建方式
  • 通过：build，separated，custom快速创建

二 ListView

2.1 构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ListView({
    Key? key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController? controller,
    bool? primary,
    ScrollPhysics? physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry? padding,
    this.itemExtent,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double? cacheExtent,
    List<Widget> children = const <Widget>[],
    int? semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String? restorationId,
    Clip clipBehavior = Clip.hardEdge,
  })

2.2 常见属性说明

属性 说明 取值
reverse 是否反转滚动方向 bool
controller 滚动控制器 ScrollController
scrollDirection① 滚动方向 Axis枚举
physics② 滚动物理特性 ScrollPhysics

scrollDirection①

属性 说明
horizontal 水平方向滚动
vertical 垂直方向滚动

physics②

属性 说明
AlwaysScrollableScrollPhysics 总是可以滑动
NeverScrollableScrollPhysics 禁止滚动
BouncingScrollPhysics 内容超过一屏 上拉有回弹效果
ClampingScrollPhysics 包裹内容 不会有回弹

三 构建方式创建ListView

3.1 代码

1
2
3
4
5
6
7
8
9
ListView(
          children: List.generate(10, (position) {
            return Container(
              alignment: Alignment.center,
              height: 80,
              color: Colors.primaries[position % Colors.primaries.length],
              child: Text("$position"),
            );}),
        )

3.2 效果图

四 快速创建方式 build，separated，custom

4.1 ListView.build

构建属性

  • itemBuilder是构建子控件
  • itemCount指定数据个数

构建代码

1
2
3
4
5
6
7
8
9
10
11
ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Container(
              alignment: Alignment.center,
              height: 80,
              color: Colors.primaries[index % Colors.primaries.length],
              child: Text("$index"),
            );
          },
        )

4.2 ListView.separated

使用说明

  • 当每一项有分割线要求时，使用这个构建方式创建

构建属性

  • itemCount：数据个数
  • separatorBuilder：分隔项构建控件
  • itemBuilder：子控件构建

构建代码

1
2
3
4
5
6
7
8
9
10
11
12
ListView.separated(
          itemCount: 10,
          separatorBuilder: (context,index){return Divider(height: 10,);} ,
          itemBuilder: (context, index) {
            return Container(
              alignment: Alignment.center,
              height: 80,
              color: Colors.primaries[index % Colors.primaries.length],
              child: Text("$index"),
            );
          },
        )

4.3 ListView.custom

构建说明

childrenDelegate：提供子组件构建的代理，有SliverChildBuilderDelegate和SliverChildListDelegate可用于快速构建

构建代码

SliverChildBuilderDelegate构建方式

1
2
3
4
5
6
7
8
9
ListView.custom(
          childrenDelegate:  SliverChildBuilderDelegate((context, index) {
            return Container(
              alignment: Alignment.center,
              height: 80,
              color: Colors.primaries[index % Colors.primaries.length],
              child: Text("$index"),
            );
          },childCount: 10))

SliverChildListDelegate构建方式

1
2
3
4
5
6
7
8
9
10
ListView.custom(
          childrenDelegate: SliverChildListDelegate(List.generate(10, (position) {
            return Container(
              alignment: Alignment.center,
              height: 80,
              color: Colors.primaries[position % Colors.primaries.length],
              child: Text("$position"),
            );
          })),
        )