使用网格布局管理 App 组件位置和大小
此 App 说明如何使用网格布局管理器以在调整 App 大小时控制 App 组件的对齐和缩放。您可以使用网格布局管理器轻松地管理 App 组件的布局,不必设置每个组件的像素位置。此外,网格布局也有利于更灵活地调整大小。有关使用网格布局管理器的详细信息,请参阅Use Grid Layout Managers in App Designer。
网格布局中的组件行为
在此 App 中,左侧面板上的 UI 组件控制脉冲的参数。如果希望无论 App 窗口多大都能提供一致的体验,可使用网格布局管理器对控件进行布局。调整 App 大小时,网格布局管理控件的对齐方式。右侧面板包含用于数据可视化的坐标区,因此当用户更改脉冲参数时,绘图会相应地更新。要查看网格布局中的组件如何对调整大小作出反应,请减小 App 窗口的宽度。当 App 窗口缩小时,网格布局中的组件保持一致的大小。
使用网格布局创建 App
在设计视图中添加并配置网格布局管理器,然后将 UI 组件添加到已配置的布局中:
从 App 设计工具起始页创建一个新的可自动调整布局的两栏式 App。
向左侧面板添加一个网格布局。App 设计工具将该网格布局应用于整个 App 窗口或放置它的容器(在本例中为左侧面板)。
调整网格中的行数和列数。右键点击网格布局并从上下文菜单中选择配置网格布局。通过选择行或列,您可以在调整大小配置菜单中添加和删除行和列。对于此示例,将网格布局设置为 7 行 4 列。
在调整大小配置菜单中设置
ColumnWidth
和RowHeight
属性。对于此示例,将包含旋钮的列的ColumnWidth
设置为"1x"
,以便在调整 App 大小时调整列以填充空间。此加权宽度确保旋钮宽度相同,并平均共享网格中的空间。将包含编辑字段的行的RowHeight
属性设置为"fit"
,以便这些行自动调整以适应其内容。在组件浏览器中指定网格布局的其他属性。通过编辑
ColumnSpacing
和RowSpacing
值来更改列间距和行间距,并使用Padding
属性调整网格外围的间距。有关这些属性的详细信息,请参阅 GridLayout 属性。通过将 UI 组件从组件库拖到网格布局中的对应位置,将它们添加到网格中。
在使用网格布局对 App 进行布局后,对 App 进行编程,以响应用户在代码视图中的输入。有关回调以及如何根据用户输入更新绘图的详细信息,请参阅 App 设计工具中的回调。在 App 设计工具中启动示例来运行 App,查看网格布局如何随着 App 窗口的大小变化,以调整组件的位置和大小。