列表（表格）

优质

小牛编辑

125浏览

2023-12-01

常在iOS应用中看到的列表，是种多功能且强大的交互组件。列表将数据展现在一个可滚动的多行的列表中，可以将数据划分成不同的片段/组（sections/groups）。

列表有以下用途：

让用户可以浏览结构化的多级数据
展现一个索引列表
在可视化的不同分组中，显示详细信息和控件
展现一个可以选择的列表

列表布局

现在让我们看一下常见的列表布局

列表区（List block）

列表区（List block）是你的列表元素的容器，基本和内容区(Content Block)一样，只不过面向列表元素。

首先, 所有的列表元素都要被包裹在含有“list-block”类的元素中：

<div class="list-block">
    <ul>
        ... list elements here ...
    </ul>
</div>

不要将带有list-block类的元素放置在“content-block”中!

列表区标签（List block label）

你可以将列表区标签（List block label）加在列表区（List block）的末尾：

<div class="list-block">
    <ul>
        ... list elements here ...
    </ul>
    <div class="list-block-label">List block label text</div>
</div>

列表项目（List item/element）

单个列表项目的布局相当复杂而灵活：

<li>
    <div class="item-content">
        <div class="item-media">
  <i class="icon my-icon"></i>
        </div>
        <div class="item-inner">
  <div class="item-title">
      List element title
  </div>
  <div class="item-after">
      List element label
  </div>
        </div>
    </div>
</li>

其中：

item-content - item-media和item-inner的主要弹性(flex)容器。必选元素。

item-media - 媒体元素（如图标，图片等）的容器。可选元素。
item-inner - item-title和item-after的主要弹性(flex)容器。必选元素。

item-title - 单行列表项目标题。必选元素。
item-after - 列表项目标签。可以包含任意额外的html元素（例如标签文本、徽章、switch/toggle、按钮等等）。可选元素。

因为.item-content元素的是display属性是flex-box, 需要注意，“item-media”和“item-inner”应该是“item-content”的直接子元素!
同样的，“item-title”和“item-after”应该是“item-inner”的直接子元素!

同时需要注意，如果你的列表项目不含其它元素, 你可以把“item-content”类直接加在<li>元素上：

<li class="item-content">
    <div class="item-media">
        <i class="icon my-icon"></i>
    </div>
    <div class="item-inner">
        <div class="item-title">
  List element title
        </div>
        <div class="item-after">
  List element label
        </div>
    </div>
</li>

示例

<body>
  ...
  <div class="page-content">
    <div class="content-block-title">Full Layout</div>
    <div class="list-block">
      <ul>
        <li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
  <div class="item-title">Item title</div>
  <div class="item-after">Label</div>
</div>
        </li>
        <li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
  <div class="item-title">Item with badge</div>
  <div class="item-after"><span class="badge">5</span></div>
</div>
        </li>
        <li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
  <div class="item-title">Another item</div>
  <div class="item-after">Another label</div>
</div>
        </li>
      </ul>
      <div class="list-block-label">List block label text goes here</div>
    </div>
    <div class="content-block-title">Only titles</div>
    <div class="list-block">
      <ul>
        <li class="item-content">
<div class="item-inner">
  <div class="item-title">Item title</div>
</div>
        </li>
        <li class="item-content">
<div class="item-inner">
  <div class="item-title">Item with badge</div>
</div>
        </li>
        <li class="item-content">
<div class="item-inner">
  <div class="item-title">Another item</div>
</div>
        </li>
      </ul>
    </div>
  </div>
</body>

链接元素

当然，多数情况下我们需要将列表中的元素当作链接使用(<a>)，来指向其他页面或者其他数据。在这种情况下，我们需要将“item-content”包裹在<a class="item-link">元素中：

<a href="#" class="item-link">
  <div class="item-content">
    <div class="item-media">...</div>
    <div class="item-inner">...</div>
  </div>
</a>

如果你的链接只包含“item-content”，那我们可以直接将链接作为“item-content”：

<a href="#" class="item-link item-content">
  <div class="item-media">...</div>
  <div class="item-inner">...</div>
</a>

注意，当“item-inner”在“item-link”中时，会有额外的右内边距（right padding）和chevron icon

示例

<div class="list-block">
  <ul>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
<div class="item-title">Item title</div>
<div class="item-after">Label</div>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
<div class="item-title">Item with badge</div>
<div class="item-after"><span class="badge">5</span></div>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
<div class="item-title">Another item</div>
<div class="item-after">Another label</div>
        </div>
      </a>
    </li>
  </ul>
  <div class="list-block-label">List block label text goes here</div>
</div>

列表分割元素（List Divider）

列表分隔元素是一个简单的列表元素并包含标题，它在视觉上分隔两个列表元素：

<li class="item-divider">Divider title here</li>

<div class="list-block">
  <ul>
    <li class="item-content">
      <div class="item-media"><i class="icon icon-f7"></i></div>
      <div class="item-inner">
        <div class="item-title">Item title</div>
        <div class="item-after">Label</div>
      </div>
    </li>
    <li class="item-content">
      <div class="item-media"><i class="icon icon-f7"></i></div>
      <div class="item-inner">
        <div class="item-title">Title</div>
      </div>
    </li>
    <!-- 分隔元素 -->
    <li class="item-divider">Divider title here</li>
    <li class="item-content">
      <div class="item-media"><i class="icon icon-f7"></i></div>
      <div class="item-inner">
        <div class="item-title">Item with badge</div>
        <div class="item-after"><span class="badge">5</span></div>
      </div>
    </li>
    <li class="item-content">
      <div class="item-media"><i class="icon icon-f7"></i></div>
      <div class="item-inner">
        <div class="item-title">Another item</div>
        <div class="item-after">Another label</div>
      </div>
    </li>
  </ul>
  <div class="list-block-label">List block label text goes here</div>
</div>

分组列表（Grouped Lists）

有时我们需要将列表区里的元素分组，在这种情况下，我们需要用额外的分组元素：

<div class="list-block">
  <!-- First group-->
  <div class="list-group">
    <ul>
      <li class="list-group-title">First group</li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
<div class="item-title">Item title</div>
<div class="item-after">Label</div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
<div class="item-title">Item with badge</div>
<div class="item-after"><span class="badge">5</span></div>
        </div>
      </li>
      ...
    </ul>
  </div>
  <!-- Second group-->
  <div class="list-group">
    <ul>
      <li class="list-group-title">Second Group</li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
<div class="item-title">Item title</div>
<div class="item-after">Label</div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
<div class="item-title">Item with badge</div>
<div class="item-after"><span class="badge">5</span></div>
        </div>
      </li>
      ...
    </ul>
  </div>
</div>

也许你会问分组元素和分隔元素有什么区别？如果使用了分组元素，当在分组内部滚动时，标题会保持在固定位置。

内嵌列表区域（Inset List Block）

列表区还有内嵌（非全屏）样式，只需要给列表区域元素加上“inset”类：

<div class="list-block inset">
  <ul>
    ...
  </ul>
</div>

使用“tablet-inset”类，可以使列表区在iPad下以内嵌的方式显示，而在iPhone中以普通样式显示：

<div class="list-block tablet-inset">
  <ul>
    ...
  </ul>
</div>