教程：创建滑块¶

在本教程中，您将学习如何在 Kanzi Studio 中创建一个滑块。

如果您想了解 Kanzi 滑块的结构并创建自己的滑块，请完成本教程。如果您想使用和修改现成的滑块，请使用 Kanzi Studio 工厂内容中的滑块。请参阅 Slider。

视频显示教程的结果。

../../_images/slider-value-indicator.gif

本教程假定您了解使用 Kanzi Studio 的基础知识。熟悉 Kanzi Studio 的最佳入门点是：

获取教程¶

要获取本教程，请在 Kanzi Studio Quick Start 窗口中点击 Examples。在 Slider 教程旁边，点击。

Kanzi Studio 会将教程下载到 <KanziWorkspace>/Tutorials 目录。您可以在 <KanziWorkspace>/Tutorials/Slider/Completed 目录中找到已完成的教程。

创建滑块¶

在本节中，您将学习如何创建一个滑块。

要创建滑块:

在 Kanzi Studio Quick Start 窗口中，点击 New Project。在 New Project 窗口中，设置：
- Name 到 Slider
- Template 到 Kanzi Studio project
  
  使用此模板创建一个 Kanzi 应用程序，而不使用 Kanzi Engine API。
在 Node Tree 中删除 Viewport 2D 节点。

您可以删除 Viewport 2D 节点，因为在本教程中您不会创建任何 3D 内容。
在 Prefabs 中，点击并创建一个 Slider 2D 节点。

您将滑块创建为预设，以便可以重复使用它。
将 Slider 2D 预设拖到 Node Tree 上，并将其放在 RootPage 节点上。

通过这种方式，您可以在节点树中实例化预设，以便您可以在 Preview 中跟踪滑块的创建。
在 Preview 中，单击以进入 Analyze 模式，右键单击，然后选择：
- Debug objects 显示可视化节点，例如光源、摄像机和布局节点。
- Borders of 2D nodes 用条纹线勾勒出 2D 节点的边界。
这样，您可以在 Preview 中看到属性及其值在创建滑块时如何影响节点。
在 Prefabs 中选择 Slider 2D 节点，并在 Properties 中添加并设置：
- Layout Width 到 600
- Layout Height 到 60
- Horizontal Alignment 到 Center
- Vertical Alignment 到 Center
通过这种方式，您可以设置滑块的大小和对齐方式，包括滑轨、旋钮以及旋钮在滑块两端的位置。
创建滑块旋钮移动时沿着的轨道的视觉表示：
1. 在 Slider 2D 预设中的 Prefabs 中创建一个 Content Layout 2D 节点，并将其命名为 Rail。
  
  Rail 节点在视觉上表示滑块旋钮移动的轨道。例如，要创建轨道的视觉表示，可以在布局中使用 Content Layout 2D 节点、Image 节点或多个 Image 或 Empty Node 2D 节点。
2. 在 Prefabs 中选择 Rail 节点，并在 Properties 中添加和设置：
  - Layout Width 到 500。
  - Layout Height 到 25
  - Horizontal Alignment 到 Center
  - Vertical Alignment 到 Center
  通过这种方式，您可以设置滑块轨道的大小和对齐方式。它比其父 Slider 2D 节点更窄且更短，以便滑块旋钮的中心可以移动到轨道两侧的边缘。
3. 在 Prefabs 中选择 Rail 节点，在 Properties 中添加 Background Brush 属性，选择 + Color Brush，并将画笔命名为 Gray Brush。
4. 在 Background Brush 属性旁边，点击，并将 Lightness (L) 属性字段设置为 105。
创建一个轨迹，供 Kanzi 用于沿着轨道的可视化表示移动滑块旋钮：
1. 在 Slider 2D 预设中的 Prefabs 中，创建一个 Trajectory Layout 2D 节点，并在 Properties 中添加和设置：
  - Layout Width 到 500。
  - Layout Height 到 25
  - Horizontal Alignment 到 Center
  - Vertical Alignment 到 Center
  这些属性的值必须与滑块轨道的视觉表示相匹配。
2. 在 Prefabs 中选择 Trajectory Layout 2D 节点，并在 Trajectory 属性中选择 + Line Trajectory。
3. 在 Trajectory 属性旁边，点击并设置：
  - Length 到 500。
    
    将 Length 属性设置为与轨道可视化表示的 Layout Width 属性相同的值。
  - 将 Direction X 属性字段设置为 1，所有其他属性字段设置为 0。
    
    这样您可以将滑块的轨迹设置为 x 轴，以便滑块旋钮在轨道上水平移动。
4. 创建一个别名，Kanzi 用于告诉滑块使用哪个轨迹作为滑块的轨道：
  1. 在 Prefabs 中选择 Slider 2D 预设，在 Dictionaries 窗口中点击 + Add Resource，并选择 Create > Alias。
  2. 将别名命名为 $layout，并将其设置为指向 Slider 2D 预设中的 Trajectory Layout 2D 节点。
    
    Kanzi 使用此别名来指示滑块沿哪个轨迹移动滑块旋钮。
创建滑块旋钮：
1. 在 Prefabs 中，在 Trajectory Layout 2D 中创建一个 Content Layout 2D 节点，将其命名为 Knob，并在 Properties 中添加并设置：
  - Layout Width 到 40
  - Layout Height 到 60
  您使用此节点作为滑块旋钮的视觉表示。
2. 在 Knob 节点中添加 Background Brush 属性，将其设置为 + Color Brush，并将画笔命名为 White Brush。
3. 在 Background Brush 属性旁边，点击，并将 Lightness (L) 属性字段设置为 255。
4. 在 Knob 节点的 Prefabs 中创建一个 Empty Node 2D，添加 Background Brush 属性，将其设置为 + Color Brush，并将画笔命名为 Blue Brush。
5. 在 Background Brush 属性旁边，点击并设置这些属性字段：
  - Hue (H) 到 155
  - Saturation (S) 到 216。
  - Lightness (L) 到 156。
6. 在 Prefabs 中选择 Knob 节点，并在 Properties 中添加和设置：
  - Horizontal Padding Left 到 3
  - Horizontal Padding Right 到 3
  - Vertical Padding Top 到 3
  - Vertical Padding Bottom 到 3
7. 在 Prefabs 中选择 Knob 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
  - Property 到 Trajectory Override Offset
  - Expression 到
    {@../../RangeConcept.NormalizedValue}
  单击 Save。
  
  此绑定使滑块旋钮沿定义滑轨的轨迹移动。
在 Preview 中单击：
- 以退出 Analyze 模式。
- 进入 Interact 模式。

在 Preview 中，您现在可以沿着轨道拖动滑块旋钮。

../../_images/slider-tutorial-result.gif

显示滑块值¶

在本节中，您将学习如何设置滑块的最小值、最大值、步长和起始值，并显示滑块的值。

要显示滑块值：

在 Prefabs 中选择 Slider 2D 预设，在 Properties 中从 Range 类别中添加并设置：
- 将 Minimum Value 设为 0。
  
  通过这种方式，您可以为滑块设置最低值。
- Maximum Value 到 20
  
  通过这种方式，您可以为滑块设置最高值。
- Step Value 到 1
  
  通过这种方式，您可以设置滑块按钮移动的增量。
- Value 到 0
  
  通过这种方式，您可以设置滑块旋钮的初始位置。如果您不设置 Minimum Value 和 Maximum Value 属性，范围将在 0 和 1 之间。
在 Slider 2D 预设中的 Prefabs 中创建一个 Text Block 2D 节点，将其命名为 Slider Value，并在 Properties 中添加 Vertical Alignment 属性并将其设置为 Center。
在 Prefabs 中选择 Slider Value 节点，在 Properties 中，点击 + Add Binding，并在 Binding Editor 中设置：
- Property 到 Text
- Expression 到
```
INT({@../RangeConcept.Value})
```
单击 Save。

通过这种方式，您可以将 Slider Value 节点设置为显示滑块的当前值。