Main Content

使用网格布局管理 App 组件位置和大小

此 App 说明如何使用网格布局管理器以在调整 App 大小时控制 App 组件的对齐和缩放。您可以使用网格布局管理器轻松地管理 App 组件的布局,不必设置每个组件的像素位置。此外,网格布局也有利于更灵活地调整大小。有关使用网格布局管理器的详细信息,请参阅Use Grid Layout Managers in App Designer

网格布局中的组件行为

在此 App 中,左侧面板上的 UI 组件控制脉冲的参数。如果希望无论 App 窗口多大都能提供一致的体验,可使用网格布局管理器对控件进行布局。调整 App 大小时,网格布局管理控件的对齐方式。右侧面板包含用于数据可视化的坐标区,因此当用户更改脉冲参数时,绘图会相应地更新。要查看网格布局中的组件如何对调整大小作出反应,请减小 App 窗口的宽度。当 App 窗口缩小时,网格布局中的组件保持一致的大小。

使用网格布局创建 App

设计视图中添加并配置网格布局管理器,然后将 UI 组件添加到已配置的布局中:

  1. 从 App 设计工具起始页创建一个新的可自动调整布局的两栏式 App。

  2. 向左侧面板添加一个网格布局。App 设计工具将该网格布局应用于整个 App 窗口或放置它的容器(在本例中为左侧面板)。

  3. 调整网格中的行数和列数。右键点击网格布局并从上下文菜单中选择配置网格布局。通过选择行或列,您可以在调整大小配置菜单中添加和删除行和列。对于此示例,将网格布局设置为 7 行 4 列。

  4. 调整大小配置菜单中设置 ColumnWidthRowHeight 属性。对于此示例,将包含旋钮的列的 ColumnWidth 设置为 "1x",以便在调整 App 大小时调整列以填充空间。此加权宽度确保旋钮宽度相同,并平均共享网格中的空间。将包含编辑字段的行的 RowHeight 属性设置为 "fit",以便这些行自动调整以适应其内容。

  5. 组件浏览器中指定网格布局的其他属性。通过编辑 ColumnSpacingRowSpacing 值来更改列间距和行间距,并使用 Padding 属性调整网格外围的间距。有关这些属性的详细信息,请参阅 GridLayout 属性

  6. 通过将 UI 组件从组件库拖到网格布局中的对应位置,将它们添加到网格中。

在使用网格布局对 App 进行布局后,对 App 进行编程,以响应用户在代码视图中的输入。有关回调以及如何根据用户输入更新绘图的详细信息,请参阅 App 设计工具中的回调。在 App 设计工具中启动示例来运行 App,查看网格布局如何随着 App 窗口的大小变化,以调整组件的位置和大小。

另请参阅

函数

属性

相关主题