Flutter（八）滾動Widget

一. JSON讀取和解析

在開發(fā)中顷蟆，我們經常會使用本地JSON或者從服務器請求數據后回去到JSON健霹，拿到JSON后通常會將JSON轉成Model對象來進行后續(xù)的操作勒魔，因為這樣操作更加的方便谎势，也更加的安全。

所以學習JSON的相關操作以及讀取JSON后如何轉成Model對象對于Flutter開發(fā)也非常重要神僵。

1.1. JSON資源配置

JSON也屬于一種資源，所以在使用之前需要先進行相關的配置

我們之前在學習使用Image組件時覆劈，用到了本地圖片保礼，本地圖片必須在pubspec.yaml中進行配置：

圖片

1.2. JSON讀取解析

JSON資源讀取

如果我們希望讀取JSON資源沛励，可以使用package:flutter/services.dart包中的rootBundle。

在rootBundle中有一個loadString方法炮障，可以去加載JSON資源

但是注意目派，查看該方法的源碼，你會發(fā)現這個操作是一個異步的胁赢。
關于Future和async企蹭，這里就不再展開講解，可以去查看之前的dart語法智末。

Future<String> loadString(String key, { bool cache = true }) async {
  ...省略具體代碼谅摄，可以自行查看源碼
}

代碼如下：(不要試圖拷貝這個代碼去運行，是沒辦法運行的)

import 'package:flutter/services.dart' show rootBundle;

// 打印讀取的結果是一個字符串
rootBundle.loadString("assets/yz.json").then((value) => print(value));

JSON字符串轉化

拿到JSON字符串后系馆，我們需要將其轉成成我們熟悉的List和Map類型送漠。

我們可以通過dart:convert包中的json.decode方法將其進行轉化

代碼如下：

// 1.讀取json文件
String jsonString = await rootBundle.loadString("assets/yz.json");

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

對象Model定義

將JSON轉成了List和Map類型后，就可以將List中的一個個Map轉成Model對象由蘑，所以我們需要定義自己的Model

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

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

  Anchor.withMap(Map<String, dynamic> parsedMap) {
    this.nickname = parsedMap["nickname"];
    this.roomName = parsedMap["roomName"];
    this.imageUrl = parsedMap["roomSrc"];
  }
}

1.3. JSON解析代碼

上面我們給出了解析的一個個步驟闽寡，下面我們給出完整的代碼邏輯

這里我單獨創(chuàng)建了一個anchor.dart的文件，在其中定義了所有的相關代碼：

之后外界只需要調用我內部的getAnchors就可以獲取到解析后的數據了

import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';
import 'dart:async';

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

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

  Anchor.withMap(Map<String, dynamic> parsedMap) {
    this.nickname = parsedMap["nickname"];
    this.roomName = parsedMap["roomName"];
    this.imageUrl = parsedMap["roomSrc"];
  }
}

Future<List<Anchor>> 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<Anchor> anchors = new List();
  for (Map<String, dynamic> map in jsonResult) {
    anchors.add(Anchor.withMap(map));
  }
  return anchors;
}

二. ListView組件

移動端數據量比較大時下隧，我們都是通過列表來進行展示的，比如商品數據谓媒、聊天列表淆院、通信錄、朋友圈等句惯。

在Android中土辩，我們可以使用ListView或RecyclerView來實現，在iOS中抢野，我們可以通過UITableView來實現拷淘。

在Flutter中，我們也有對應的列表Widget指孤，就是ListView启涯。

2.1. ListView基礎

2.1.1 ListView基本使用

ListView可以沿一個方向（垂直或水平方向，默認是垂直方向）來排列其所有子Widget恃轩。

一種最簡單的使用方式是直接將所有需要排列的子Widget放在ListView的children屬性中即可结洼。

我們來看一下直接使用ListView的代碼演練：

為了讓文字之間有一些間距，我使用了Padding Widget

class MyHomeBody extends StatelessWidget {
  final TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.redAccent);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text("人的一切痛苦叉跛，本質上都是對自己無能的憤怒松忍。", style: textStyle),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text("人活在世界上，不可以有偏差筷厘；而且多少要費點勁兒鸣峭，才能把自己保持到理性的軌道上宏所。", style: textStyle),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text("我活在世上，無非想要明白些道理摊溶，遇見些有趣的事爬骤。", style: textStyle),
        )
      ],
    );
  }
}

2.2.2. ListTile的使用

在開發(fā)中，我們經常見到一種列表更扁，有一個圖標或圖片（Icon）盖腕，有一個標題（Title），有一個子標題（Subtitle）浓镜，還有尾部一個圖標（Icon）。

這個時候劲厌，我們可以使用ListTile來實現：

class MyHomeBody extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        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.2.3. 垂直方向滾動

我們可以通過設置 scrollDirection 參數來控制視圖的滾動方向膛薛。

我們通過下面的代碼實現一個水平滾動的內容：

這里需要注意，我們需要給Container設置width补鼻，否則它是沒有寬度的哄啄，就不能正常顯示。
或者我們也可以給ListView設置一個itemExtent风范，該屬性會設置滾動方向上每個item所占據的寬度咨跌。

class MyHomeBody extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      itemExtent: 200,
      children: <Widget>[
        Container(color: Colors.red, width: 200),
        Container(color: Colors.green, width: 200),
        Container(color: Colors.blue, width: 200),
        Container(color: Colors.purple, width: 200),
        Container(color: Colors.orange, width: 200),
      ],
    );
  }
}

圖片

2.2. ListView.build

通過構造函數中的children傳入所有的子Widget有一個問題：默認會創(chuàng)建出所有的子Widget。

但是對于用戶來說硼婿，一次性構建出所有的Widget并不會有什么差異锌半，但是對于我們的程序來說會產生性能問題，而且會增加首屏的渲染時間寇漫。

我們可以ListView.build來構建子Widget刊殉，提供性能。

2.2.1. ListView.build基本使用

ListView.build適用于子Widget比較多的場景州胳，該構造函數將創(chuàng)建子Widget交給了一個抽象的方法记焊，交給ListView進行管理，ListView會在真正需要的時候去創(chuàng)建子Widget栓撞，而不是一開始就全部初始化好遍膜。

該方法有兩個重要參數：

itemBuilder：列表項創(chuàng)建的方法。當列表滾動到對應位置的時候瓤湘，ListView會自動調用該方法來創(chuàng)建對應的子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"));
      }
    );
  }
}

圖片

2.2.2. ListView.build動態(tài)數據

在之前巾兆，我們搞了一個yz.json數據猎物，我們現在動態(tài)的來通過JSON數據展示一個列表。

思考：這個時候是否依然可以使用StatelessWidget:

答案：不可以角塑，因為當前我們的數據是異步加載的蔫磨，剛開始界面并不會展示數據（沒有數據），后面從JSON中加載出來數據（有數據）后圃伶，再次展示加載的數據堤如。

這里是有狀態(tài)的變化的，從無數據窒朋，到有數據的變化搀罢。
這個時候，我們需要使用StatefulWidget來管理組件侥猩。

展示代碼如下：

import 'model/anchor.dart';

...省略中間代碼
class MyHomeBody extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyHomeBodyState();
  }
}

class MyHomeBodyState extends State<MyHomeBody> {
  List<Anchor> anchors = [];

  // 在初始化狀態(tài)的方法中加載數據
  @override
  void initState() {
    getAnchors().then((anchors) {
      setState(() {
        this.anchors = anchors;
      });
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return Padding(
          padding: EdgeInsets.all(8),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              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)
            ],
          ),
        );
      },
    );
  }
}

圖片

2.2.3. ListView.separated

ListView.separated可以生成列表項之間的分割器榔至，它除了比ListView.builder多了一個separatorBuilder參數，該參數是一個分割器生成器欺劳。

下面我們看一個例子：奇數行添加一條藍色下劃線唧取，偶數行添加一條紅色下劃線：

class MySeparatedDemo extends StatelessWidget {
  Divider blueColor = Divider(color: Colors.blue);
  Divider redColor = Divider(color: Colors.red);

  @override
  Widget build(BuildContext context) {
    return 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
    );
  }
}

圖片

三. GridView組件

GridView用于展示多列的展示，在開發(fā)中也非常常見划提，比如直播App中的主播列表枫弟、電商中的商品列表等等。

在Flutter中我們可以使用GridView來實現鹏往，使用方式和ListView也比較相似淡诗。

3.1. GridView構造函數

我們先學習GridView構造函數的使用方法

一種使用GridView的方式就是使用構造函數來創(chuàng)建，和ListView對比有一個特殊的參數：gridDelegate

gridDelegate用于控制交叉軸的item數量或者寬度掸犬，需要傳入的類型是SliverGridDelegate袜漩，但是它是一個抽象類，所以我們需要傳入它的子類：

SliverGridDelegateWithFixedCrossAxisCount

SliverGridDelegateWithFixedCrossAxisCount({
  @required double crossAxisCount, // 交叉軸的item個數
  double mainAxisSpacing = 0.0, // 主軸的間距
  double crossAxisSpacing = 0.0, // 交叉軸的間距
  double childAspectRatio = 1.0, // 子Widget的寬高比
})

代碼演練：

class MyGridCountDemo extends StatelessWidget {

  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)),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 1.0
      ),
      children: getGridWidgets(),
    );
  }
}

圖片

SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithMaxCrossAxisExtent({
  double maxCrossAxisExtent, // 交叉軸的item寬度
  double mainAxisSpacing = 0.0, // 主軸的間距
  double crossAxisSpacing = 0.0, // 交叉軸的間距
  double childAspectRatio = 1.0, // 子Widget的寬高比
})

代碼演練：

class MyGridExtentDemo extends StatelessWidget {

  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)),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 150,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 1.0
      ),
      children: getGridWidgets(),
    );
  }
}

圖片

前面兩種方式也可以不設置delegate

可以分別使用：GridView.count構造函數和GridView.extent構造函數實現相同的效果湾碎，這里不再贅述宙攻。

3.2. GridView.build

和ListView一樣，使用構造函數會一次性創(chuàng)建所有的子Widget介褥，會帶來性能問題座掘，所以我們可以使用GridView.build來交給GridView自己管理需要創(chuàng)建的子Widget。

我們直接使用之前的數據來進行代碼演練：

class _GridViewBuildDemoState extends State<GridViewBuildDemo> {
  List<Anchor> anchors = [];

  @override
  void initState() {
    getAnchors().then((anchors) {
      setState(() {
        this.anchors = anchors;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: GridView.builder(
        shrinkWrap: true,
        physics: ClampingScrollPhysics(),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
          childAspectRatio: 1.2
        ),
        itemCount: anchors.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Image.network(anchors[index].imageUrl),
                SizedBox(height: 5),
                Text(anchors[index].nickname, style: TextStyle(fontSize: 16),),
                Text(anchors[index].roomName, maxLines: 1, overflow: TextOverflow.ellipsis,)
              ],
            ),
          );
        }
      ),
    );
  }
}

圖片

四. Slivers

我們考慮一個這樣的布局：一個滑動的視圖中包括一個標題視圖（HeaderView）柔滔，一個列表視圖（ListView）溢陪，一個網格視圖（GridView）。

我們怎么可以讓它們做到統一的滑動效果呢睛廊？使用前面的滾動是很難做到的形真。

Flutter中有一個可以完成這樣滾動效果的Widget：CustomScrollView，可以統一管理多個滾動視圖超全。

在CustomScrollView中咆霜，每一個獨立的邓馒，可滾動的Widget被稱之為Sliver。

補充：Sliver可以翻譯成裂片蛾坯、薄片光酣，你可以將每一個獨立的滾動視圖當做一個小裂片。

4.1. Slivers的基本使用

因為我們需要把很多的Sliver放在一個CustomScrollView中脉课，所以CustomScrollView有一個slivers屬性救军，里面讓我們放對應的一些Sliver：

SliverList：類似于我們之前使用過的ListView；
SliverFixedExtentList：類似于SliverList只是可以設置滾動的高度倘零；
SliverGrid：類似于我們之前使用過的GridView唱遭；
SliverPadding：設置Sliver的內邊距，因為可能要單獨給Sliver設置內邊距视事；
SliverAppBar：添加一個AppBar胆萧，通常用來作為CustomScrollView的HeaderView；
SliverSafeArea：設置內容顯示在安全區(qū)域（比如不讓齊劉海擋住我們的內容）

我們簡單演示一下：SliverGrid+SliverPadding+SliverSafeArea的組合

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverSafeArea(
          sliver: SliverPadding(
            padding: EdgeInsets.all(8),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment(0, 0),
                    color: Colors.orange,
                    child: Text("item$index"),
                  );
                },
                childCount: 20
              ),
            ),
          ),
        )
      ],
    );
  }
}

圖片

4.2. Slivers的組合使用

這里我使用官方的示例程序俐东，將SliverAppBar+SliverGrid+SliverFixedExtentList做出如下界面：

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return showCustomScrollView();
  }

  Widget showCustomScrollView() {
    return new CustomScrollView(
      slivers: <Widget>[
        const SliverAppBar(
          expandedHeight: 250.0,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('Coderwhy Demo'),
            background: Image(
              image: NetworkImage(
                "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg",
              ),
              fit: BoxFit.cover,
            ),
          ),
        ),
        new SliverGrid(
          gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 200.0,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
            childAspectRatio: 4.0,
          ),
          delegate: new SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              return new Container(
                alignment: Alignment.center,
                color: Colors.teal[100 * (index % 9)],
                child: new Text('grid item $index'),
              );
            },
            childCount: 10,
          ),
        ),
        SliverFixedExtentList(
          itemExtent: 50.0,
          delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              return new Container(
                alignment: Alignment.center,
                color: Colors.lightBlue[100 * (index % 9)],
                child: new Text('list item $index'),
              );
            },
            childCount: 20
          ),
        ),
      ],
    );
  }
}

圖片

五. 監(jiān)聽滾動事件

對于滾動的視圖，我們經常需要監(jiān)聽它的一些滾動事件订晌，在監(jiān)聽到的時候去做對應的一些事情虏辫。

比如視圖滾動到底部時，我們可能希望做上拉加載更多锈拨；

比如滾動到一定位置時顯示一個回到頂部的按鈕砌庄，點擊回到頂部的按鈕，回到頂部奕枢；

比如監(jiān)聽滾動什么時候開始娄昆，什么時候結束；

在Flutter中監(jiān)聽滾動相關的內容由兩部分組成：ScrollController和ScrollNotification缝彬。

5.1. ScrollController

在Flutter中萌焰，Widget并不是最終渲染到屏幕上的元素（真正渲染的是RenderObject），因此通常這種監(jiān)聽事件以及相關的信息并不能直接從Widget中獲取谷浅，而是必須通過對應的Widget的Controller來實現扒俯。

ListView、GridView的組件控制器是ScrollController一疯，我們可以通過它來獲取視圖的滾動信息撼玄，并且可以調用里面的方法來更新視圖的滾動位置。

另外墩邀，通常情況下掌猛，我們會根據滾動的位置來改變一些Widget的狀態(tài)信息，所以ScrollController通常會和StatefulWidget一起來使用眉睹，并且會在其中控制它的初始化荔茬、監(jiān)聽废膘、銷毀等事件。

我們來做一個案例兔院，當滾動到1000位置的時候殖卑，顯示一個回到頂部的按鈕：

jumpTo(double offset)、animateTo(double offset,...)：這兩個方法用于跳轉到指定的位置坊萝，它們不同之處在于孵稽，后者在跳轉時會執(zhí)行一個動畫，而前者不會十偶。
ScrollController間接繼承自Listenable菩鲜，我們可以根據ScrollController來監(jiān)聽滾動事件。

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  ScrollController _controller;
  bool _isShowTop = false;
  
  @override
  void initState() {
    // 初始化ScrollController
    _controller = ScrollController();
    
    // 監(jiān)聽滾動
    _controller.addListener(() {
      var tempSsShowTop = _controller.offset >= 1000;
      if (tempSsShowTop != _isShowTop) {
        setState(() {
          _isShowTop = tempSsShowTop;
        });
      }
    });
    
    super.initState();
  }

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

圖片

5.2. NotificationListener

如果我們希望監(jiān)聽什么時候開始滾動惦积，什么時候結束滾動接校，這個時候我們可以通過NotificationListener。

NotificationListener是一個Widget狮崩，模板參數T是想監(jiān)聽的通知類型蛛勉，如果省略，則所有類型通知都會被監(jiān)聽睦柴，如果指定特定類型诽凌，則只有該類型的通知會被監(jiān)聽。
NotificationListener需要一個onNotification回調函數坦敌，用于實現監(jiān)聽處理邏輯侣诵。
該回調可以返回一個布爾值，代表是否阻止該事件繼續(xù)向上冒泡狱窘，如果為true時杜顺，則冒泡終止，事件停止向上傳播蘸炸，如果不返回或者返回值為false 時躬络，則冒泡繼續(xù)。

案例: 列表滾動, 并且在中間顯示滾動進度

class MyHomeNotificationDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyHomeNotificationDemoState();
}

class MyHomeNotificationDemoState extends State<MyHomeNotificationDemo> {
  int _progress = 0;

  @override
  Widget build(BuildContext context) {
    return NotificationListener(
      onNotification: (ScrollNotification notification) {
        // 1.判斷監(jiān)聽事件的類型
        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,
          )
        ],
      ),
    );
  }
}

圖片

最后編輯于：2023.12.01 18:20:29

?著作權歸作者所有,轉載或內容合作請聯系作者

人面猴
序言：七十年代末幻馁，一起剝皮案震驚了整個濱河市洗鸵，隨后出現的幾起案子，更是在濱河造成了極大的恐慌仗嗦，老刑警劉巖膘滨，帶你破解...
沈念sama閱讀 216,496評論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現場離奇詭異稀拐，居然都是意外死亡火邓，警方通過查閱死者的電腦和手機，發(fā)現死者居然都...
沈念sama閱讀 92,407評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來铲咨，“玉大人躲胳，你說我怎么就攤上這事∠死眨” “怎么了坯苹？”我有些...
開封第一講書人閱讀 162,632評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長摇天。經常有香客問我粹湃，道長，這世上最難降的妖魔是什么泉坐？我笑而不...
開封第一講書人閱讀 58,180評論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任为鳄，我火速辦了婚禮，結果婚禮上腕让，老公的妹妹穿的比我還像新娘孤钦。我一直安慰自己，他們只是感情好纯丸，可當我...
茶點故事閱讀 67,198評論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布偏形。她就那樣靜靜地躺著，像睡著了一般觉鼻。火紅的嫁衣襯著肌膚如雪壳猜。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,165評論 1贊 299
城市分裂傳說
那天滑凉，我揣著相機與錄音，去河邊找鬼喘帚。笑死畅姊，一個胖子當著我的面吹牛，可吹牛的內容都是我干的吹由。我是一名探鬼主播若未，決...
沈念sama閱讀 40,052評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼倾鲫！你這毒婦竟也來了粗合？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 38,910評論 0贊 274
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤乌昔，失蹤者是張志新（化名）和其女友劉穎隙疚，沒想到半個月后，有當地人在樹林里發(fā)現了一具尸體磕道，經...
沈念sama閱讀 45,324評論 1贊 310
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡供屉，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 37,542評論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片伶丐。...
茶點故事閱讀 39,711評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡悼做，死狀恐怖，靈堂內的尸體忽然破棺而出哗魂，到底是詐尸還是另有隱情肛走，我是刑警寧澤，帶...
沈念sama閱讀 35,424評論 5贊 343
?日本核電站爆炸內幕
正文年R本政府宣布录别，位于F島的核電站朽色，受9級特大地震影響，放射性物質發(fā)生泄漏庶灿。R本人自食惡果不足惜纵搁，卻給世界環(huán)境...
茶點故事閱讀 41,017評論 3贊 326
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望往踢。院中可真熱鬧腾誉，春花似錦、人聲如沸峻呕。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,668評論 0贊 22
一樁弒父案炊昆，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春窖剑，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背缀皱。一陣腳步聲響...
開封第一講書人閱讀 32,823評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工准浴，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人斤寇。一個月前我還...
沈念sama閱讀 47,722評論 2贊 368
代替公主和親
正文我出身青樓桶癣，卻偏偏與公主長得像，于是被迫代替她去往敵國和親娘锁。傳聞我的和親對象是個殘疾皇子牙寞，可洞房花燭夜當晚...
茶點故事閱讀 44,611評論 2贊 353