列表在 App 中是最常见的形式了,在 Flutter 中提供了 ListView 这个组件来实现列表,本篇将通过 ListView 实现一个图文并茂的列表。
界面布局分析
本篇要实现的列表如上图所示。我们拿到界面设计稿之后,在 UI 开发工作第一件事就是考虑界面的元素和布局。以上面的界面为例,实际的界面元素包括了列表和列表元素,而列表元素是关键,列表元素包括了左边的一张图片,图片右侧的标题和查看次数(带前置图标)。列表的元素的布局如下图所示。
纵向上,列表元素的布局高度由图片决定。图标和浏览数的高度固定,剩余的空间由标题占据。考虑界面的美观,标题最大行数为2行,超出部分使用…替代。
横向上,为保持图片的固定长宽比,图片宽度固定。宽度在图片固定后,剩余的空间(除了间距留白外)即标题的空间。
基于上述的描述,可以得到大致的布局:
- 整个列表元素使用一个 Container 包裹,以便设置四周的外边距;
- 横向上,使用 Row 组件完成横向布局。
- 右侧区域使用 Column 组件完成纵向布局。
- 右侧的浏览数的图标和文字也需要使用 Row 完成横向布局。
- 为保持左侧图片和右侧区