前言

Flutter ListView在日常開發中非常常見
今天，carson全面介紹Flutter ListView的使用，包括基礎使用 & 進階使用（下拉刷新、上拉加載），希望你們會喜歡。

示意圖

1. 簡介

定義：滾動型控件
作用：可滾動顯示超出屏幕的內容
應用場景：顯示超過一屏的內容

2. 基礎使用

ListView的基礎創建使用有三種方式：

默認構造函數：ListView（）
ListView.build()
ListView.separated()

使用方式1：ListView（）

a. 簡介

通過默認構造函數來創建列表，應用場景 = 短列表

b. 構造方法

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

c. 具體使用

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

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

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

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();
    // 設置監聽方法
    _controller.addListener(() {
      print('_controller Listener');
      print(_controller.offset); // 打印滾動位置
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.vertical,
      // 設置方向

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

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

      controller: _controller,
      // 添加監聽器
      
      // 設置子控件
      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. 示意圖

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

使用方式2：ListView.build()

a. 應用場景

長列表

b. 構造函數

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

// 特別注意：不同于ListView默認構造函數通過children參數指定子元素的這種方式，ListView.build通過暴露統一的itemBuilder方法將渲染子元素的控制權交還給調用方。

c. 具體使用

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

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

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

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();
    // 設置監聽方法
    _controller.addListener(() {
      print('_controller Listener');
      print(_controller.offset); // 打印滾動位置
    });
  }

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

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

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

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

d. 示意圖

使用方式3：ListView.separated()

a. 應用場景

列表子項之間需要分割線

b. 構造函數

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

c. 具體使用

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

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

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

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();
    // 設置監聽方法
    _controller.addListener(() {
      print('_controller Listener');
      print(_controller.offset); // 打印滾動位置
    });
  }

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

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

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

      controller: _controller,
      // 設置控制器

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

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

3. 進階使用

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

3.1 下拉刷新

a. 簡介

在Flutter中，ListView結合RefreshIndicator組件實現下拉刷新

b. 原理

通過包裹一層RefreshIndicator，自定義onRefresh回調方法實現

c. 構造方法

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

d. 具體使用

// 使用RefreshIndicator實現下拉刷新
return RefreshIndicator(

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

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

e. 使用示例

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

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

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

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

class _MyWidgetState extends State<MyWidget> {
  
  // 列表ListView數據
  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實現下拉刷新
    return RefreshIndicator(

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

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

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

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

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

f. 測試效果

示意圖

3.2 上拉加載

方式有兩種：

ListView.controller屬性：通過ScrollController可以判斷ListView是否滑動到了底部，再進行上拉加載
NotificationListener：監聽ListVIew的滑動狀態，當ListView滑動到底部時，進行上拉加載

方式1：ListView.controller屬性

a. 原理

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

b. 具體實現

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

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

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

c. 使用示例

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

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

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

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

class _MyWidgetState extends State<MyWidget> {
  // 初始化控制器
  ScrollController _controller = ScrollController();
  // 列表ListView數據
  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 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();

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

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

  @override
  Widget build(BuildContext context) {

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

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

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

        controller: _controller, // 設置控制器

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

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

d. 示意圖

方式2：NotificationListener

a. 簡介

NotificationListener是一個Widget，可監聽子Widget發出的Notification

b. 原理

ListView在滑動時中會發出ScrollNotification類型的通知，可通過監聽該通知得到ListView的滑動狀態，判斷是否滑動到了底部，從而進行上拉加載

c. 具體實現

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

d. 使用示例

NotificationListener有一個onNotification屬性，定義了監聽的回調方法，通過它來處理加載更多邏輯

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

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

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

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

class _MyWidgetState extends State<MyWidget> {
  // 列表ListView數據
  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 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屬性進行監聽
    return  NotificationListener<ScrollNotification>(
          onNotification: (ScrollNotification scrollNotification) {
            // _scrollController.position.pixels表示ListView當前滑動的距離
            // _scrollController.position.maxScrollExtent表示ListView可以滑動的最大距離
            // 因此pixels >= maxScrollExtent就表示ListView已經滑動到了底部
            if (scrollNotification.metrics.pixels >=
                scrollNotification.metrics.maxScrollExtent) {
              print('滑動到了底部');
              // 執行上拉加載邏輯
              _loadMore();
            }
            return false;
          },
          child: ListView.builder
            (
              scrollDirection: Axis.vertical,
              // 設置方向

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

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

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

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

4. 總結

本文全面介紹了Flutter ListView組件的使用
接下來推出的文章，我將繼續講解Flutter的相關知識，包括使用語法、實戰等，感興趣的讀者可以繼續關注我的博客哦：Carson_Ho的Android博客

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

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

歡迎關注Carson_Ho的簡書！

不定期分享關于安卓開發的干貨，追求短、平、快，但卻不缺深度。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

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

前言

目錄

1. 簡介

2. 基礎使用

使用方式1：ListView（）

a. 簡介

b. 構造方法

c. 具體使用

d. 示意圖

使用方式2：ListView.build()

a. 應用場景

b. 構造函數

c. 具體使用

d. 示意圖

使用方式3：ListView.separated()

a. 應用場景

b. 構造函數

c. 具體使用

3. 進階使用

3.1 下拉刷新

a. 簡介

b. 原理

c. 構造方法

d. 具體使用

e. 使用示例

f. 測試效果

3.2 上拉加載

方式1：ListView.controller屬性

a. 原理

b. 具體實現

c. 使用示例

d. 示意圖

方式2：NotificationListener

a. 簡介

b. 原理

c. 具體實現

d. 使用示例

4. 總結

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

歡迎關注Carson_Ho的簡書！

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频