Flutter 常用元件-5 清單控件

清單是最常見的需求。在Flutter中，用ListView來顯示清單項，支援垂直和水準方向展示，通過一個屬性我們就可以控制其方向，清單有以下幾類：

• 水準的清單
• 垂直的清單
• 資料量非常大的清單
• 矩陣式的清單

1 基礎清單元件

基礎清單元件為ListView元件。

常用屬性

屬性名	類型	預設值	說明
scrollDirection	Axix	Axis.vertical	清單的排列方向，Axis.vertical為垂直方向，是預設值，Axis.horizontal為水準方向
padding	EdgInsetsGeometry	-	清單内部的空白區域，如果有child，child位于padding内部
reverse	bool	false	元件排列方向
children	List<Widget>	-	清單元素，注意List元素全部為Widget類型

2 水準清單元件

水準清單元件即為水準方向排列的元件，清單内部元素以水準方向排列。把ListView元件的scrollDirection屬性設定為Axis.horizontal即可。

3 長清單元件

當清單的資料項非常多時，需要使用長清單，比如淘寶背景訂單清單、手機通訊錄等，這些清單項資料很多。長清單也是使用ListView作為基礎元件，隻不過需要添加一個清單項構造器itemBuilder。

4 示例

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('ListView示例'),
        ),
        body:
            //右鍵-refactor-extract-method/widget

//        new NormalListView(),
//            new HorizontalListView(),
            ListView.builder(
                itemCount: 100,
                itemBuilder: (context, index) {
                  print('$index');
                  if(index.isOdd){
                    return Divider();
                  }
                  return ListTile(
                    leading: Icon(Icons.favorite_border),
                    title: Text('$index号程式員'),
                    subtitle: Text('棒棒的！'),
                    trailing: Icon(Icons.arrow_forward_ios),
                  );
                }),
      ),
    );
  }
}

class HorizontalListView extends StatelessWidget {
  const HorizontalListView({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      //一次性加載所有item
      children: List.generate(100, (index) {
        return Text(
          '$index',
          style: TextStyle(fontSize: 20.0),
        );
      }),
    );
  }
}

class NormalListView extends StatelessWidget {
  const NormalListView({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.favorite_border),
          title: Text('favorite_border'),
          subtitle: Text('favorite_border'),
          trailing: Icon(Icons.arrow_forward_ios),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.favorite_border),
          title: Text('favorite_border'),
          subtitle: Text('favorite_border'),
          trailing: Icon(Icons.arrow_forward_ios),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.favorite_border),
          title: Text('favorite_border'),
          subtitle: Text('favorite_border'),
          trailing: Icon(Icons.arrow_forward_ios),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.favorite_border),
          title: Text('favorite_border'),
          subtitle: Text('favorite_border'),
          trailing: Icon(Icons.arrow_forward_ios),
        ),
      ],
    );
  }
}

           

顯示效果：