Kanzi学习之路（3）：Kanzi的树形结构和常用控件介绍

最新推荐文章于 2024-07-27 10:19:51 发布

Captain--Jack

最新推荐文章于 2024-07-27 10:19:51 发布

阅读量7k

点赞数 7

分类专栏： Kanzi学习之路文章标签： kanzi 树形结构

本文链接：https://blog.csdn.net/u010977122/article/details/54620079

版权

Kanzi学习之路专栏收录该内容

9 篇文章 55 订阅

订阅专栏

今天我们来通过kanzi studio，感性的了解一下kanzi App的结构和一些常用的控件。

首先我们先新建一个工程，lesson3，通过前面的学习，对于kanzi studio的交互界面有了初步的了解，我们首先来一起看看Project标签下工程的结构，新建

的工程都会有一个默认的结构，如下：

这些一级一级的是什么意思呢？用来干嘛呢？排列的顺序和渲染出来的效果有影响吗？不要急，我们下面就来讲解。

像这种采用树形结构来组织界面的元素的做法，我相信大家都不陌生。对于UI设计师，这和他们使用的PS上面层和级的概念都差不多；对于软件工程师，使用过Qt的对于这肯定是相当熟悉的，从QT4.X的GraphView的渲染机制，到QT5.X中QML里使用的scenegraph的渲染机制，都是采用的这种树形结构来进行管理页面元素。采用树形结构可便于查找节点，也便于随时修改添加删除节点，树的深度也方便管理绘制的顺序。所以只要把我们的kanzi studio的APP想象成一棵节点树就可以了，任何元素都是树上的一个节点，上面的Screen节点就相当于“树根”一样，只要加到上面去就可在界面上显示了。

像上面所说的，Screen节点就相当于节点树根节点，任何一个App只有一个屏幕，即一个Screen，这个节点定义了Kanzi App显示窗口的参数，如屏幕大小，是采用相对分辨率还是绝对分辨率等。Screen还有一个属性Locale，可以用于多语言的切换或者简单的风格切换，这个我们后面会详细讲解。如果节点没有覆盖整个screen，kanzi将默认采用checkerboard这种材质进行填充，但是它不会出现在导出的kanzi应用上。

在Screen下面是RootPage节点，这个是绘制渲染的入口节点，也可以是其他的2D节点，但是Screen只能有一个2D子节点。

对于这些2D节点，渲染的顺序就是从上到下，最上面的最先绘制，也就在最底下的，最下面的最后绘制，会在最上面，就这样一层层绘制。2D节点的子节点只能是2D节点，但是里面有个特殊的就是Viewport 2D节点，因为它不仅可以绘制2D节点，如Image、Page、Button 2D等，还可以绘制一个3D 节点，Scene节点。而且如果Viewport 2D下同时存在Scene和其他的2D节点，它们的绘制和上面提到的不同，2D节点总是会在Scene之后绘制，对于这一点我也不清楚~~

如下图所示：

我们可以通过Background Brush属性来设置Viewport 2D的一个背景，通过Foreground Hint属性来控制kanzi如何去渲染一个Viewport 2D的背景：

None：告诉kanzi在渲染Viewport 2D节点之后绘制背景色。用于Viewport 2D下的节点是不透明的情况。

Translucent：告诉kanzi在渲染Viewport 2D节点之前绘制背景色。用于Viewport 2D下的节点是阿尔法混合的情况。

Occluding：告诉kanzi不去绘制背景色。用于Viewport 2D下的节点都是3D节点的情况。

对于3D节点，除了上面所说的顺序，还有一个z顺序。同一父节点的3D子节点，如果z相同，谁在下面谁后绘制；如果z不同，z越大越后绘制。

不论2D还是3D节点，子节点的位置都是相对于父节点的。对于父节点的操作，都会影响它的子节点。

下面通过调整Box的z值就可以让它在Sphere前面：

下面我们来看看kanzi里的常用的一些控件：

内容控制管理节点：

Image. 使用Image节点可以显示一个位图图像；
Model. 使用 Model 节点显示导入kanzi应用的模型；
Nine Patch Image. 使用 Nine Patch Image 节点 to create a scalable button background that scales with the size of the Nine Patch Image content.
Page. 使用Page 节点组织应用的结构。例如，如果你的应用中包含多个视图或者模块，如音乐播放模块，相册模块，日历模块，那就为每个模块创建一个Page节点，使用 Page 节点创建每个视图。
Text Block 3D 和 Text Block 2D. 使用Text Block 节点显示应用里的文本；
Viewport 2D. 使用Viewport 节点设置投影的目标面的大小。

交互性控制节点

Button 3D 和 Button 2D. 使用 Button 节点创建点击的交互。
Scroll View 3D 和 Scroll View 2D. 使用 Scroll View 节点为用户创建一个屏幕从划动输入。
Slider 3D 和 Slider 2D. 使用 Slider 节点可以为用户想在最大值和最小值之间修改数值提供一个可视化的方式。
Toggle Button 3D 和 Toggle Button 2D.使用 Toggle Button 节点通过有各种触发状态的按钮创建交互。
Toggle Button Group 3D and Toggle Button Group 2D.使用 Toggle Button Group 节点允许用户从一系列互相排斥的选择中选择一个选项。

布局控制节点

Dock Layout.使用 Dock Layout 节点沿着a Dock Layout 节点边缘布置相互关联的节点。
Empty Node. 使用 Empty Node 节点用来组织一系列节点，并且可以设置它们的属性值。
Flow Layout.使用 Flow Layout 节点沿着一条线布置各个节点。当排着超过了边界，会在一条新的线上继续排放子节点。
Grid Layout. 使用 Grid Layout 节点在一个表格里布置各节点。
Stack Layout.使用 Stack Layout 节点在一条指定的轴上，布置各个节点。
Trajectory Layout.使用 Trajectory Layout 节点沿着一条轨迹布置节点。

容器控制节点

Grid List Box.使用 Grid List Box 节点按照网格布局创建可滚动的列表项目。
Trajectory List Box 3D.使用 Trajectory List Box 3D 节点可以沿着一个轨迹创建可滚动的列表项目。

3D 节点

Camera. 使用 Camera 去显示应用中 Scene 下的节点。
Instantiator.使用 Instantiator 节点去复制一个3D节点或者 Instantiator 节点目标节点树的外观。
Level of Detail.使用 Level of Detail node when you want to show different appearances of the same object, or different object, based on the viewing distance of the Level of Detail node.
Light 节点. 使用 light 节点为应用中的Scene创建光照资源。Kanzi 有一下光照节点类型：
- Directional Light （平行光）只发射一个方向的光，适合用来模拟太阳光；
- Point Light（点光源）从一个指定地方，朝360度发射光线；
- Spot Light （聚光灯）从一个指定的方向想另外一个指定的方向，以一个锥型发射光线。
Scene. 使用 Scene 节点在应用中显示3D内容。