ListView概念
在A(yíng)ndroid開(kāi)發(fā)中请唱,顯示列表的控件也叫ListView或者是RecyclerView讯赏,在IOS開(kāi)發(fā)中叫TableView或者ScrollView义黎。應(yīng)該很好理解,用途一般用來(lái)顯示一個(gè)列表姐呐,比如新聞列表殿怜,商品列表等。
ListView簡(jiǎn)單使用
在A(yíng)ndroid里面曙砂,ListView需要有一個(gè)適配器Adapter去管理列表里面的每一行數(shù)據(jù)的顯示和事件头谜,但是在Flutter中,ListView是一個(gè)狀態(tài)不可變的Widget鸠澈,并且他的功能只是提供滾動(dòng)柱告,所以L(fǎng)istView本質(zhì)工作是去滾動(dòng)一系列的Widget。
我們先來(lái)看一個(gè)簡(jiǎn)單的例子
class _onePageState extends State<onePage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("ListView"),
),
body: new ListView(
children: [
new ListTile(
title: new Text("基礎(chǔ)組件"),
),
new ListTile(
title: new Text("Material Components"),
)
,
new ListTile(
title: new Text("Cupertino(iOS風(fēng)格的widget)"),
)
],
));
}
}
看一下效果圖
我們來(lái)分析一下代碼笑陈,Scaffold 的 body 屬性里面新建一個(gè)ListView际度,然后ListView的children屬性接收的是一個(gè)數(shù)組,然后我們看來(lái)一個(gè)這個(gè)數(shù)組是怎么回事
點(diǎn)開(kāi)LisView的源碼涵妥,其實(shí)就一目了然了
源碼里面可以看到children其實(shí)需要傳遞的對(duì)象就是一個(gè)Widget的數(shù)組甲脏,最開(kāi)始的時(shí)候我們說(shuō)過(guò),在Flutter里面妹笆,一切皆Widget块请,那這樣就是說(shuō)我們的ListView其實(shí)是可以顯示任何的Flutter Widget的(表示懷疑)。
首先我們先把代碼簡(jiǎn)單的改一下拳缠,只貼核心部分
body: new ListView(
children: [
new ListTile(
title: new Text("基礎(chǔ)組件"),
),
new ListTile(
title: new Text("Material Components"),
),
new ListTile(
title: new Text("Cupertino(iOS風(fēng)格的widget)"),
),
new Text("我是Text"),
new Icon(Icons.phone),
new RaisedButton(onPressed: null,
child: new Text("按鈕"),),
],
));
簡(jiǎn)單的驗(yàn)證了一下我們的觀(guān)點(diǎn)墩新,但是這樣寫(xiě)肯定是不符合實(shí)際的,一般情況列表的數(shù)據(jù)和樣式都是變化的窟坐,所以我們?cè)賮?lái)改造一下我們的代碼
class _onePageState extends State<onePage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("ListView"),
),
body: new ListView(
children: _getListData(),
));
}
_getListData() {
List<Widget> widgets = [];
for (int i = 0; i < 10; i++) {
widgets.add(new Padding(
padding: new EdgeInsets.all(10.0), child: new Text("item $i")));
}
return widgets;
}
}
寫(xiě)一個(gè)函數(shù)海渊,這個(gè)函數(shù)返回一個(gè)Widget數(shù)組,然后在children屬性后面調(diào)用這個(gè)函數(shù)就可以了哲鸳。
ListView的基本使用基本就是這些了臣疑,其實(shí)理解之后就覺(jué)得非常簡(jiǎn)單了,ListView負(fù)責(zé)去滾動(dòng)一個(gè)數(shù)組的Widget徙菠,我們只需要給他傳遞一個(gè)Widget數(shù)組就可以了讯沈。后面將繼續(xù)深入學(xué)習(xí),學(xué)習(xí)ListView的事件處理婿奔,列表的數(shù)據(jù)刷新等知識(shí)缺狠。