1. 程式人生 > >Flutter常用元件(Widget)解析-ListView

Flutter常用元件(Widget)解析-ListView

一個可滾動的列表元件

不管在哪,列表元件都尤為重要和常用。

首先來看個例子:

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屬性,則是將列表的順序顛倒。