使用Flutter怎么實現一個圖文并茂的列表

今天就跟大家聊聊有關使用Flutter怎么實現一個圖文并茂的列表，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

ListView 簡介

ListView 用于生成列表，，通常使用 builder靜態方法構建一個列表，其中關鍵的參數為：

• itemCount：列表元素的數量。

• itemBuilder：列表元素構建函數，通過指定元素的下標返回對應的列表元素組件。

如果要使用分隔組件的列表，也可以使用 ListView.seperate 方法構建列表，這個方法多了一個 seperateBuilder 參數，用于返回列表元素間對應的分隔組件。

因此，列表的關鍵是列表元素組件的實現。

編碼實現

我們還是基于上一個工程，在 dynamic.dart 中實現列表。在源代碼目錄新增兩個文件，分別是 dynamic_item.dart 用于構建列表元素，dynamic_mock_data .dart用于模擬后臺接口數據。其中 dynamic_mock_data 的數據比較簡單，用一個list 靜態方法返回分頁數據，如下所示：

class DynamicMockData {
  static List<Map<String, Object>> list(int page, int size) {
    return List<Map<String, Object>>.generate(size, (index) {
      return {
        'title': '標題${index + (page - 1) * size + 1}：這是一個列表標題，最多兩行，多處部分將會被截取',
        'imageUrl':
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3331308357,177638268&fm=26&gp=0.jpg',
        'viewCount': 180,
      };
    });
  }
}

其中 page 和 size 用于模擬分頁情況，方便后續實現上拉和下拉刷新。 注意這里使用了 List 的 generate 方法來構建數組，該方法用于構建指定大小的數組， 可以通過帶index輸入的回調函數構建對飲 index 下標的數組元素。

dynamic_item.dart的實現代碼如下所示：

import 'package:flutter/material.dart';

class DynamicItem extends StatelessWidget {
  final String title;
  final String imageUrl;
  final int viewCount;
  static const double ITEM_HEIGHT = 100;
  static const double TITLE_HEIGHT = 80;
  static const double MARGIN_SIZE = 10;
  const DynamicItem(this.title, this.imageUrl, this.viewCount, {Key key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(MARGIN_SIZE),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _imageWrapper(this.imageUrl),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _titleWrapper(context, this.title),
                _viewCountWrapper(this.viewCount.toString()),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _titleWrapper(BuildContext context, String text) {
    return Container(
      height: TITLE_HEIGHT,
      margin: EdgeInsets.fromLTRB(MARGIN_SIZE, 0, 0, 0),
      child: Text(
        this.title,
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
        style: Theme.of(context).textTheme.headline6,
      ),
    );
  }

  Widget _viewCountWrapper(String text) {
    return Container(
      margin: EdgeInsets.fromLTRB(MARGIN_SIZE, 0, 0, 0),
      height: ITEM_HEIGHT - TITLE_HEIGHT,
      child: Row(children: [
        Icon(
          Icons.remove_red_eye_outlined,
          size: 14.0,
          color: Colors.grey,
        ),
        SizedBox(width: 5),
        Text(
          this.viewCount.toString(),
          style: TextStyle(color: Colors.grey, fontSize: 14.0),
        ),
      ]),
    );
  }

  Widget _imageWrapper(String imageUrl) {
    return SizedBox(
      width: 150,
      height: ITEM_HEIGHT,
      child: Image.network(imageUrl),
    );
  }
}

首先定義了title、imageUrl和 viewCount 幾個final 類型的成員屬性，使用 final 的約束是方便外部其他類可以直接訪問，但不可以做修改。如果這些屬性本身外部不可訪問，也可以定義為私有成員。

其次是使用構造函數直接完成成員屬性的初始化，這是 Dart 語言的一種簡寫方法，只要傳參次序一致就可以不需要函數體自動完成成員的初始化，通常會用在 final 修飾的成員屬性。

在 build 方法中完成了整個界面的構建。其中注意這里使用了 Expanded 包裹右側區域，Expanded組件是表示橫向布局中，該組件將自動占據剩余的空間。如果沒有這個包裹，會導致右側內容過寬時無法顯示完全而報警。

圖片、標題和瀏覽數均通過單獨的構建組件方法獲取，這一方面是降低UI嵌套層級，另一方面如果日后有同樣的組件，則可以抽離單獨的構建方法提高復用性。下面對關鍵的幾個設置進行解讀：

• crossAxisAlignment: CrossAxisAlignment.start：這個用于標記Row行布局組件的元素在列方向上從起始位置開始對齊（即縱向上右側和圖片上沿對齊）。

• Container 的 margin：用于設置距離上下左右的間距，如果四個方向間距一致，就可以使用 EdgeInsets.all 方法設置。如果不一致就是要 EdgeInsets.fromLTRB 單獨設置四個方向的間距。

• 在瀏覽數組件中使用了一個 SizedBox 組件，這個組件本身沒什么內容，僅僅是為了將圖標和瀏覽數字之間拉開一定的間距，提高美觀度。

用到的組件

除了 ListView 之外，本篇涉及到的組件如下：

• Text：文本組件，相當于是 label。除了文字內容外，可以使用 style 設置文字樣式。這里標題使用了 maxLines 約束標題最大2行，使用了 overflow 設置了文字溢出后處理方式。

• Image：圖片組件，這里使用了 Image.network 從網絡加載圖片，這個 Image.network 是很初級的用法，后續會使用 cached_image_network 插件替換。

• Icon：圖標組件，在 Flutter 中內置了很多字體圖標，對于大部分場景都能夠滿足，圖標可以使用 Icons 類定義的圖標名稱來找到想要的圖標。

• Row：行布局組件，其子組件 children 都是按先后順序從左到右在同一行依次排列。

• Column：列布局組件，其子組件 children 都是按從先后順序從上到下在同一列依次排列。

看完上述內容，你們對使用Flutter怎么實現一個圖文并茂的列表有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。