前言

Flutter ListView在日常開發(fā)中非常常見
今天仁热，carson全面介紹Flutter ListView的使用，包括基礎(chǔ)使用 & 進階使用（下拉刷新郎楼、上拉加載）辆雾，希望你們會喜歡肪笋。

示意圖

1. 簡介

定義：滾動型控件
作用：可滾動顯示超出屏幕的內(nèi)容
應(yīng)用場景：顯示超過一屏的內(nèi)容

2. 基礎(chǔ)使用

ListView的基礎(chǔ)創(chuàng)建使用有三種方式：

默認構(gòu)造函數(shù)：ListView（）
ListView.build()
ListView.separated()

使用方式1：ListView（）

a. 簡介

通過默認構(gòu)造函數(shù)來創(chuàng)建列表，應(yīng)用場景 = 短列表

b. 構(gòu)造方法

ListView({
  Axis scrollDirection = Axis.vertical, // 列表的滾動方向度迂，可選值：Axis的horizontal藤乙、vertical
  ScrollController controller, // 控制器，與列表滾動相關(guān)惭墓，比如監(jiān)聽列表的滾動事件
  ScrollPhysics physics, // 列表滾動至邊緣后繼續(xù)拖動的物理效果坛梁，Android與iOS效果不同：Android = 波紋狀（ClampingScrollPhysics），而iOS = 回彈的彈性效果（BouncingScrollPhysics）腊凶。若想不同的平臺上呈現(xiàn)各自的效果可使用AlwaysScrollableScrollPhysics划咐，它會根據(jù)不同平臺自動選用各自的物理效果。若想禁用在邊緣的拖動效果钧萍，可使用NeverScrollableScrollPhysics
  bool shrinkWrap = false, // 決定列表的長度是否僅包裹其內(nèi)容的長度褐缠。當(dāng)ListView嵌在一個無限長的容器組件中時，shrinkWrap必須為true风瘦，否則Flutter會給出警告队魏；
  EdgeInsetsGeometry padding, // 列表內(nèi)邊距
  this.itemExtent, // 子元素長度。當(dāng)列表中的每一項長度是固定的情況下可以指定該值万搔，有助于提高列表的性能（因為它可以幫助ListView在未實際渲染子元素之前就計算出每一項元素的位置）胡桨；
  double cacheExtent, // 預(yù)渲染區(qū)域長度俐载，ListView會在其可視區(qū)域的兩邊留一個cacheExtent長度的區(qū)域作為預(yù)渲染區(qū)域（對于ListView.build或ListView.separated構(gòu)造函數(shù)創(chuàng)建的列表，不在可視區(qū)域和預(yù)渲染區(qū)域內(nèi)的子元素不會被創(chuàng)建或會被銷毀）登失；
  List<Widget> children = const <Widget>[], // 容納子元素的組件數(shù)組
})

c. 具體使用

import 'package:flutter/material.dart'; // Material UI組件庫

void main() => runApp(MyApp());

// 無狀態(tài)控件顯示
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
    return MaterialApp(
      title: 'Widget_Demo', //標(biāo)題
      theme: ThemeData(primarySwatch: Colors.blue), //主題色
      home: MyWidget(), // 返回一個Widget對象，用來定義當(dāng)前應(yīng)用打開的時候挖炬，所顯示的界面
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _MyWidgetState();
  }
}

class _MyWidgetState extends State<MyWidget> {
  ScrollController _controller = new ScrollController();

  @override
  void initState() {
    super.initState();
    // 設(shè)置監(jiān)聽方法
    _controller.addListener(() {
      print('_controller Listener');
      print(_controller.offset); // 打印滾動位置
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.vertical,
      // 設(shè)置方向

      itemExtent: 50,
      // 當(dāng)滾動方向為垂直方向時揽浙，那么itemExtent = 子控件的高度
      // 當(dāng)滾動方向為水平方向時，那么itemExtent = 子控件的寬度
      padding: EdgeInsets.all(1.0),
      // 設(shè)置邊距

      physics: new AlwaysScrollableScrollPhysics(),
      // 設(shè)置到邊緣后的效果

      controller: _controller,
      // 添加監(jiān)聽器
      
      // 設(shè)置子控件
      children: <Widget>[
        Text("test1"),
        Text("test2"),
        Text("test3"),
        Text("test4"),
        Text("test5"),
        Text("test6"),
        Text("test7"),
        Text("test8"),
        Text("test9"),
        Text("test10"),
        Text("test11"),
        Text("test12"),
        Text("test13"),
        Text("test14"),
        Text("test15"),
      ],
    );
  }
}

d. 示意圖

這種方式創(chuàng)建的列表存在一個問題：對于那些長列表或者需要較昂貴渲染開銷的子組件意敛，即使還沒有出現(xiàn)在屏幕中但仍然會被ListView所創(chuàng)建馅巷，這將是一項較大的開銷，使用不當(dāng)可能引起性能問題甚至卡頓草姻。

使用方式2：ListView.build()

a. 應(yīng)用場景

長列表

b. 構(gòu)造函數(shù)

ListView.builder({
  ...// 和ListView默認構(gòu)造函數(shù)一樣
  int itemCount, // 列表中元素的數(shù)量
  IndexedWidgetBuilder itemBuilder, // 子元素的渲染方法钓猬，允許自定義子元素組件
})

// 特別注意：不同于ListView默認構(gòu)造函數(shù)通過children參數(shù)指定子元素的這種方式，ListView.build通過暴露統(tǒng)一的itemBuilder方法將渲染子元素的控制權(quán)交還給調(diào)用方撩独。

c. 具體使用

import 'package:flutter/material.dart'; // Material UI組件庫

void main() => runApp(MyApp());

// 無狀態(tài)控件顯示
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
    return MaterialApp(
      title: 'Widget_Demo', //標(biāo)題
      theme: ThemeData(primarySwatch: Colors.blue), //主題色
      home: MyWidget(), // 返回一個Widget對象敞曹，用來定義當(dāng)前應(yīng)用打開的時候，所顯示的界面
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _MyWidgetState();
  }
}

class _MyWidgetState extends State<MyWidget> {
  ScrollController _controller = new ScrollController(); // 定義控制器
  List<String> litems = ["test 1","test 2","test 3","test 4","test 5","test 6","test 7","test 8"
                         ,"test 9","test 10","test 11","test 12","test 13","test 14","test 15"]; // 定義要顯示的元素列表
  @override
  void initState() {
    super.initState();
    // 設(shè)置監(jiān)聽方法
    _controller.addListener(() {
      print('_controller Listener');
      print(_controller.offset); // 打印滾動位置
    });
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder
      (
        scrollDirection: Axis.vertical,
        // 設(shè)置方向

        itemExtent: 50,
        // 當(dāng)滾動方向為垂直方向時综膀，那么itemExtent = 子控件的高度
        // 當(dāng)滾動方向為水平方向時澳迫，那么itemExtent = 子控件的寬度
        padding: EdgeInsets.all(1.0),
        // 設(shè)置邊距

        physics: new AlwaysScrollableScrollPhysics(),
        // 設(shè)置到邊緣后的效果

        controller: _controller, // 設(shè)置控制器
        
         // 設(shè)置元素數(shù)量 & 具體元素
        itemCount: litems.length,
        itemBuilder: (BuildContext ctxt, int index) {
          return new Text(litems[index]);
        }
    );
  }
}

d. 示意圖

使用方式3：ListView.separated()

a. 應(yīng)用場景

列表子項之間需要分割線

b. 構(gòu)造函數(shù)

ListView.separated({
  ... // 同ListView.build()的參數(shù)
  @required IndexedWidgetBuilder separatorBuilder
// 相比于ListView.build構(gòu)造函數(shù)，ListView.separated多出的參數(shù)：暴露給調(diào)用方自定義分割線組件的回調(diào)方法剧劝，可自定義每個子元素之間的分割線
})

c. 具體使用

import 'package:flutter/material.dart'; // Material UI組件庫

void main() => runApp(MyApp());

// 無狀態(tài)控件顯示
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
    return MaterialApp(
      title: 'Widget_Demo', //標(biāo)題
      theme: ThemeData(primarySwatch: Colors.blue), //主題色
      home: MyWidget(), // 返回一個Widget對象橄登，用來定義當(dāng)前應(yīng)用打開的時候，所顯示的界面
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _MyWidgetState();
  }
}

class _MyWidgetState extends State<MyWidget> {
  ScrollController _controller = new ScrollController();
  List<String> litems = [
    "test 1",
    "test 2",
    "test 3",
    "test 4",
    "test 5",
    "test 6",
    "test 7",
    "test 8",
    "test 9",
    "test 10",
    "test 11",
    "test 12",
    "test 13",
    "test 14",
    "test 15"
  ];

  @override
  void initState() {
    super.initState();
    // 設(shè)置監(jiān)聽方法
    _controller.addListener(() {
      print('_controller Listener');
      print(_controller.offset); // 打印滾動位置
    });
  }

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      scrollDirection: Axis.vertical,
      // 設(shè)置方向

      padding: EdgeInsets.all(1.0),
      // 設(shè)置邊距

      physics: new AlwaysScrollableScrollPhysics(),
      // 設(shè)置到邊緣后的效果

      controller: _controller,
      // 設(shè)置控制器

      // 設(shè)置元素數(shù)量 & 具體元素
      itemCount: litems.length,
      itemBuilder: (BuildContext ctxt, int index) {
        return new Text(litems[index]);
      },

      // 設(shè)置分割線
      separatorBuilder: (context, index) {
        return Divider(
          height: 0.5,
          indent: 75,
          color: Color(0xFF968493),
        );
      },
    );
  }
}

3. 進階使用

ListView的進階使用主要包括：下拉刷新 & 上拉加載

3.1 下拉刷新

a. 簡介

在Flutter中讥此，ListView結(jié)合RefreshIndicator組件實現(xiàn)下拉刷新

b. 原理

通過包裹一層RefreshIndicator拢锹，自定義onRefresh回調(diào)方法實現(xiàn)

c. 構(gòu)造方法

const RefreshIndicator({
    Key key,
    @required this.child, // 傳入ListView組件
    this.displacement = 40.0, // 下拉距離，根據(jù)這個距離判定刷新執(zhí)行萄喳。默認40.0
    @required this.onRefresh, // 刷新回調(diào)方法卒稳，返回類型必須為Future
    this.color, // 刷新進度條顏色，默認當(dāng)前主題顏色
    this.backgroundColor, // 背景顏色
    this.color, // 刷新進度條顏色取胎，默認當(dāng)前主題顏色
    this.backgroundColor, // 背景顏色
    
// ...
  })

d. 具體使用

// 使用RefreshIndicator實現(xiàn)下拉刷新
return RefreshIndicator(

  // 步驟1：設(shè)置組件ListView
  child: ListView.builder(
    // ...
   }),
  // 步驟2：設(shè)置屬性
  displacement: 30, // 設(shè)置下拉距離為30時展哭，進行刷新
  color: Colors.red,// 設(shè)置顏色
  backgroundColor: Colors.green,
  onRefresh: _handleRefresh, // 設(shè)置刷新后的方法
);
}

// 步驟3：設(shè)置下拉刷新方法：返回類型必須為Future
Future<Null> _handleRefresh() async {
  // ...
}

e. 使用示例

import 'package:flutter/material.dart'; // Material UI組件庫

void main() => runApp(MyApp());

// 無狀態(tài)控件顯示
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
    return MaterialApp(
      title: 'Widget_Demo', //標(biāo)題
      theme: ThemeData(primarySwatch: Colors.blue), //主題色
      home: MyWidget(), // 返回一個Widget對象，用來定義當(dāng)前應(yīng)用打開的時候闻蛀，所顯示的界面
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _MyWidgetState();
  }
}

class _MyWidgetState extends State<MyWidget> {
  
  // 列表ListView數(shù)據(jù)
  List<String> litems = [
    "test 1",
    "test 2",
    "test 3",
    "test 4",
    "test 5",
    "test 6",
    "test 7",
    "test 8",
    "test 9",
    "test 10",
    "test 11",
    "test 12",
    "test 13",
    "test 14",
    "test 15"
  ];

  List<String> upgradeLitems = [
    " test A",
    " test B",
    " test C",
    " test D",
    " test E",
    " test F",
    " test G",
    " test I",
    " test J",
    " test K",
    " test L",
    " test M",
    " test N",
    " test O",
    " test P"
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    
    // 使用RefreshIndicator實現(xiàn)下拉刷新
    return RefreshIndicator(

      // 設(shè)置組件ListView
      child: ListView.builder(
          scrollDirection: Axis.vertical,
          // 設(shè)置方向

          // 設(shè)置元素數(shù)量 & 具體元素
          itemCount: litems.length,
          itemBuilder: (BuildContext ctxt, int index) {
            return new Text(litems[index]);
          }),

      displacement: 30, // 設(shè)置下拉距離為30時匪傍，進行刷新
      color: Colors.red,// 設(shè)置顏色
      backgroundColor: Colors.green,

      onRefresh: _handleRefresh, // 設(shè)置刷新后的方法
    );
  }

  // 下拉刷新方法
  Future<Null> _handleRefresh() async {
    // 模擬數(shù)據(jù)的延遲加載
    await Future.delayed(Duration(seconds: 2), () {
      setState(() {
        print('refresh');
        // 添加更新的數(shù)據(jù)
        litems = upgradeLitems;
      });
    });
  }
}

f. 測試效果

示意圖

3.2 上拉加載

方式有兩種：

ListView.controller屬性：通過ScrollController可以判斷ListView是否滑動到了底部，再進行上拉加載
NotificationListener：監(jiān)聽ListVIew的滑動狀態(tài)觉痛，當(dāng)ListView滑動到底部時役衡，進行上拉加載

方式1：ListView.controller屬性

a. 原理

通過ListView.controller屬性可以判斷ListView是否滑動到了底部，再進行上拉加載

b. 具體實現(xiàn)

// 步驟1：初始化控制器
ScrollController _controller = ScrollController();

// 步驟2：對控制器添加監(jiān)聽：監(jiān)聽ListView是否滾動到底部
  _controller.addListener(() {
    // _scrollController.position.pixels表示ListView當(dāng)前滑動的距離
    // _scrollController.position.maxScrollExtent表示ListView可以滑動的最大距離
    // 因此pixels >= maxScrollExtent就表示ListView已經(jīng)滑動到了底部
    if (_controller.position.pixels >=
        _controller.position.maxScrollExtent) {
      
      // 執(zhí)行上拉加載邏輯
    }
  });

  // 步驟3：使用后要移除監(jiān)聽
  _controller.dispose();

c. 使用示例

import 'package:flutter/material.dart'; // Material UI組件庫

void main() => runApp(MyApp());

// 無狀態(tài)控件顯示
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
    return MaterialApp(
      title: 'Widget_Demo', //標(biāo)題
      theme: ThemeData(primarySwatch: Colors.blue), //主題色
      home: MyWidget(), // 返回一個Widget對象薪棒，用來定義當(dāng)前應(yīng)用打開的時候手蝎，所顯示的界面
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _MyWidgetState();
  }
}

class _MyWidgetState extends State<MyWidget> {
  // 初始化控制器
  ScrollController _controller = ScrollController();
  // 列表ListView數(shù)據(jù)
  List<String> litems = [
    "test 1",
    "test 2",
    "test 3",
    "test 4",
    "test 5",
    "test 6",
    "test 7",
    "test 8",
    "test 9",
    "test 10",
    "test 11",
    "test 12",
    "test 13",
    "test 14",
    "test 15"
  ];

  List<String> upgradeLitems = [
    " 上拉加載的新數(shù)據(jù)",
    " test B",
    " test C",
    " test D",
    " test E",
    " test F",
    " test G",
    " test I",
    " test J",
    " test K",
    " test L",
    " test M",
    " test N",
    " test O",
    " test P"
  ];

  @override
  void initState() {
    super.initState();

    // 對控制器添加監(jiān)聽：監(jiān)聽ListView是否滾動到底部
    _controller.addListener(() {
      // _scrollController.position.pixels表示ListView當(dāng)前滑動的距離
      // _scrollController.position.maxScrollExtent表示ListView可以滑動的最大距離
      // 因此pixels >= maxScrollExtent就表示ListView已經(jīng)滑動到了底部
      if (_controller.position.pixels >=
          _controller.position.maxScrollExtent) {
        print('滑動到了底部');
        // 執(zhí)行上拉加載邏輯
        _loadMore();
      }
    });
  }

 @override
  void dispose() {
    super.dispose();
    _controller.dispose(); // 使用后要移除監(jiān)聽
  }

  @override
  Widget build(BuildContext context) {

    return ListView.builder
      (
        scrollDirection: Axis.vertical,
        // 設(shè)置方向

        itemExtent: 50,
        // 當(dāng)滾動方向為垂直方向時榕莺，那么itemExtent = 子控件的高度
        // 當(dāng)滾動方向為水平方向時，那么itemExtent = 子控件的寬度
        padding: EdgeInsets.all(1.0),
        // 設(shè)置邊距

        physics: new AlwaysScrollableScrollPhysics(),
        // 設(shè)置到邊緣后的效果

        controller: _controller, // 設(shè)置控制器

        // 設(shè)置元素數(shù)量 & 具體元素
        itemCount: litems.length,
        itemBuilder: (BuildContext ctxt, int index) {
          return new Text(litems[index]);
        }
    );
  }

  // 上拉加載
  Future<Null> _loadMore() async {
    // 模擬數(shù)據(jù)的延遲加載
    await Future.delayed(Duration(seconds: 2), () {
      setState(() {
        litems.addAll(upgradeLitems);
      });
    });
  }
}

d. 示意圖

方式2：NotificationListener

a. 簡介

NotificationListener是一個Widget棵介，可監(jiān)聽子Widget發(fā)出的Notification

b. 原理

ListView在滑動時中會發(fā)出ScrollNotification類型的通知钉鸯，可通過監(jiān)聽該通知得到ListView的滑動狀態(tài)，判斷是否滑動到了底部邮辽，從而進行上拉加載

c. 具體實現(xiàn)

// 使用NotificationListener的onNotification屬性進行監(jiān)聽
return  NotificationListener<ScrollNotification>(
      onNotification: (ScrollNotification scrollNotification) {
        // _scrollController.position.pixels表示ListView當(dāng)前滑動的距離
        // _scrollController.position.maxScrollExtent表示ListView可以滑動的最大距離
        // 因此pixels >= maxScrollExtent就表示ListView已經(jīng)滑動到了底部
        if (scrollNotification.metrics.pixels >=
            scrollNotification.metrics.maxScrollExtent) {
          // 執(zhí)行上拉加載邏
        }
        return false;
      },
      child: ListView.builder
        (
          // 構(gòu)建ListView
      )
    );

d. 使用示例

NotificationListener有一個onNotification屬性唠雕，定義了監(jiān)聽的回調(diào)方法，通過它來處理加載更多邏輯

import 'package:flutter/material.dart'; // Material UI組件庫

void main() => runApp(MyApp());

// 無狀態(tài)控件顯示
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
    return MaterialApp(
      title: 'Widget_Demo', //標(biāo)題
      theme: ThemeData(primarySwatch: Colors.blue), //主題色
      home: MyWidget(), // 返回一個Widget對象吨述，用來定義當(dāng)前應(yīng)用打開的時候岩睁，所顯示的界面
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _MyWidgetState();
  }
}

class _MyWidgetState extends State<MyWidget> {
  // 列表ListView數(shù)據(jù)
  List<String> litems = [
    "test 1",
    "test 2",
    "test 3",
    "test 4",
    "test 5",
    "test 6",
    "test 7",
    "test 8",
    "test 9",
    "test 10",
    "test 11",
    "test 12",
    "test 13",
    "test 14",
    "test 15"
  ];

  List<String> upgradeLitems = [
    " 上拉加載的新數(shù)據(jù)",
    " test B",
    " test C",
    " test D",
    " test E",
    " test F",
    " test G",
    " test I",
    " test J",
    " test K",
    " test L",
    " test M",
    " test N",
    " test O",
    " test P"
  ];

  @override
  Widget build(BuildContext context) {

    // 使用NotificationListener的onNotification屬性進行監(jiān)聽
    return  NotificationListener<ScrollNotification>(
          onNotification: (ScrollNotification scrollNotification) {
            // _scrollController.position.pixels表示ListView當(dāng)前滑動的距離
            // _scrollController.position.maxScrollExtent表示ListView可以滑動的最大距離
            // 因此pixels >= maxScrollExtent就表示ListView已經(jīng)滑動到了底部
            if (scrollNotification.metrics.pixels >=
                scrollNotification.metrics.maxScrollExtent) {
              print('滑動到了底部');
              // 執(zhí)行上拉加載邏輯
              _loadMore();
            }
            return false;
          },
          child: ListView.builder
            (
              scrollDirection: Axis.vertical,
              // 設(shè)置方向

              itemExtent: 50,
              // 當(dāng)滾動方向為垂直方向時帅矗，那么itemExtent = 子控件的高度
              // 當(dāng)滾動方向為水平方向時于宙，那么itemExtent = 子控件的寬度
              padding: EdgeInsets.all(1.0),
              // 設(shè)置邊距

              physics: new AlwaysScrollableScrollPhysics(),
              // 設(shè)置到邊緣后的效果

              // 設(shè)置元素數(shù)量 & 具體元素
              itemCount: litems.length,
              itemBuilder: (BuildContext ctxt, int index) {
                return new Text(litems[index]);
              }
          )
        );
  }

  // 上拉加載
  Future<Null> _loadMore() async {
    // 模擬數(shù)據(jù)的延遲加載
    await Future.delayed(Duration(seconds: 2), () {
      setState(() {
        litems.addAll(upgradeLitems);
      });
    });
  }
}

4. 總結(jié)

本文全面介紹了Flutter ListView組件的使用
接下來推出的文章倡蝙，我將繼續(xù)講解Flutter的相關(guān)知識遣钳，包括使用語法朱监、實戰(zhàn)等括饶，感興趣的讀者可以繼續(xù)關(guān)注我的博客哦：Carson_Ho的Android博客

請點贊暇藏！因為你們的贊同/鼓勵是我寫作的最大動力目代！

相關(guān)文章閱讀
Android開發(fā)：最全面翎迁、最易懂的Android屏幕適配解決方案
 Android開發(fā)：史上最全的Android消息推送解決方案
 Android開發(fā)：最全面栋猖、最易懂的Webview詳解
 Android開發(fā)：JSON簡介及最全面解析方法!
Android四大組件：Service服務(wù)史上最全面解析
 Android四大組件：BroadcastReceiver史上最全面解析

歡迎關(guān)注Carson_Ho的簡書！

不定期分享關(guān)于安卓開發(fā)的干貨汪榔，追求短蒲拉、平、快痴腌，但卻不缺深度雌团。

Flutter：手把手教你使用滾動型列表組件：ListView

前言

目錄

1. 簡介

2. 基礎(chǔ)使用

使用方式1：ListView（）

a. 簡介

b. 構(gòu)造方法

c. 具體使用

d. 示意圖

使用方式2：ListView.build()

a. 應(yīng)用場景

b. 構(gòu)造函數(shù)

c. 具體使用

d. 示意圖

使用方式3：ListView.separated()

a. 應(yīng)用場景

b. 構(gòu)造函數(shù)

c. 具體使用

3. 進階使用

3.1 下拉刷新

a. 簡介

b. 原理

c. 構(gòu)造方法

d. 具體使用

e. 使用示例

f. 測試效果

3.2 上拉加載

方式1：ListView.controller屬性

a. 原理

b. 具體實現(xiàn)

c. 使用示例

d. 示意圖

方式2：NotificationListener

a. 簡介

b. 原理

c. 具體實現(xiàn)

d. 使用示例

4. 總結(jié)

請點贊暇藏！因為你們的贊同/鼓勵是我寫作的最大動力目代！

歡迎關(guān)注Carson_Ho的簡書！