1 ListView

ListView可以沿一个方向（垂直或水平方向，默认是垂直方向）来排列其所有子Widget。

(1) 构造函数

一种最简单的使用方式是直接将所有需要排列的子Widget放在ListView的children属性中即可。

class MyHomeBody extends StatelessWidget {
  MyHomeBody({Key? key}) : super(key: key);
  final TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.redAccent);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          ListTile(
            leading: Icon(Icons.people, size: 36,),
            title: Text("联系人"),
            subtitle: Text("联系人信息"),
            trailing: Icon(Icons.arrow_forward_ios),
          ),
          ListTile(
            leading: Icon(Icons.email, size: 36,),
            title: Text("邮箱"),
            subtitle: Text("邮箱地址信息"),
            trailing: Icon(Icons.arrow_forward_ios),
          ),
          ListTile(
            leading: Icon(Icons.message, size: 36,),
            title: Text("消息"),
            subtitle: Text("消息详情信息"),
            trailing: Icon(Icons.arrow_forward_ios),
          ),
          ListTile(
            leading: Icon(Icons.map, size: 36,),
            title: Text("地址"),
            subtitle: Text("地址详情信息"),
            trailing: Icon(Icons.arrow_forward_ios),
          )
        ],
      ),
    );
  }
}

(2) ListView.build

通过构造函数中的children传入所有的子Widget有一个问题：默认会创建出所有的子Widget。
但是对于用户来说，一次性构建出所有的Widget并不会有什么差异，但是对于我们的程序来说会产生性能问题，而且会增加首屏的渲染时间。
我们可以ListView.build来构建子Widget，提供性能。
该构造函数将创建子Widget交给了一个抽象的方法，交给ListView进行管理，ListView会在真正需要的时候去创建子Widget，而不是一开始就全部初始化好。
该方法有两个重要参数：

itemBuilder：列表项创建的方法。当列表滚动到对应位置的时候，ListView会自动调用该方法来创建对应的子Widget。类型是IndexedWidgetBuilder，是一个函数类型。
itemCount：表示列表项的数量，如果为空，则表示ListView为无限列表。
```
class MyHomeBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: 100,
    itemExtent: 80,
    itemBuilder: (BuildContext context, int index) {
      return ListTile(title: Text("标题$index"), subtitle: Text("详情内容$index"));
    }
  );
}
}
```
(3) 加载json数据
我们现在动态的来通过JSON数据展示一个列表, 当前我们的数据是异步加载的，刚开始界面并不会展示数据（没有数据），后面从JSON中加载出来数据（有数据）后，再次展示加载的数据。这个时候，我们需要使用StatefulWidget来管理组件。 ```dart class _MyHomeBodyState extends State
{ List
anchors = []; // 在初始化状态的方法中加载数据 @override void initState() { getAnchors().then((anchors) {
```
setState(() {
  this.anchors = anchors;
});
```
}); super.initState(); }

@override Widget build(BuildContext context) { return Scaffold( body: ListView.builder( itemBuilder: (BuildContext context, int index) { return Padding( padding: EdgeInsets.all(8), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Image.network( anchors[index].imageUrl, fit: BoxFit.fitWidth, width: MediaQuery.of(context).size.width, ), SizedBox(height: 8), Text(anchors[index].nickname, style: TextStyle(fontSize: 20),), SizedBox(height: 5), Text(anchors[index].roomName) ], ), ); }, ), ); } }

class Anchor { late String nickname; late String roomName; late String imageUrl;

Anchor({ required this.nickname, required this.roomName, required this.imageUrl });

Anchor.withMap(Map parsedMap) { this.nickname = parsedMap[“nickname”]; this.roomName = parsedMap[“roomName”]; this.imageUrl = parsedMap[“roomSrc”]; } }

Future> getAnchors() async { // 1.读取json文件 String jsonString = await rootBundle.loadString(“assets/yz.json”);

// 2.转成List或Map类型 final jsonResult = json.decode(jsonString);

// 3.遍历List，并且转成Anchor对象放到另一个List中 List anchors = []; for (Map map in jsonResult) { anchors.add(Anchor.withMap(map)); } return anchors; }

<a name="qEPS1"></a>
## (4) 滚动方向scrollDirection
```dart
class _MyHomeBodyState extends State<MyHomeBody> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(color: Colors.red, width: 20),
          Container(color: Colors.green, width: 30),
          Container(color: Colors.blue, width: 40),
          Container(color: Colors.purple, width: 40),
          Container(color: Colors.orange, width: 50),
        ],
      )
    );
  }
}

(5) ListView.separated

ListView.separated可以生成列表项之间的分割器，它除了比ListView.builder多了一个separatorBuilder参数，该参数是一个分割器生成器。

class _MyHomeBodyState extends State<MyHomeBody> {
  @override
  Widget build(BuildContext context) {
    Divider blueColor = Divider(color: Colors.blue);
    Divider redColor = Divider(color: Colors.red);
    return Scaffold(
        body: ListView.separated(
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                leading: Icon(Icons.people),
                title: Text("联系人${index + 1}"),
                subtitle: Text("联系人电话${index + 1}"),
              );
            },
            separatorBuilder: (BuildContext context, int index) {
              return index % 2 == 0 ? redColor : blueColor;
            },
            itemCount: 100));
  }
}

2 GridView

(1) 构建函数

gridDelegate用于控制交叉轴的item数量或者宽度，需要传入的类型是SliverGridDelegate，但是它是一个抽象类，所以我们需要传入它的子类：SliverGridDelegateWithFixedCrossAxisCount

SliverGridDelegateWithFixedCrossAxisCount({
  @requireddouble crossAxisCount, // 交叉轴的item个数
  double mainAxisSpacing = 0.0, // 主轴的间距
  double crossAxisSpacing = 0.0, // 交叉轴的间距
  double childAspectRatio = 1.0, // 子Widget的宽高比
})

class _MyHomeBodyState extends State<MyHomeBody> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
          childAspectRatio: 1.0),
      children: getGridWidgets(),
    ));
  }
  List<Widget> getGridWidgets() {
    return List.generate(100, (index) {
      return Container(
        color: Colors.purple,
        alignment: Alignment(0, 0),
        child: Text("item$index",
            style: TextStyle(fontSize: 20, color: Colors.white)),
      );
    });
  }
}

(2) GridView.build

和ListView一样，使用构造函数会一次性创建所有的子Widget，会带来性能问题，所以我们可以使用GridView.build来交给GridView自己管理需要创建的子Widget。

3 CustomScrollView

我们考虑一个这样的布局：一个滑动的视图中包括一个标题视图（HeaderView），一个列表视图（ListView），一个网格视图（GridView）。
我们怎么可以让它们做到统一的滑动效果呢？使用前面的滚动是很难做到的。
Flutter中有一个可以完成这样滚动效果的Widget：CustomScrollView，可以统一管理多个滚动视图。
在CustomScrollView中，每一个独立的，可滚动的Widget被称之为Sliver。

因为我们需要把很多的Sliver放在一个CustomScrollView中，所以CustomScrollView有一个slivers属性，里面让我们放对应的一些Sliver：

SliverList：类似于我们之前使用过的ListView；
SliverFixedExtentList：类似于SliverList只是可以设置滚动的高度；
SliverGrid：类似于我们之前使用过的GridView；
SliverPadding：设置Sliver的内边距，因为可能要单独给Sliver设置内边距；
SliverAppBar：添加一个AppBar，通常用来作为CustomScrollView的HeaderView；

SliverSafeArea：设置内容显示在安全区域（比如不让齐刘海挡住我们的内容）

(1) 构建函数

class _MyHomeBodyState extends State<MyHomeBody> {
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: 8,
              mainAxisSpacing: 8,
              childAspectRatio: 1.5,
            ),
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return Container(
                  alignment: Alignment(0, 0),
                  color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),
                  child: Text("item$index"),
                );
              },
              childCount: 5)),
        SliverFixedExtentList(
          itemExtent: 50.0,
          delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return Container(
                    alignment: Alignment.center,
                    color: Colors.lightBlue[100 * (index % 9)],
                child: new Text('list item $index'),
                );
              },
              childCount: 5
          ),
        ),
      ],
    ),
  );
}
}

4 监听滚动事件

对于滚动的视图，我们经常需要监听它的一些滚动事件，在监听到的时候去做对应的一些事情。
比如视图滚动到顶部时，我们可能希望做上拉加载更多；
比如滚动到一定位置时显示一个回到顶部的按钮，点击回到顶部的按钮，回到顶部；
在Flutter中监听滚动相关的内容由两部分组成：ScrollController和ScrollNotification。

(1) ScrollController

在Flutter中，Widget并不是最终渲染到屏幕上的元素（真正渲染的是RenderObject），因此通常这种监听事件以及相关的信息并不能直接从Widget中获取，而是必须通过对应的Widget的Controller来实现。
ListView、GridView的组件控制器是ScrollController，我们可以通过它来获取视图的滚动信息，并且可以调用里面的方法来更新视图的滚动位置。
通常情况下，我们会根据滚动的位置来改变一些Widget的状态信息，所以ScrollController通常会和StatefulWidget一起来使用，并且会在其中控制它的初始化、监听、销毁等事件。
我们来做一个案例，当滚动到1000位置的时候，显示一个回到顶部的按钮：
jumpTo(double offset)、animateTo(double offset,…)：这两个方法用于跳转到指定的位置，它们不同之处在于，后者在跳转时会执行一个动画，而前者不会。
ScrollController间接继承自Listenable，我们可以根据ScrollController来监听滚动事件。 ```dart

class _MyHomeBodyState extends State { final ScrollController _controller = ScrollController(initialScrollOffset: 300); bool _isShowTop = false;

@override void initState() { super.initState(); _controller.addListener(() { setState(() { _isShowTop = _controller.offset >= 1000; }); }); }

@override Widget build(BuildContext context) { return Scaffold( body: ListView.builder( itemCount: 100, itemExtent: 60, controller: _controller, itemBuilder: (BuildContext context, int index) { return ListTile(title: Text(“item$index”)); }), floatingActionButton: _isShowTop ? FloatingActionButton( child: Icon(Icons.arrow_upward), onPressed: () { _controller.animateTo(0, duration: Duration(milliseconds: 100), curve: Curves.ease); }, ) : null, ); } }

![image.png](https://cdn.nlark.com/yuque/0/2022/png/1114755/1648359052320-b387c708-5c82-45cd-8d89-f5252bc20de3.png#clientId=u091251d1-9110-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=286&id=u18650330&margin=%5Bobject%20Object%5D&name=image.png&originHeight=572&originWidth=874&originalType=binary&ratio=1&rotation=0&showTitle=false&size=43285&status=done&style=none&taskId=u88cfe933-35c2-4a3d-98a0-06943d96931&title=&width=437)
<a name="eA9Ct"></a>
## (2) NotificationListener
如果我们希望监听什么时候开始滚动，什么时候结束滚动，这个时候我们可以通过NotificationListener。
- NotificationListener是一个Widget，模板参数T是想监听的通知类型，如果省略，则所有类型通知都会被监听，如果指定特定类型，则只有该类型的通知会被监听。
- NotificationListener需要一个onNotification回调函数，用于实现监听处理逻辑。
- 该回调可以返回一个布尔值，代表是否阻止该事件继续向上冒泡，如果为true时，则冒泡终止，事件停止向上传播，如果不返回或者返回值为false 时，则冒泡继续。
```dart
class _MyHomeBodyState extends State<MyHomeBody> {
  int _progress = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NotificationListener(
        onNotification: (ScrollNotification notification) {
          // 1.判断监听事件的类型
          if (notification is ScrollStartNotification) {
            print("开始滚动.....");
          } else if (notification is ScrollUpdateNotification) {
            // 当前滚动的位置和总长度
            final currentPixel = notification.metrics.pixels;
            final totalPixel = notification.metrics.maxScrollExtent;
            double progress = currentPixel / totalPixel;
            setState(() {
              _progress = (progress * 100).toInt();
            });
            print("正在滚动：${notification.metrics.pixels} / ${notification.metrics.maxScrollExtent}");
          } else if (notification is ScrollEndNotification) {
            print("结束滚动....");
          }
          return false;
        },
        child: Stack(
          alignment: Alignment(.9, .9),
          children: <Widget>[
            ListView.builder(
                itemCount: 100,
                itemExtent: 60,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(title: Text("item$index"));
                }
            ),
            CircleAvatar(
              radius: 30,
              child: Text("$_progress%"),
              backgroundColor: Colors.black54,
            )
          ],
        ),
      )
    );
  }
}

前端

滚动Widget

1 ListView

(1) 构造函数

(2) ListView.build

(3) 加载json数据

(5) ListView.separated

2 GridView

(1) 构建函数

(2) GridView.build

3 CustomScrollView

(1) 构建函数

4 监听滚动事件

(1) ScrollController