Flutter 实现图文并茂的列表

列表在 App 中是最常见的形式了，在 Flutter 中提供了 ListView 这个组件来实现列表，本篇将通过 ListView 实现一个图文并茂的列表。

界面布局分析

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

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

• 整个列表元素使用一个 Container 包裹，以便设置四周的外边距；
• 横向上，使用 Row 组件完成横向布局。
• 右侧区域使用 Column 组件完成纵向布局。
• 右侧的浏览数的图标和文字也需要使用 Row 完成横向布局。
• 为保持左侧图片和右侧区