前言
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],
],
),
);
}
}複製程式碼效果圖:
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,),
);
}
}複製程式碼效果圖:
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);
},
),
);
}
}複製程式碼效果圖: 帶分割線
4,ListWheelScrollView 建立列表
class ListWhellScrollView extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
child: ListWheelScrollView(
physics: ClampingScrollPhysics(),
itemExtent: 90,
children: ListData.getList()
),
);
}
}複製程式碼效果圖: 輪軸滾動效果
三:完整程式碼示例
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))),
],
))
],
),
);
}
}複製程式碼四:其他
列表使用先說到這，至於列表的各種建立方式對應的屬性後續深究再慢慢補上。另外示例有錯誤的地方希望各位指正，不勝感激。