Flutter-最簡單的 ListView 使用範例

背景知識

有使用到 Center 、 Container 、 Column 、 可參考Flutter-最簡單的 Center 使用範例 、Flutter-最簡單的 Container 使用範例、Flutter-最簡單的 Column 使用範例 、 Flutter-最簡單的 Column 使用範例

官方說明頁面

本文 source code

介紹內容

ListView 是製作 APP 最常用的基礎物件之一，相對於 iOS 原生 TableView 或 Android 的 ListView 來說 Flutter 的 ListView 算是相當好上手的物件 ，下面我們來進行簡單的範例，最終呈現畫面如下

開始

List<String> names = [
      "葡萄",
      "蘋果",
      "梨",
      "桃",
      "李子",
      "杏",
      "草莓",
      "柿子",
      "山楂",
      "紅棗",
      "櫻桃"
    ];
    return ListView.builder(
        itemCount: names.length,
        itemBuilder: (BuildContext context, int position) {
          var name = names[position];
          return Center(
            child: Text(
              name,
              style:
                  TextStyle(color: Colors.black, decoration: TextDecoration.none),
            ),
          );
        });
  }

加入背景顏色變化

List<String> names = [
      "葡萄",
      "蘋果",
      "梨",
      "桃",
      "李子",
      "杏",
      "草莓",
      "柿子",
      "山楂",
      "紅棗",
      "櫻桃"
    ];
    List<int> colorCodes = <int>[600, 500, 100];
    return ListView.builder(
        itemCount: names.length,
        itemBuilder: (BuildContext context, int position) {
          var name = names[position];
          return Container(
            height: 100,
            color: Colors.amber[colorCodes[position % colorCodes.length]],
            child: Center(
              child: Text(
                name,
                style: TextStyle(
                    color: Colors.black, decoration: TextDecoration.none),
              ),
            ),
          );
        });

加入分類器（Divider) ，將 item 之間做間隔， 首先在 Container 之前加入 Column

 List<String> names = [
      "葡萄",
      "蘋果",
      "梨",
      "桃",
      "李子",
      "杏",
      "草莓",
      "柿子",
      "山楂",
      "紅棗",
      "櫻桃"
    ];
    List<int> colorCodes = <int>[600, 500, 100];
    return ListView.builder(
        itemCount: names.length,
        
        itemBuilder: (BuildContext context, int position) {
          var name = names[position];
          return Column(
            children: [
              Container(
                height: 100,
                color: Colors.amber[colorCodes[position % colorCodes.length]],
                child: Center(
                  child: Text(
                    name,
                    style: TextStyle(
                        color: Colors.black, decoration: TextDecoration.none),
                  ),
                ),
              ),
            ],
          );
        });

畫面上看起來沒有改變，但現在我們可以利用 Column 在字的下方放入想要的物件，這時加入 Divider 來看看效果

List<String> names = [
      "葡萄",
      "蘋果",
      "梨",
      "桃",
      "李子",
      "杏",
      "草莓",
      "柿子",
      "山楂",
      "紅棗",
      "櫻桃"
    ];
    List<int> colorCodes = <int>[600, 500, 100];
    return ListView.builder(
        itemCount: names.length,
        
        itemBuilder: (BuildContext context, int position) {
          var name = names[position];
          return Column(
            children: [
              Container(
                height: 100,
                color: Colors.amber[colorCodes[position % colorCodes.length]],
                child: Center(
                  child: Text(
                    name,
                    style: TextStyle(
                        color: Colors.black, decoration: TextDecoration.none),
                  ),
                ),
              ),
              Divider()
            ],
          );
        });

常見的 listview 前方通常會搭配，圖片進行顯示， 先使用 Raw 再搭配 Cord 佔位

List<String> names = [
      "葡萄",
      "蘋果",
      "梨",
      "桃",
      "李子",
      "杏",
      "草莓",
      "柿子",
      "山楂",
      "紅棗",
      "櫻桃"
    ];
    List<int> colorCodes = <int>[600, 500, 100];
    return ListView.builder(
        itemCount: names.length,
        itemBuilder: (BuildContext context, int position) {
          var name = names[position];
          return Column(
            children: [
              Container(
                height: 100,
                color: Colors.amber[colorCodes[position % colorCodes.length]],
                child: Row(
                  children: [
                    Container(
                        height: 80,
                        width: 80,
                        child: Card(
                          color: Colors.red,
                        )),
                    Text(
                      name,
                      style: TextStyle(
                          color: Colors.black,
                          decoration: TextDecoration.none),
                    ),
                  ],
                ),
              ),
              Divider()
            ],
          );
        });

加入圖片

專案底下加入一個image資料夾

放入圖片

打開 pubspec.yaml

找到 assets 並取消註解與加入 image

在 Card 中加入 Image.asset(“image/山楂.jpg”) 測試圖片效果

List<String> names = [
      "葡萄",
      "蘋果",
      "梨",
      "桃",
      "李子",
      "杏",
      "草莓",
      "柿子",
      "山楂",
      "紅棗",
      "櫻桃"
    ];
    List<int> colorCodes = <int>[600, 500, 100];
    return ListView.builder(
        itemCount: names.length,
        itemBuilder: (BuildContext context, int position) {
          var name = names[position];
          return Column(
            children: [
              Container(
                height: 100,
                color: Colors.amber[colorCodes[position % colorCodes.length]],
                child: Row(
                  children: [
                    Container(
                        height: 80,
                        width: 80,
                        child: Card(
                          color: Colors.red,
                          child: Image.asset("image/山楂.jpg"),
                        )),
                    Text(
                      name,
                      style: TextStyle(
                          color: Colors.black,
                          decoration: TextDecoration.none),
                    ),
                  ],
                ),
              ),
              Divider()
            ],
          );
        });

因為圖片比例不是1:1，調整圖片填充方式 fit: BoxFit.cover,

List<String> names = [
      "葡萄",
      "蘋果",
      "梨",
      "桃",
      "李子",
      "杏",
      "草莓",
      "柿子",
      "山楂",
      "紅棗",
      "櫻桃"
    ];
    List<int> colorCodes = <int>[600, 500, 100];
    return ListView.builder(
        itemCount: names.length,
        itemBuilder: (BuildContext context, int position) {
          var name = names[position];
          return Column(
            children: [
              Container(
                height: 100,
                color: Colors.amber[colorCodes[position % colorCodes.length]],
                child: Row(
                  children: [
                    Container(
                        height: 80,
                        width: 80,
                        child: Card(
                          color: Colors.red,
                          child: Image.asset(
                            "image/山楂.jpg",
                            fit: BoxFit.cover,
                          ),
                        )),
                    Text(
                      name,
                      style: TextStyle(
                          color: Colors.black, decoration: TextDecoration.none),
                    ),
                  ],
                ),
              ),
              Divider()
            ],
          );
        });

按照項目顯示圖片