在我們開發(fā)App的時,最常用的就是列表,在flutter中使用ListView來實現(xiàn)類表的功能.

1.ListView使用方法

1.1 ListView()

ListView的創(chuàng)建方法是直接調(diào)用其默認(rèn)的構(gòu)造函數(shù)來創(chuàng)建列表.
下面我們就來看下其構(gòu)造函數(shù):

ListView({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    this.itemExtent,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
    List<Widget> children = const <Widget>[],
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.down,
  })

• key:做一個標(biāo)志來使用,相當(dāng)于iOS中的tag;
• scrollDirection:列表的滾動方向，可選值有Axis的horizontal和vertical，可以看到默認(rèn)是垂直方向上滾動;
• reverse:是一個bool值,選擇是否翻轉(zhuǎn);
• controller:控制器,處理與列表滾動相關(guān)的,比如監(jiān)聽列表的滾動的事件,滾動的位置;
• physics: 列表滾動至邊緣后繼續(xù)拖動的物理效果，Android與iOS效果不同。Android會呈現(xiàn)出一個波紋狀（對應(yīng)ClampingScrollPhysics），而iOS上有一個回彈的彈性效果（對應(yīng)BouncingScrollPhysics）。如果你想不同的平臺上呈現(xiàn)各自的效果可以使用AlwaysScrollableScrollPhysics，它會根據(jù)不同平臺自動選用各自的物理效果。如果你想禁用在邊緣的拖動效果，那可以使用NeverScrollableScrollPhysics;
• shrinkWrap: 該屬性將決定列表的長度是否僅包裹其內(nèi)容的長度。當(dāng)ListView嵌在一個無限長的容器組件中時，shrinkWrap必須為true，否則Flutter會給出警告;
• padding: 列表內(nèi)邊距；
• itemExtent: 子元素長度。當(dāng)列表中的每一項長度是固定的情況下可以指定該值，有助于提高列表的性能(因為它可以幫助ListView在未實際渲染子元素之前就計算出每一項元素的位置);
• 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)建或會被銷毀）；
• children: 容納子元素的組件數(shù)組;

默認(rèn)的創(chuàng)建模式:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  Widget _getListItem(String title,IconData icon){
    return Container(
      child: ListTile(
        leading: Icon(icon),
        trailing: Icon(icon),
        title: Text(title),
        subtitle: Text('我是將軍'),
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'textTitle',
      home: Scaffold(
        appBar: AppBar(
          title: Text('最后戰(zhàn)役'),
        ),
        body: Center(
          child: ListView(
            children: <Widget>[
              _getListItem('第一行', Icons.map),
              _getListItem('第二行', Icons.phone),
              _getListItem('第三行', Icons.adb),
            ],
          ),
        ),
      ),
    );
  }
}

1.2 ListTitle()

在上面的代碼部分出現(xiàn)了一個ListTitle,ListTile 是Flutter 給我們準(zhǔn)備好的widget 提供非常常見的構(gòu)造和定義方式，包括文字，icon，點擊事件，一般是能夠滿足基本需求，但是就不能自己定義了.

ListTitle的屬性
this.leading,              // item 前置圖標(biāo)
this.title,                // item 標(biāo)題
this.subtitle,             // item 副標(biāo)題
this.trailing,             // item 后置圖標(biāo)
this.isThreeLine = false,  // item 是否三行顯示
this.dense,                // item 直觀感受是整體大小
this.contentPadding,       // item 內(nèi)容內(nèi)邊距
this.enabled = true,
this.onTap,                // item onTap 點擊事件
this.onLongPress,          // item onLongPress 長按事件
this.selected = false,     // item 是否選中狀態(tài)

1.1的效果圖.png

1.3 ListView builder()

builder 顧名思義 構(gòu)造 可以非常方便的構(gòu)建我們自己定義的child布局，所以在Flutter中非常的常用。

builder屬性詳細(xì)介紹
//設(shè)置滑動方向 Axis.horizontal 水平  默認(rèn) Axis.vertical 垂直
scrollDirection: Axis.vertical,
//內(nèi)間距EdgeInsets.all(),EdgeInsets.only().
padding: EdgeInsets.all(10.0),
//是否倒序顯示 默認(rèn)正序 false  倒序true
reverse: false,
//false，如果內(nèi)容不足，則用戶無法滾動 而如果[primary]為true，它們總是可以嘗試滾動。
primary: true,
//確定每一個item的高度 會讓item加載更加高效
itemExtent: 50.0,
//內(nèi)容適配
shrinkWrap: true,
//item 數(shù)量
itemCount: list.length,
//滑動類型設(shè)置
physics: new ClampingScrollPhysics(),
//cacheExtent  設(shè)置預(yù)加載的區(qū)域 
cacheExtent: 30.0, 
//滑動監(jiān)聽
controller ,

• child 高度會適配 item填充的內(nèi)容的高度,我們非常的不希望child的高度固定，因為這樣的話，如果里面的內(nèi)容超出就會造成布局的溢出。
• shrinkWrap多用于嵌套listView中 內(nèi)容大小不確定 比如 垂直布局中 先后放入文字 listView （需要Expend包裹否則無法顯示無窮大高度 但是需要確定listview高度 shrinkWrap使用內(nèi)容適配不會有這樣的影響）.
• primary在構(gòu)造中默認(rèn)是false 它的意思就是為主的意思，primary為true時，我們的controller 滑動監(jiān)聽就不能使用了.
• physics這個屬性幾個滑動的選擇:
  AlwaysScrollableScrollPhysics() 總是可以滑動
  NeverScrollableScrollPhysics禁止?jié)L動
  BouncingScrollPhysics 內(nèi)容超過一屏 上拉有回彈效果
  ClampingScrollPhysics 包裹內(nèi)容 不會有回彈
• cacheExtent這個屬性的意思就是預(yù)加載的區(qū)域,設(shè)置預(yù)加載的區(qū)域 cacheExtent 強制設(shè)置為了 0.0，從而關(guān)閉了“預(yù)加載”.
• controller滑動監(jiān)聽，我們多用于上拉加載更多，通過監(jiān)聽滑動的距離來執(zhí)行操作。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'textTitle',
      home: Scaffold(
        appBar: AppBar(
          title: Text('最后戰(zhàn)役'),
        ),
        body: Container(
          child:listViewLayoutBuilder(),
        ),
      ),
    );
  }
}
///listView builder 構(gòu)建
Widget listViewLayoutBuilder() {
  return ListView.builder(
      scrollDirection: Axis.vertical,
      padding: EdgeInsets.all(10.0),
      reverse: false,
      primary: true,
      itemExtent: 50.0,
      shrinkWrap: true,
      itemCount: 4,
      cacheExtent: 30.0,
      physics: new ClampingScrollPhysics(),
    itemBuilder: (context, i){
    return Container(
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          new Text(
            "1",
            style: new TextStyle(fontSize: 18.0, color: Colors.red),
          ),
          new Text(
            "2",
            style: new TextStyle(fontSize: 18.0, color: Colors.green),
          ),
          new Text(
            "3",
            style: new TextStyle(fontSize: 18.0, color: Colors.blue),
          ),
        ],
      ),
    );}
  );
}

2.ListView的分割線加入

2.1 builder模式來設(shè)置分割線

我們在正常的需求中大部分是需要item的分割線的，而在builder模式中使用divide 會有種情況（divide放在item的布局中 通過Column），我們會發(fā)現(xiàn)divide并沒有直接延時到item兩端而是會有左右padding。
所以我們可以通過另外一種方式去實現(xiàn)。

//1.擴大list容積 為什么是兩倍，因為我們給了divide的index
 Widget listView = new ListView.builder(
              itemCount: list.length * 2 ,
              itemBuilder: (context, index) => itemDividerRow(context, index));
//2. 根據(jù)下標(biāo)分配item類型
itemDividerRow(context, int i) {
  if (i.isOdd) {//是奇數(shù)
        return new Divider( //返回分割線
          height: 1.0,
        );
  } else {
        i = i ~/ 2;
        return getRowWidget(context, orderList[i]);  //返回item 布局
 }
} 

這樣我們就可以去實現(xiàn)了，builder模式分割線 .

2.2 ListView separated

ListView.separated的模式更加方便我們給列表頁面添加分割線.

ListView.separated({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    @required IndexedWidgetBuilder itemBuilder,
    @required IndexedWidgetBuilder separatorBuilder, //分割線
    @required int itemCount,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
  })

從屬性大部分可以看出和flutter的ListView屬性差不多.比ListView多了一個separatorBuilder的屬性.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'textTitle',
      home: Scaffold(
        appBar: AppBar(
          title: Text('最后戰(zhàn)役'),
        ),
        body: Container(
        child: ListViewBuilder(),
        ),
      ),
    );
  }
}

class ListViewBuilder extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ListViewBuilder();
  }
}

class _ListViewBuilder extends State<ListViewBuilder> {
  /*初始項為50個*/
  List<int> indexs = List.generate(50, (index) {
    return index;
  });

  @override
  Widget build(BuildContext context) {
    /*灰色分割線*/
    var divider = Divider(
      color: Colors.grey,
    );

    return ListView.separated(
        padding: EdgeInsets.all(10),
        itemCount: indexs.length,
        separatorBuilder: (context, index) {
          return divider;
        },
        itemBuilder: (context, index) {
          /*加載到底部時且集合數(shù)量小于100的話，獲取更多數(shù)據(jù)*/
          if (index == indexs.length - 1 && indexs.length < 100) {
            _getMoreData(index);
          }

          return Text("${index}");
        });
  }

  void _getMoreData(int index) {
    Future.delayed(Duration(milliseconds: 300)).then((e) {
      setState(() {
        /*往集合里添加10條數(shù)據(jù)*/
        indexs.addAll(List.generate(10, (i) {
          return index + i;
        }));
      });
    });
  }
}

                            想了解更多Flutter學(xué)習(xí)知識請聯(lián)系:QQ(814299221)