flutter中ListView作一個掘金列表

時間  2021-08-12
標籤 css 前端 web 後端 數組 markdown app less ide 函數 欄目 CSS 简体版
原文   原文鏈接

本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！css

1.ListView的簡單介紹

ListView是最經常使用的能夠滾動組件之一，
它能夠沿一個方向進行線性排列全部的子組件。
咱們能夠把它理解成橫向和縱向滾動的組件
複製代碼

2.ListView的屬性值

scrollDirection:列表的滾動方向，
可選值有Axis的horizontal和vertical，
默認是垂直方向上滾動。

controller:控制器，與列表滾動相關，好比監聽列表的滾動事件。

physics: 列表滾動至邊緣後繼續拖動的物理效果，
Android與iOS效果不一樣。
Android會呈現出一個波紋狀（對應ClampingScrollPhysics），
而iOS上有一個回彈的彈性效果（對應BouncingScrollPhysics）。
若是你想不一樣的平臺上呈現各自的效果可使用AlwaysScrollableScrollPhysics，
它會根據不一樣平臺自動選用各自的物理效果。若是你想禁用在邊緣的拖動效果，
那可使用NeverScrollableScrollPhysics；

shrinkWrap: 該屬性將決定列表的長度是否僅包裹其內容的長度。
當ListView嵌在一個無限長的容器組件中時，
shrinkWrap必須爲true，不然Flutter會給出警告；

padding: 列表內邊距；

itemExtent: 子元素長度。
當列表中的每一項長度是固定的狀況下能夠指定該值，
有助於提升列表的性能
（由於它能夠幫助ListView在未實際渲染子元素以前就計算出每一項元素的位置）；

children: 容納子元素的組件數組。
複製代碼

3.ListTile 屬性簡介

this.leading,              // 內容的==>前置圖標
this.title,                // 內容的==>標題
this.subtitle,             // 內容的==>副標題
this.trailing,             // 內容的==>後置圖標
this.isThreeLine = false,  // 內容的==>是否三行顯示
this.dense,                // 內容的==>直觀感覺是總體大小
this.contentPadding,       // 內容的==>內容內邊距
this.enabled = true,       // 內容 是否禁用
this.onTap,                // item onTap 點擊事件
this.onLongPress,          // item onLongPress 長按事件
this.selected = false,     // item 是否選中狀態
複製代碼

4.ListView的基本使用

咱們作一個新聞列表；
結構很是的簡單：有主標題和副標題
title(主標題)和subtitle(subtitle)
咱們一塊兒來看看長成什麼樣子。
複製代碼
class MyCont extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(children: <Widget>[
      ListTile(
        // 主標題
        title: Text('Flutter 由 Google 的工程師團隊打造，用於建立高性能、跨平臺的移動應用',
            //文字左對齊
            textAlign: TextAlign.left, 
            //超出顯示省略號
            overflow: TextOverflow.ellipsis, 
            style: TextStyle(
              //數字必須是Double類型的
              fontSize: 20.0, 
              //  設置字體的顏色
              color: Color.fromARGB(200, 100, 100, 8)
            )
        ),
        // 副標題
        subtitle: Text('你好flutter'),
      ),
      ListTile(
        title: Text('Flutter 由 Google 的工程師團隊打造，用於建立高性能、跨平臺的移動應用'),
        subtitle: Text('你好flutter'),
      ),
    ]);
  }
}
複製代碼

01.png

5.listView列表設置前置圖標

class MyCont extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(children: <Widget>[
      ListTile(
        // 主標題
        // 在前面設置圖標
        leading: Icon(
          //設置圖標類型
          Icons.settings, 
          //0x後面開始 兩位FF表示透明度16進制，
          color: Color(0xFFFFB6C1), 
          //這是圖標的大小
          size: 30.0
        ),
        // 在後面設置圖標
        // trailing: Icon(Icons.accessible),
        title: Text('flutter教程_2021 Dart Flutter入門實戰視頻教程132講',
          //文字左對齊
          textAlign: TextAlign.left, 
          //超出顯示省略號
          overflow: TextOverflow.ellipsis, 
          style: TextStyle(
            fontSize: 20.0, //數字必須是Double類型的
            //  設置字體的顏色
            color: Color(0xFFFFB6C1)
          )
        ),
        subtitle: Text('不論是Ios仍是Android開發均可以在flutter官網上查到安裝及使用步驟，這裏我就不累述太多'),
      ),
    ]);
  }
}
複製代碼

02.png

6.設置前置圖片

class MyCont extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(children: <Widget>[
      ListTile(
        // 主標題
        // 經過leading能夠將圖片放在前面
        leading: Image.network(
          "https://giidu.c/ster/src=http%3A%2F%2Ft14.npg"),
          title: Text(
            'flutter教程_2021 Dart Flutter入門實戰視頻教程132講',
            textAlign: TextAlign.left, //文字左對齊
            overflow: TextOverflow.ellipsis, //超出顯示省略號
            style: TextStyle(
              fontSize: 20.0, //數字必須是Double類型的
              //  設置字體的顏色
              color: Color(0xFFFFB6C1)
            )
          ),
        subtitle: Text('不論是Ios仍是Android開發均可以在flutter官網上查到安裝及使用步驟，這裏我就不累述太多'),
      ),
    ]);
  }
}
複製代碼

03.jpg

7.垂直列表

class MyCont extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(children: <Widget>[
      Container(
        width: 750.0,
        height: 200.0,
        color:Color(0xFFFFB6C1),
        // 外邊距 左上右下，跟css不同哈
        margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
      ),
      Container(
        width: 750.0,
        height: 200.0,
        color: Color(0xFFFFB6C1),
        // 外邊距 左上右下，跟css不同哈
        margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
      )
    ]);
  }
}
複製代碼

04.jpg

8.水平排列

class MyCont extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200.0,
      child:new ListView(
        // 水平排列 
        scrollDirection: Axis.horizontal, children: <Widget>[
          Container(
            width: 220.0,
            height: 200.0,
            color: Color(0xFFFFB6C1),
            // 外邊距 左上右下，跟css不同哈
            margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          ),
          Container(
            width: 220.0,
            height: 200.0,
            color: Color(0xFFFFB6C1),
            // 外邊距 左上右下，跟css不同哈
            margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          ),
          Container(
            width: 220.0,
            height: 200.0,
            color: Color(0xFFFFB6C1),
            // 外邊距 左上右下，跟css不同哈
            margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
          ),
        ]
      )
    );
  }
}
複製代碼

05.jpg

9.動態列表

在項目的實際開發過程當中；
咱們會有不少的列表；
咱們想將ListView中children中的代碼封裝成爲一個函數。
方便後期的管理
複製代碼
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(appBar: AppBar(title: Text('首頁')), body: MyCont()),
      //設置頂部的顏色
      theme: ThemeData(primarySwatch: Colors.yellow),
    );
  }
}

class MyCont extends StatelessWidget {
  // Lis裏面的數據必須是Widget組件；
  // _backDataList方法下劃線開頭，表示當前這個類私有的。
  List<Widget> _backDataList() {
    return [
      ListTile(
        title: Text('我是新聞標題1'),
      ),
      ListTile(
        title: Text('我是新聞標題2'),
      ),
      ListTile(
        title: Text('我是新聞標題3'),
      ),
      ListTile(
        title: Text('我是新聞標題4'),
      )
    ];
  }

  @override
  Widget build(BuildContext context) {
    return ListView(children: this._backDataList());
  }
}
複製代碼

06.jpg

10.往數組中添加數據進行循環

class MyCont extends StatelessWidget {
  // Lis裏面的數據必須是Widget組件；
  // _backDataList方法下劃線開頭，表示當前這個類私有的。
  List<Widget>_backDataList() {
    // 聲明瞭一個數組，裏面的數據類型是Widget
    List<Widget> list = []; 
    for (var i = 0; i < 10; i++) {
      list.add(ListTile(
        title: Text('我是新聞標題$i'),
      ));
    }
    return list;
  }
  @override
  Widget build(BuildContext context) {
    return ListView(children: this._backDataList());
  }
}
複製代碼

11.爲何要使用ListView.builder

ListView.builder下的兩個屬性值
itemCount：指定被循環數組的長度
itemBuilder:它有2個參數。
itemBuilder(contText, index) {
    contText表示的循環的內容
    index表示循環的索引值
}

若是itemBuilder下是一個封裝的函數，
不要添加括號，由於括號表示調用；
直接itemBuilder:this.youFunc就能夠了

使用ListView.builder的優點：
ListView.builder適合列表項比較多（或者無限）的狀況，
只有當子組件真正顯示的時候列表纔會被建立，
也就說經過該構造函數建立的ListView是支持基於Sliver的懶加載模型的。
也就是說使用ListView.builder能夠提高性能。
下面咱們將會使用ListView.builder來建立一個列表
複製代碼
在lib目錄下建立一個res
在res目錄下建立demo.dart
demo.dart文件下有數據的哈
import 'res/demo.dart';
List listData = [
  {
    'title': 'Python 創做季，秀出你的 Python 文章
  }
]
後面使用listData就能夠直接獲取數據了哈

class MyCont extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      // itemCount:指定該數組的長度
      itemCount: listData.length,
      //itemBuilder 會進行循環遍歷
      itemBuilder: (contText, index) {
        return ListTile(
          title: Text(listData[index]['title']),
          //還有不少的屬性xxxx........
        );
      },
    );
  }
}
複製代碼
前面咱們說了，使用ListView.builder能夠提升性能；
可是咱們發現了itemBuilder下若是有不少屬性的話；
那麼就會變得很是的臃腫的；
後期是不利於咱們維護；
那麼咱們能不能將 itemBuilder中的抽離出去了？
通過個人查詢文檔發現是能夠的
請看下面：
複製代碼

12.將itemBuilder中的屬性抽離出去

咱們能夠將原來itemBuilder下的代碼
封裝成爲一個方法放置在自定義的_getListData下；
方便咱們後期的維護以及修改
複製代碼
class MyCont extends StatelessWidget {
  //自定義的方法
  Widget _getListData(contText, index){
    return ListTile(
      title: Text(listData[index]['title']),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      // itemCount:指定該數組的長度
      itemCount: listData.length,
      //this._getListData是不須要加括號的；
      // 咱們這裏表示的複製該方法
      // this._getListData()表示的是直接去調用這個方法
      itemBuilder:this._getListData
    );
  }
}
複製代碼

13.ListView children與ListView.builder的區別

經過前面的例子，
咱們能夠發現ListView有默認構造函數。
ListView默認構造函數有一個children參數，
children接受一個Widget列表[List],

經過children參數的形式接受的子組件列表。
這種方式須要將全部的children都提早建立好；
所以須要提早作大量的工做；
因此:這種形式只適合少許的子組件的狀況

ListView.builder
ListView.builder適合列表項比較多（或者無限）的狀況，
只有當子組件真正顯示的時候列表纔會被建立，
也就說經過該構造函數建立的ListView是支持基於Sliver的懶加載模型的。
複製代碼

14.製做一個掘金列表

咱們將使用後置圖標trailing這個屬性來完成圖片後置。
同時咱們將給一個容器組件Container；
容器組件的寬高來限制圖片的大小；
咱們將會對圖片進行裁剪，
複製代碼
在lib目錄下建立一個res
在res目錄下建立demo.dart
demo.dart文件下有數據的哈
import 'res/demo.dart';
List listData = [
  {
    'title': 'Python 創做季，秀出你的 Python 文章
  }
]

class MyCont extends StatelessWidget {
  // Lis裏面的數據必須是Widget組件；
  // _backDataList方法下劃線開頭，表示當前這個類私有的。
  List<Widget> _backDataList() {
    var temtepleList = listData.map((value) {
      return ListTile(
          title: Text(
            value['title'],
            // 超出顯示省略號
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontSize: 16.0, color: Color(0xFF86909c)),
          ),
          subtitle: Text(
            value['cont'],
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontSize: 13.0, color: Color(0xFF86909c)),
          ),
          trailing: Container(
              width: 90.0, //容器寬
              height: 70.0, //容器高
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(4.0),
                image: DecorationImage(
                  image: NetworkImage(
                    value['img'],
                  ),
                  alignment: Alignment.topLeft, //左上角居中
                  fit: BoxFit.cover, //裁剪，充滿整個容器。不會變形
                ) 
              )
          )
      );
    });
    // 轉化成爲一個數組
    return temtepleList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(children: this._backDataList());
  }
}
複製代碼

07.jpg

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程