本文已參與好文召集令活動，點選檢視：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！
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'),
),
]);
}
}
複製程式碼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官網上查到安裝及使用步驟，這裡我就不累述太多'),
),
]);
}
}
複製程式碼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官網上查到安裝及使用步驟，這裡我就不累述太多'),
),
]);
}
}
複製程式碼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),
)
]);
}
}
複製程式碼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),
),
]
)
);
}
}
複製程式碼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());
}
}
複製程式碼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());
}
}
複製程式碼