---
order: 3
navTitle: 设置列表
---
# SuperPage组件-移动设置列表

设置列表组件可以快速实现手机移动应用常见的列表功能布局效果，如下图：

![个人中心](./images/2021-01-13-09-31-24.png)

## 使用列表组件{#start}

**设置列表**是通过设置项对话框来进行管理的，可以增加、删除、调整位置等操作，每个设置项可以独立设置交互，系统还内置了一些常用的设置项，比如**修改密码**、**绑定手机**、**账号管理**、**我的消息**。具体操作步骤如下：

![使用组件](./images/2021-01-11-13-18.gif)

1. **拖入设置列表组件：** 在**组件区**>**移动**分组下将**设置列表**组件拖入到画布中
2. **设置列表选项：** 在**属性栏**>**设置列表**中，点击**设置列表**弹出对话框，可以添加多个设置项，并分别为每个设置项设置内容和交互等
   - **添加设置项：** 点击左上角添加按钮，添加一个选项
   - **设置交互：** 选中选项后，右侧可以设置属性以及[交互](../../design/action/README.md)动作

## 列表样式设置{#style}

在右侧**属性栏**>**样式**下提供了列表的标题、描述、提示、背景填充、单元格背景和线条的设置。

![样式](./images/2021-01-11-13-04-27.png)

## 支持的子项类型{#settings}

在**属性栏**>**设置列表**，点击弹出的对话框中可自定义设置列表中选项，系统提供了多种类型的设置项，如下：
![设置项内容](./images/2021-01-14-16-10-19.png)

- **单元格：** 普通的单元格，可以设置**标题**、**描述**、**提示**等
- **文本：** 文本输入项，类似于[文本](../common/text.md)组件，可以在**内容**处输入想要显示的文本字段
- **按钮：** 按钮功能项，类似于[按钮](../common/button.md)组件，可以在**内容**中设置按钮显示的文本，此按钮可以搭配其他的交互完成相关功能
- **开关：** 开关功能项，添加后点击可以切换开关状态，可以设置开关**标题**、**描述**、**提示**等，此开关可以搭配其他的交互完成相关功能
- **间隔：** 用于隔开上下两个功能，调整优化布局
- **系统功能：** 系统提供了四个内置功能
  - **修改密码：** 可以修改当前用户的登录密码
  - **绑定手机：** 绑定后，可以使用手机号码+验证码的方式登录
  - **账号管理：** 可修改当前用的登录账号的用户名
  - **我的消息：** 内置的消息模块，可以接收系统下其它模块推送的消息，包括全部、公告、通知、催办、待办、私信等
- **目录：** 可以无限设置多级目录和内容

根据设置项的不同，系统会生成不同属性栏选项，这些类型的修改是不能单独设置某个列表的样式设置，需要在**属性栏**>**样式**统一设置。具体内容设置如下：

- **标题：** 设置选项标题，**文本**、**按钮**、**间隔**和**系统功能**不可设置
- **描述：** 为选项添加一段描述字段，**文本**、**按钮**、**间隔**和**系统功能**不可设置
- **提示：** 为选项添加一段提示信息，**文本**、**按钮**、**间隔**、**开关**和**系统功能**不可设置
- **图标：** 在选项前面添加一个图标，**文本**、**按钮**、**间隔**和**系统功能**不可设置
- **内容：** 在选项中填写显示内容，仅**文本**和**按钮**可填写

## 子项交互设置{#interactive}

**设置列表**中每个设置项的交互都可以单独设置，和其它组件的交互设置功能一致，可以参考[交互](../../design/action/README.md)

![交互](./images/2021-01-13-14-26-56.png)