Flutter——ListView的建立方式

江湖救急發表於2019-09-18

前言

Flutter中的ListView和Android裡面的ListView,RecycleView有些相似,作用都是可以滾動項的線性列表,裡面存放相關元件的集合,在一般情況下,這些元件結構具有重複性,即每個Item結構基本相同.

ListView的建立方式大致分為四種:

(1) ListView

(2) ListView.builder

(3) ListView.separated

(4) ListWheelScrollView

下面演示每種列表建立與顯示

準備工作

1,建立資料模型類

class ItemModel{
  var _color;
  var _icon;
  var _mainTitle;
  var _subTitle;
  var _des;
  var _readCount;

  ItemModel(this._color, this._icon, this._mainTitle, this._subTitle, this._des,
      this._readCount);

  get readCount => _readCount;

  set readCount(value) {
    _readCount = value;
  }

  get des => _des;

  set des(value) {
    _des = value;
  }

  get subTitle => _subTitle;

  set subTitle(value) {
    _subTitle = value;
  }

  get mainTitle => _mainTitle;

  set mainTitle(value) {
    _mainTitle = value;
  }

  get icon => _icon;

  set icon(value) {
    _icon = value;
  }

  get color => _color;

  set color(value) {
    _color = value;
  }


}複製程式碼

2,建立列表子項元件

class Item extends StatelessWidget {
  var color;
  var icon;
  var mainTitle;
  var subTitle;
  var des;
  var readCount;

  Item(this.color, this.icon, this.mainTitle, this.subTitle, this.des,
      this.readCount);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
      height: 90.0,
      child: Row(
        children: <Widget>[
          Container(
            width: 90.0,
            color: color,
            alignment: Alignment.center,
            child: Icon(icon, color: Colors.white),
          ),
          SizedBox(width: 10),
          Expanded(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Expanded(
                  child: Text(mainTitle,
                      style: TextStyle(
                          fontWeight: FontWeight.bold, fontSize: 18.0))),
              Expanded(child: Text(subTitle, style: TextStyle(fontSize: 14.0))),
              Expanded(
                  child: Text(
                des,
                style: TextStyle(fontSize: 13.0),
                overflow: TextOverflow.ellipsis,
              )),
              Expanded(
                  child: Text("閱讀量:${readCount.toString()}",
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 14.0,
                          color: Colors.redAccent))),
            ],
          ))
        ],
      ),
    );
  }
}
複製程式碼

3,建立列表資料類

class ListData{
 static List<Widget> getList(){
    List<Widget> models=[];
    ItemModel model1= ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "俄軍大秀戰略",
        "醞釀已久的俄羅斯“中部-2019”戰略演習於16日正式啟動", 2999);
    ItemModel model2= ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "俄“中部”演習",
        "俄羅斯衛星網報導稱,俄羅斯國防部長紹伊古表示,“中央-2019”戰略演習是", 4588);
    ItemModel model3= ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "中國2.7萬噸塢登艦",
        "據印度新德里電視臺16日報導,印度海軍發現7艘中國軍艦在印度洋", 7777);
    ItemModel model4=  ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "針對中國?",
        "美國空軍著力打造軍用5G網路,5G+VR,飛行員無需上天就能操控戰機;美軍瀕海", 8888);
    ItemModel model5=  ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "“凱旋”防空導彈系統",
        "俄羅斯衛星通訊社報導,俄羅斯北方艦隊(Russian Northern Fleet)新聞處", 9999);
    ItemModel model6=  ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "火箭軍還有騎兵連",
        "迅速對禁區“敵特分子”活動區域進行偵察定位,戰鬥小分隊", 104754);
    ItemModel model7= ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "偵察兵跨越冰川",
        "在海拔5000多米的雪域高原,第77集團軍某合成旅的偵察兵們正在進行野外駐訓", 47545);
    ItemModel model8=  ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "香港被護商船",
        "新京報快訊 據北海艦隊官微訊息:“感謝海軍!”“祖國萬歲!”,當地時", 124574);

    models.add(Item(model1.color, model1.icon, model1.mainTitle, model1.subTitle, model1.des, model1.readCount));
    models.add(Item(model2.color, model2.icon, model2.mainTitle, model2.subTitle, model2.des, model2.readCount));
    models.add(Item(model3.color, model3.icon, model3.mainTitle, model3.subTitle, model3.des, model3.readCount));
    models.add(Item(model4.color, model4.icon, model4.mainTitle, model4.subTitle, model4.des, model4.readCount));
    models.add(Item(model5.color, model5.icon, model5.mainTitle, model5.subTitle, model5.des, model5.readCount));
    models.add(Item(model6.color, model6.icon, model6.mainTitle, model6.subTitle, model6.des, model6.readCount));
    models.add(Item(model7.color, model7.icon, model7.mainTitle, model7.subTitle, model7.des, model7.readCount));
    models.add(Item(model8.color, model8.icon, model8.mainTitle, model8.subTitle, model8.des, model8.readCount));
    return models;
  }
}複製程式碼

二:分類演示

1,ListView 建立列表

class Listview_1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        padding: EdgeInsets.all(10.0),
        children: <Widget>[
         ListData.getList()[0],
         ListData.getList()[1],
         ListData.getList()[2],
         ListData.getList()[3],
         ListData.getList()[4],
         ListData.getList()[5],
         ListData.getList()[6],
         ListData.getList()[7],
        ],
      ),
    );
  }
}複製程式碼

效果圖:

Flutter——ListView的建立方式


2,ListView.builder 建立列表

class Listview_2 extends StatelessWidget {

  Widget _itemBuilder(BuildContext context, int position) {

        return ListData.getList()[position];

  }


  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10.0),
      child: ListView.builder(itemBuilder: (context, position) {
        return _itemBuilder(context, position);
      },itemCount: ListData.getList().length,),
    );
  }
}複製程式碼

效果圖: 

Flutter——ListView的建立方式

3, ListView.separated 建立列表

class Listview_3 extends StatelessWidget{
  Widget _itemBuilder(BuildContext context, int position) {

    return ListData.getList()[position];

  }
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10.0),
      child: ListView.separated(
        itemBuilder: (context, position) {
        return _itemBuilder(context, position);
      },
      itemCount: ListData.getList().length,
      separatorBuilder: (context,position){
          return Container(height: 1.0,color: Colors.grey);
      },
      ),
    );
  }

}複製程式碼

效果圖: 帶分割線

Flutter——ListView的建立方式

4,ListWheelScrollView 建立列表

class ListWhellScrollView extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return Container(
      child: ListWheelScrollView(
          physics: ClampingScrollPhysics(),
          itemExtent: 90,
          children: ListData.getList()
      ),
    );
  }

}複製程式碼


效果圖: 輪軸滾動效果

Flutter——ListView的建立方式



三:完整程式碼示例

import 'package:flutter/material.dart';

///create time : 2019/9/18/018  8:56
///create by : Administrator
///des:ListView示例

class MyListview extends StatefulWidget {
  @override
  _MyListviewState createState() => _MyListviewState();
}

class _MyListviewState extends State<MyListview> {
  @override
  Widget build(BuildContext context) {
    return ListWhellScrollView();
  }
}

//ListView方式建立列表
class Listview_1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        padding: EdgeInsets.all(10.0),
        children: <Widget>[
         ListData.getList()[0],
         ListData.getList()[1],
         ListData.getList()[2],
         ListData.getList()[3],
         ListData.getList()[4],
         ListData.getList()[5],
         ListData.getList()[6],
         ListData.getList()[7],
        ],
      ),
    );
  }
}


//ListView.builder方式建立列表
class Listview_2 extends StatelessWidget {

  Widget _itemBuilder(BuildContext context, int position) {

        return ListData.getList()[position];

  }


  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10.0),
      child: ListView.builder(itemBuilder: (context, position) {
        return _itemBuilder(context, position);
      },itemCount: ListData.getList().length,),
    );
  }
}

//ListView.separated 方式建立,給子項之間新增分割線,分割元件可自定義
class Listview_3 extends StatelessWidget{
  Widget _itemBuilder(BuildContext context, int position) {

    return ListData.getList()[position];

  }
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10.0),
      child: ListView.separated(
        itemBuilder: (context, position) {
        return _itemBuilder(context, position);
      },
      itemCount: ListData.getList().length,
      separatorBuilder: (context,position){
          return Container(height: 1.0,color: Colors.grey);
      },
      ),
    );
  }

}


//實現輪軸效果列表
class ListWhellScrollView extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return Container(
      child: ListWheelScrollView(
          physics: ClampingScrollPhysics(),
          itemExtent: 90,
          children: ListData.getList()
      ),
    );
  }

}


class ItemModel{
  var _color;
  var _icon;
  var _mainTitle;
  var _subTitle;
  var _des;
  var _readCount;

  ItemModel(this._color, this._icon, this._mainTitle, this._subTitle, this._des,
      this._readCount);

  get readCount => _readCount;

  set readCount(value) {
    _readCount = value;
  }

  get des => _des;

  set des(value) {
    _des = value;
  }

  get subTitle => _subTitle;

  set subTitle(value) {
    _subTitle = value;
  }

  get mainTitle => _mainTitle;

  set mainTitle(value) {
    _mainTitle = value;
  }

  get icon => _icon;

  set icon(value) {
    _icon = value;
  }

  get color => _color;

  set color(value) {
    _color = value;
  }


}
class ListData{
  static List<Widget> getList(){
    List<Widget> models=[];
    ItemModel model1= ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "俄軍大秀戰略",
        "醞釀已久的俄羅斯“中部-2019”戰略演習於16日正式啟動", 2999);
    ItemModel model2= ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "俄“中部”演習",
        "俄羅斯衛星網報導稱,俄羅斯國防部長紹伊古表示,“中央-2019”戰略演習是", 4588);
    ItemModel model3= ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "中國2.7萬噸塢登艦",
        "據印度新德里電視臺16日報導,印度海軍發現7艘中國軍艦在印度洋", 7777);
    ItemModel model4=  ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "針對中國?",
        "美國空軍著力打造軍用5G網路,5G+VR,飛行員無需上天就能操控戰機;美軍瀕海", 8888);
    ItemModel model5=  ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "“凱旋”防空導彈系統",
        "俄羅斯衛星通訊社報導,俄羅斯北方艦隊(Russian Northern Fleet)新聞處", 9999);
    ItemModel model6=  ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "火箭軍還有騎兵連",
        "迅速對禁區“敵特分子”活動區域進行偵察定位,戰鬥小分隊", 104754);
    ItemModel model7= ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "偵察兵跨越冰川",
        "在海拔5000多米的雪域高原,第77集團軍某合成旅的偵察兵們正在進行野外駐訓", 47545);
    ItemModel model8=  ItemModel(Colors.red, Icons.airplanemode_active, "軍事新聞", "香港被護商船",
        "新京報快訊 據北海艦隊官微訊息:“感謝海軍!”“祖國萬歲!”,當地時", 124574);

    models.add(Item(model1.color, model1.icon, model1.mainTitle, model1.subTitle, model1.des, model1.readCount));
    models.add(Item(model2.color, model2.icon, model2.mainTitle, model2.subTitle, model2.des, model2.readCount));
    models.add(Item(model3.color, model3.icon, model3.mainTitle, model3.subTitle, model3.des, model3.readCount));
    models.add(Item(model4.color, model4.icon, model4.mainTitle, model4.subTitle, model4.des, model4.readCount));
    models.add(Item(model5.color, model5.icon, model5.mainTitle, model5.subTitle, model5.des, model5.readCount));
    models.add(Item(model6.color, model6.icon, model6.mainTitle, model6.subTitle, model6.des, model6.readCount));
    models.add(Item(model7.color, model7.icon, model7.mainTitle, model7.subTitle, model7.des, model7.readCount));
    models.add(Item(model8.color, model8.icon, model8.mainTitle, model8.subTitle, model8.des, model8.readCount));
    return models;
  }
}

class Item extends StatelessWidget {
  var color;
  var icon;
  var mainTitle;
  var subTitle;
  var des;
  var readCount;

  Item(this.color, this.icon, this.mainTitle, this.subTitle, this.des,
      this.readCount);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
      height: 90.0,
      child: Row(
        children: <Widget>[
          Container(
            width: 90.0,
            color: color,
            alignment: Alignment.center,
            child: Icon(icon, color: Colors.white),
          ),
          SizedBox(width: 10),
          Expanded(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Expanded(
                  child: Text(mainTitle,
                      style: TextStyle(
                          fontWeight: FontWeight.bold, fontSize: 18.0))),
              Expanded(child: Text(subTitle, style: TextStyle(fontSize: 14.0))),
              Expanded(
                  child: Text(
                des,
                style: TextStyle(fontSize: 13.0),
                overflow: TextOverflow.ellipsis,
              )),
              Expanded(
                  child: Text("閱讀量:${readCount.toString()}",
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 14.0,
                          color: Colors.redAccent))),
            ],
          ))
        ],
      ),
    );
  }
}複製程式碼


四:其他

     列表使用先說到這,至於列表的各種建立方式對應的屬性後續深究再慢慢補上。另外示例有錯誤的地方希望各位指正,不勝感激。


相關文章