Flutter实现图文并茂的列表

Z时代
2024-01-10
分类：IT

界面布局分析

本篇要实现的列表如上图所示。我们拿到界面设计稿之后，在 UI 开发工作第一件事就是考虑界面的元素和布局。以上面的界面为例，实际的界面元素包括了列表和列表元素，而列表元素是关键，列表元素包括了左边的一张图片，图片右侧的标题和查看次数（带前置图标）。列表的元素的布局如下图所示。

纵向上，列表元素的布局高度由图片决定。图标和浏览数的高度固定，剩余的空间由标题占据。考虑界面的美观，标题最大行数为2行，超出部分使用...替代。横向上，为保持图片的固定长宽比，图片宽度固定。宽度在图片固定后，剩余的空间（除了间距留白外）即标题的空间。基于上述的描述，可以得到大致的布局：

整个列表元素使用一个 Container 包裹，以便设置四周的外边距；

横向上，使用 Row 组件完成横向布局。

右侧区域使用 Column 组件完成纵向布局。

右侧的浏览数的图标和文字也需要使用 Row 完成横向布局。

为保持左侧图片和右侧区域的间距，右侧统一使用 Container 在外面包裹，以便控制间距。

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),
    );
  }
}