Flutter常用元件(Widget)解析-ListView
阿新 • • 發佈:2018-11-21
一個可滾動的列表元件
不管在哪,列表元件都尤為重要和常用。
首先來看個例子:
import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title:'zengfp Flutter Demo', home:Scaffold( appBar:new AppBar( title:new Text('ListView Widget') ), body: ListView.builder( padding: EdgeInsets.all(8.0), itemExtent: 20.0, itemBuilder: (BuildContext context, int index) { return Text('entry $index'); }, ) ), ); } }
當用戶滾動列表時,ListView中的資料將會無限增長。ListView類提供了一個builder屬性,itemBuilder值是一個匿名回撥函式, 接受兩個引數- BuildContext和行迭代器i
。迭代器從0開始, 每呼叫一次該函式,i
就會自增1,對於每個建議的單詞對都會執行一次。該模型允許建議的單詞對列表在使用者滾動時無限增長。itemExtent是個double型,確定滾動區域中列表的資料長度。如果itemExtent確定,則會讓列表的渲染更為迅速和有效,讓效能體驗更好。
上面是個動態的列表,接下來看看固定列表:
body: ListView( padding: EdgeInsets.all(20.0), children: <Widget>[ new Center( child: Text('first line'), ), new Center( child: Text('second line'), ), new Center( child: Text('third line'), ), new Center( child: Text('fourth line'), ) ], )
上面則讓固定的四行文字居中顯示。
如果要水平方向的滾動,則需要使用到scrollDirection這個屬性了,比如:
body: Center( child: Container( height: 200.0, child: ListView( scrollDirection: Axis.horizontal, padding: EdgeInsets.all(20.0), children: <Widget>[ new Container( width: 200.0, color: Colors.red, ), new Container( width: 200.0, color: Colors.green, ), new Container( width: 200.0, color: Colors.yellow, ), new Container( width: 200.0, color: Colors.black, ) ], ), ), )
效果則是:
還有個reverse屬性,則是將列表的順序顛倒。