Flutter ListView 列表組件

列表常見的情況:
1、垂直列表

2、垂直圖文列表

3、橫向列表

4、動態列表

 

名稱	類型	說明
scrollDirection	Axis	Axis.horizontal 橫向列表 Axis.vertical 垂直列表(默認垂直列表)
padding	EdgeInsetsGeometry	內邊距
resolve	bool	組件反向排序
children	List<Widget>	列表元素

Flutter 基本列表

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("flutter demo")), body: HomeContent()));
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ListView(
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              "this is title",
              style: TextStyle(fontSize: 28.0),
            ),
            subtitle: Text('this is subtitle '),
          ),
          ListTile(
            title: Text("this is title"),
            subtitle: Text('this is subtitle '),
            trailing: Icon(Icons.phone),
          ),
          ListTile(
            title: Text("this is title"),
            subtitle: Text('this is subtitle '),
          ),
          ListTile(
            title: Text("this is title"),
            subtitle: Text('this is subtitle'),
          ),
          ListTile(
            title: Text("this is title"),
            subtitle: Text('this is subtitle'),
          )
        ],
      ),
    );
  }
}

 

圖表列表

body: new ListView(
  children:<Widget>[
   new Image.network(
      'http://127.0.0.1:8080/imgs/a.jpg'
    )
     new Image.network(
       'http://127.0.0.1:8080/imgs/b.jpg'
    )
     new Image.network(
       'http://127.0.0.1:8080/imgs/c.jpg'
    ),new Image.network(
     'http://127.0.0.1:8080/imgs/d.jpg'
    )
    
  ]
),

橫向列表

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("flutter demo")), body: HomeContent()));
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 200.0,
        margin: EdgeInsets.all(5),
        child: ListView(
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            Container(
              width: 180.0,
              color: Colors.lightBlue,
            ),
            Container(
              width: 180.0,
              color: Colors.amber,
              child: ListView(
                children: <Widget>[
                  Image.network(
                      'http://127.0.0.1:8080/images/ca.jpg'),
                  SizedBox(height: 16.0),
                  Text(
                    '這是一個文本信息',
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 16.0),
                  )
                ],
              ),
            ),
            Container(
              width: 180.0,
              color: Colors.deepOrange,
            ),
            Container(
              width: 180.0,
              color: Colors.deepPurpleAccent,
            ),
          ],
        ));
  }
}

動態列表的使用

List類型的使用

List是Dart的集合類型之一,其實你可以把它簡單理解為數組（反正我是這么認為的），其他語言也都有這個類型。它的聲明有幾種方式：

• var myList = List(): 非固定長度的聲明。
• var myList = List(2): 固定長度的聲明。
• var myList= List<String>():固定類型的聲明方式。
• var myList = [1,2,3]: 對List直接賦值。

那我們這里使用的是一個List傳遞，然后直接用List中的generate方法進行生產List里的元素。最后的結果是生產了一個帶值的List變量。代碼如下：

void main () => runApp(MyApp(
  items: new List<String>.generate(1000, (i)=> "Item $i")
));

說明:再main函數的runApp中調用了MyApp類，再使用類的使用傳遞了一個items參數,並使用generate生成器對items進行賦值。

generate方法傳遞兩個參數，第一個參數是生成的個數，第二個是方法。
#

接受參數

傳遞了參數，那MyApp類是需要接收的：

inal List<String> items;
 MyApp({Key key, @required this.items}):super(key:key);

構造函數，除了Key，增加了一個必傳參數，@required意思就必傳。:super如果父類沒有無名無參數的默認構造函數，則子類必須手動調用一個父類構造函數。

事先進行聲明，這樣我們就OK了。

import 'package:flutter/material.dart';
void main () => runApp(MyApp(
  items: new List<String>.generate(1000, (i)=> "Item $i")
));

class MyApp extends StatelessWidget{

  List<String> items;
  MyApp({Key key, @required this.items}):super(key:key);
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
        home:Scaffold(
          body:new ListView.builder(
            itemCount:items.length,
            itemBuilder:(context,index){
              return new ListTile(
                title:new Text('${items[index]}'),
              );
            }
          )
        ),
      );
  }
}