教程：制作具有动态布局的应用程序¶
在本教程中，您将学习如何创建会随设备屏幕分辨率的变化而作出响应的用户界面。具有动态布局的用户界面无论在何种设备及其屏幕分辨率下都能看起来不错且易于使用。
视频显示教程的结果。
本教程假定您了解使用 Kanzi Studio 的基础知识。熟悉 Kanzi Studio 的最佳入门点是：
获取教程¶
要获取该教程，请在 Kanzi Studio 的 Quick Start 窗口中点击 Projects 并选择 Tutorials 选项卡。在 Dynamic layout 教程旁边，点击 
。
Kanzi Studio 会将教程下载到 <KanziWorkspace>/Tutorials 目录。您可以找到：
位于
<KanziWorkspace>/Tutorials/Dynamic layout/Start目录中的教程起点工程。位于
<KanziWorkspace>/Tutorials/Dynamic layout/Completed目录中的已完成教程。
起始项目的内容¶
具有动态布局的用户界面可以响应设备屏幕方向和分辨率的变化。Grid Layout 节点构成动态布局的基础。要使您的 Kanzi 应用程序布局动态化，您必须将所有希望响应屏幕分辨率变化的内容放置在 Grid Layout 节点内。然后，您设置 Grid Layout 节点，以便它们以您想要的方式定位和分配内容。
起点工程包含完成本教程所需的两个 Grid Layout 2D 节点：
Player 节点设置媒体播放器应用程序的位置和大小（白色背景的内容）。该节点包含三列：
第一列和第三列被设置为 Proportional，值为 1，以便它们的大小与彼此以及整个 Player Grid Layout 节点的大小成比例相同。这些列包含当前播放歌曲的已用时间和剩余时间。
中间列设置为 Automatic，以便 Kanzi 根据该列中节点的大小设置其大小。此列包含歌曲信息和播放器控件。
Controls 节点设置歌曲标题、艺术家和专辑名称的位置，以及播放器的控件。节点的列和行设置为 Proportional，值为 1，以便它们的大小与彼此以及整个 Controls Grid Layout 2D 节点的大小成比例相同。
让用户界面拥有动态布局¶
在本节中，您可以使用户界面（Player 和 Controls Grid Layout 2D 节点）的布局响应设备屏幕方向和分辨率的变化。
在此工程中，RootNode 填满整个设备屏幕。由于 RootNode 节点的大小随设备分辨率变化，请将其高度和宽度作为基准来设置用户界面中节点的尺寸。
要让用户界面的布局自适应：
在 Kanzi Studio 的 Quick Start 窗口中，点击 Projects 并选择 Tutorials 选项卡。在 Dynamic layout 教程旁边，点击 Open 并选择 Start project。
（可选） 在 Preview 中，单击
以进入 Analyze 模式，右键单击 
，然后选择 Debug objects 和 Grid cells。这样，您可以可视化 Grid Layout 2D 节点的列和行。
设置 Player 节点的大小：
在 Node Tree 中选择 Player 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
Property 到 Layout Height
Expression 到
clamp(400, 1200, {@../Node.ActualHeight} - 300)
单击 Save。
Player Grid Layout 2D 节点设置媒体播放器应用程序（白色背景的内容）的位置和大小。此绑定根据 RootNode 节点的高度设置该节点的高度。您使用 限制 (Clamp) 绑定函数将 Player 节点的高度限制为：
比 RootNode 节点的高度少 300 像素
由于 Player 节点的 Vertical Alignment 属性设置为 Center，这会在顶部和底部创建 150 像素的边距。
始终在 400 和 1200 像素之间。
在 Properties 中，单击 + Add Binding，并在 Binding Editor 中设置：
Property 到 Layout Width
Expression 到
clamp(500, {@../Node.ActualWidth}, {@../Node.ActualWidth} - 300)
单击 Save。
此绑定根据 RootNode 节点的宽度设置 Player Grid Layout 2D 节点的宽度。您使用 限制 (Clamp) 绑定函数将 Player 节点的宽度限制为：
比 RootNode 节点的宽度少 300 像素
由于 Player 节点的 Horizontal Alignment 属性设置为 Center，这会在左右两侧创建 150 像素的边距。
始终至少 500 像素。
设置 Controls 节点的大小：
在 Node Tree 中选择 Controls 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
Property 到 Layout Height
Expression 到
{@../Node.Height}
单击 Save。
Controls Grid Layout 2D 节点设置歌曲标题、艺术家和专辑名称的位置和大小，以及播放器的控件。此绑定将 Controls 节点的高度设置为与 Player 节点的高度相同。
小技巧
您可以右键单击某个属性并选择 Create Binding，开始为该属性创建绑定。
这样，您会自动将该属性添加到 Binding Editor 中。
在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
Property 到 Layout Width
Expression 到
clamp(500, 1300, {@../Node.Width} - 300)
单击 Save。
此绑定根据 Player 节点的宽度设置 Controls Grid Layout 2D 节点的宽度。您使用 限制 (Clamp) 绑定函数将 Controls 节点的宽度限制为：
比 Player 节点的宽度少 300 像素。
由于 Controls 节点的 Horizontal Alignment 属性设置为 Center，这会在左右两侧创建 150 像素的边距。
始终在 500 和 1300 像素之间。
让用户界面中的内容自适应¶
在本节中，您使 Controls Grid Layout 2D 节点的内容响应设备屏幕方向和分辨率的变化。这样，用户界面中的控件会随着屏幕分辨率的变化而变化。
要让用户界面中的内容自适应：
设置 Song list 节点的大小：
在 Node Tree 中选择 Song list 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
Property 到 Layout Height
Expression 到
clamp(10, 60, {@../Node.Height} / 20)
单击 Save。
Song list Image 节点是播放器控件中最左边的控件。此绑定根据 Controls 节点的高度设置 Song list 节点的高度。您使用 限制 (Clamp) 绑定函数将 Song list 节点的高度限制为：
Controls 节点高度的百分之五。
始终在 10 到 60 像素之间。
对 Song list 节点的 Layout Width 属性重复上一步，并使用此绑定表达式：
clamp(10, 60, {@../Node.Width} / 20)单击 Save。
绑定的结果与上一步中的绑定结果相同，但设置了 Song list 节点的 Layout Width。
将您在 Song list 节点中创建的相同绑定应用到 Controls 节点中的其他 Image 节点。
小技巧
要在多个节点中创建相同的绑定，请在 Node Tree 中选择这些节点，然后在 Properties 中点击 + Add Binding，或者右键单击某个属性并选择 Create Binding。
在 Node Tree 中选择 Song list 节点，在 Properties 中右键单击 Bindings，并选择 Copy。
在 Node Tree 中选择 Back 节点，按下 Shift 键并点击 More 节点。
在 Properties 中，右键单击 Bindings 并选择 Paste Binding(s)。这样，您可以将复制的绑定添加并应用于所有选定的节点。
设置 Play 节点的大小：
在 Node Tree 中选择 Play 节点，在 Properties 中单击 Layout Height 绑定，并在 Binding Editor 中将 Expression 设置为
clamp(50, 120, {@../../../Node.ActualHeight} / 5)单击 Save。
此绑定根据 RootNode 节点的高度设置 Play Image 节点的高度。通过此绑定，Play 节点大小的变化方式与 Controls 节点中的其他节点不同。
对 Play 节点的 Layout Width 属性重复上一步，并使用此绑定表达式：
clamp(50, 120, {@../../../Node.ActualWidth} / 5)单击 Save。
在 Kanzi Studio 中选择 File > Export > Export as KZB Player for Windows，并在
<ProjectName>/Application Player目录中打开应用程序的 .exe 文件。当您调整应用程序窗口的大小时，即模拟设备屏幕分辨率的变化。请注意，用户界面的大小如何根据您在项目中创建的绑定而变化。
接下来该做什么？¶
在本教程中，您学习了如何创建一个用户界面，其大小可以响应设备屏幕分辨率的变化。该项目包含 Text Block 节点，其文本在设备屏幕分辨率变化时保持不变。您可以使用本教程中学到的方法，使 Text Block 节点中的文本大小响应设备屏幕分辨率的变化。
您还可以：
学习如何使用自定义属性控制仪表指针的位置。请参阅 教程：创建仪表。
学习如何创建组合仪表指示灯并用属性控制它。请参阅 教程：创建集群指示器。
另请参阅¶
要了解有关 Grid Layout 节点如何工作的更多信息，请参阅 使用 Grid Layout 节点。
要了解有关使用绑定的更多信息，请参阅 使用绑定 和 Bindings expressions 参考。