亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

android使用flutter的ListView實現滾動列表的示例代碼

發布時間:2020-09-02 15:14:47 來源:腳本之家 閱讀:211 作者:流汗去 欄目:移動開發

現如今打開一個 App,比如頭條、微博,都會有長列表,隨著我們不斷地滑動,視窗內的內容也會不斷地更新。今天就用 Flutter 實現一下這種效果。

android使用flutter的ListView實現滾動列表的示例代碼

這里的表現其實就相當于有一個固定長度的容器,然后超出的內容是不可見的,只有當你向上或向下滑動屏幕時,視窗外看不見的內容才會出現在視窗中。如果在 web 開發時,是需要容器加上樣式

overflow: auto;

要想用 Flutter 實現,其實也是很簡單的,因為 Flutter 為我們提供了 ListView 組件。

ListView 主要有以下幾種使用方式

  • ListView
  • ListView.builder
  • ListView.separated
  • ListView.custom

ListView

ListView 是最簡單直接的方式,簡單,那么適用的場景也是簡單的。僅適用于內容較少的情形,因為它是一次性渲染所有的 items ,當 items 的數目較多時,很容易出現卡頓現象的,導致滑動不流暢。 你可以試試加大下面 items 的大小,然后對比一下體驗效果。

class ListViewDemo extends StatelessWidget {
 final _items = List<Widget>.generate(10,
   (i) => Container(padding: EdgeInsets.all(16.0), child: Text("Item $i")));

 @override
 Widget build(BuildContext context) {
  return ListView(
   children: _items,
  );
 }
}

ListView.builder()

構造函數 builder 要求傳入兩個參數, itemCountitemBuilder 。前者規定列表數目的多少,后者決定了每個列表如何渲染。跟 ListView 不同的點在于,這是懶加載的,假如有 1000 個列表,初始渲染時并不會所有都渲染,而只會特定數量的 item ,這對于性能和用戶體驗來說,是很好的提升。 你可以對比用 ListView 和用 ListView.builder 渲染 1000 個列表時,體驗是否有差別。

class ListViewDemo extends StatelessWidget {
 final _items = List<String>.generate(1000, (i) => "Item $i");

 @override
 Widget build(BuildContext context) {
  return ListView.builder(
   itemCount: 1000,
   itemBuilder: (context, idx) {
    return Container(
     padding: EdgeInsets.all(16.0),
     child: Text(_items[idx]),
    );
   },
  );
 }
}

ListView.separated()

separated 相比較于 builder,又多了一個參數 separatorBuilder ,用于控制列表各個元素的間隔如何渲染。比如,我們需要列表的每個 item 之間有一個分割線,就可以跟下面那樣,加一個 Divider 組件。

class ListViewDemo extends StatelessWidget {
 final _items = List<String>.generate(1000, (i) => "Item $i");

 @override
 Widget build(BuildContext context) {
  return ListView.separated(
   itemCount: 1000,
   itemBuilder: (context, idx) {
    return Container(
     padding: EdgeInsets.all(16.0),
     child: Text(_items[idx]),
    );
   },
   separatorBuilder: (context, idx) {
    return Divider();
   },
  );
 }
}

ListView.custom()

custom,就跟名字一樣,讓我們自定義。必須的參數就是 childrenDelegate , 然后傳入一個 實現了 SliverChildDelegate 的組件,如 SliverChildListDelegateSliverChildBuilderDelegate

SliverChildListDelegate 接收跟 ListView 一樣的 children ,而 SliverChildBuilderDelegate 接收跟 ListView.builder 的 itemBuilder 一樣類型的函數。

正常來說,前面三個已經可以滿足我們的日常使用需求了,無需自定義。

總結,上面主要討論了 ListView 的幾個構造函數及用法,討論如何實現常見的滾動列表。

完成的代碼,可見list_view.dart 。

最后

筆者最近在學習flutter,會持續地記錄自己的學習過程,并放在 github 上。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

岑巩县| 黔西县| 扶风县| 乌兰浩特市| 宁陵县| 通渭县| 汉源县| 井冈山市| 阳泉市| 屏东县| 临湘市| 栖霞市| 三门峡市| 石棉县| 乌兰浩特市| 高邑县| 顺平县| 峨边| 资溪县| 文化| 溧水县| 宣汉县| 称多县| 交口县| 扎鲁特旗| 瑞金市| 垦利县| 永春县| 吴江市| 南漳县| 南陵县| 萝北县| 靖州| 马龙县| 渝北区| 红原县| 双辽市| 土默特左旗| 扎鲁特旗| 黔西县| 贵溪市|