# 配置折叠菜单

可以创建折叠菜单，通过触摸画面显示隐藏内容。

通过隐现动画更改布局对象的显示/折叠 后，堆栈面板将自动调整开关对象的位置，对象显示也将随之改变。

有关在画面上显示隐藏对象的功能的信息，请参阅以下内容。

堆栈面板

什么是动画？

设置了隐现动画时的操作

## 示例操作

触摸堆栈面板上的开关，显示折叠的布局对象；随后对齐的对象将向下移动。再次触摸开关以折叠布局对象。

## 设置工作流程

注： 除了使用 “配置多节画面” 创建的画面之外，本设置示例还说明了设置折叠菜单的步骤。
配置多节画面

1. 添加变量
2. 添加内容
3. 设置部件/版式

## 添加变量

添加一个变量，存储布局对象的 [隐现] 属性。

### 工程浏览器: [变量] → [全部变量]

添加以下变量。

#### 变量属性

[名称] | [数据类型] | [初始值]
Var2 | [INT] | 2
Var3 | [INT] | 2

## 添加内容

### 工程浏览器: [画面设计] → [内容]

添加以下内容。

#### 内容属性

[内容 ID] | [画面类型]
2 | [滚动画布]
3 | [滚动画布]
4 | [滚动画布]

要设置内容颜色，请单击文档视图中的绘图区域，然后在属性窗口中进行设置。

注： 使用 ID 指定颜色时，显示的颜色将根据 [工具箱] 中的 [颜色集] 而变化。
颜色集

### 工程浏览器: [画面设计] → [内容] → [Content2]

#### 滚动画布属性

标签 | 属性 | 值
[基本] | [填充] | [颜色] | [值] | ID: 26

### 工程浏览器: [画面设计] → [内容] → [Content3]

#### 滚动画布属性

标签 | 属性 | 值
[基本] | [填充] | [颜色] | [值] | ID: 27

### 工程浏览器: [画面设计] → [内容] → [Content4]

#### 滚动画布属性

标签 | 属性 | 值
[基本] | [填充] | [颜色] | [值] | ID: 28

## 设置部件/版式

### 工程浏览器: [画面设计] → [画面] → [Screen2]

将以下对象从 [工具箱] 拖放到布局对象 - 堆栈面板 (名称: StackPanel1)。

1. 开关对象 (名称: Switch2)
2. 布局对象 - 堆栈面板 (名称: StackPanel2)
3. 开关对象 (名称: Switch3)
4. 布局对象 - 堆栈面板 (名称: StackPanel3)

5. 开关对象 (名称: Switch4 到 Switch7)

注： 对齐开关对象 (名称: Switch3) 和堆栈面板 (名称: StackPanel3) 时，请将它们拖放到堆栈面板 (名称: StackPanel2) 的外部，使它们不与堆栈面板重叠。选中堆栈面板 (名称: StackPanel1) 后，双击 [工具箱] 中的相关对象，使其对齐而不重叠。

#### 开关对象（名称: Switch2）属性

此开关更改折叠菜单显示。触摸开关后，布局对象 - 堆栈面板 (名称: StackPanel2) 的 [隐现] 属性将变为 0 (显示) 或 2 (折叠)。

标签 | 子选项卡 | 属性 | 值
[功能] | [触摸] | [操作] | [类型] | [字]
[操作] | [XOR]
[源] | 2
[目标] | [变量] [名称]: Var2

#### 布局对象 - 堆栈面板 (名称: StackPanel2) 属性

标签 | 属性 | 值
[基本] | [方向] | [垂直]
[高度] | 100
[隐现] | [变量] [名称]: Var2

#### 开关对象（名称: Switch3）属性

此开关更改折叠菜单显示。触摸开关后，布局对象 - 堆栈面板 (名称: StackPanel3) 的 [隐现] 属性将变为 0 (显示) 或 2 (折叠)。

标签 | 子选项卡 | 属性 | 值
[功能] | [触摸] | [操作] | [类型] | [字]
[操作] | [XOR]
[源] | 2
[目标] | [变量] [名称]: Var3

#### 布局对象 - 堆栈面板 (名称: StackPanel3) 属性

标签 | 属性 | 值
[基本] | [方向] | [垂直]
[高度] | 100
[隐现] | [变量] [名称]: Var3

#### 开关对象（名称: Switch4）属性

将开关与布局对象 - 堆栈面板 (名称: StackPanel2) 顶部对齐。

标签 | 子选项卡 | 属性 | 值
[功能] | [触摸] | [操作] | [类型] | [字]
[操作] | [设置]
[源] | 1
[目标] | [图形对象] [画面/内容]: ContentDisplay1 [源属性]: ScreenId
[形状] | [尺寸/位置] | [宽度] | 200
[高度] | 50
[对象对齐] | [水平] | 右对齐

#### 开关对象（名称: Switch5）属性

将开关与布局对象 - 堆栈面板 (名称: StackPanel2) 顶部对齐。

标签 | 子选项卡 | 属性 | 值
[功能] | [触摸] | [操作] | [类型] | [字]
[操作] | [设置]
[源] | 2
[目标] | [图形对象] [画面/内容]: ContentDisplay1 [源属性]: ScreenId
[形状] | [尺寸/位置] | [宽度] | 200
[高度] | 50
[对象对齐] | [水平] | 右对齐

#### 开关对象（名称: Switch6）属性

将开关与布局对象 - 堆栈面板 (名称: StackPanel3) 顶部对齐。

标签 | 子选项卡 | 属性 | 值
[功能] | [触摸] | [操作] | [类型] | [字]
[操作] | [设置]
[源] | 3
[目标] | [图形对象] [画面/内容]: ContentDisplay1 [源属性]: ScreenId
[形状] | [尺寸/位置] | [宽度] | 200
[高度] | 50
[对象对齐] | [水平] | 右对齐

#### 开关对象（名称: Switch7）属性

将开关与布局对象 - 堆栈面板 (名称: StackPanel3) 顶部对齐。

标签 | 子选项卡 | 属性 | 值
[功能] | [触摸] | [操作] | [类型] | [字]
[操作] | [设置]
[源] | 4
[目标] | [图形对象] [画面/内容]: ContentDisplay1 [源属性]: ScreenId
[形状] | [尺寸/位置] | [宽度] | 200
[高度] | 50
[对象对齐] | [水平] | 右对齐