GridLayout
网格布局管理器 UI 容器
说明
网格布局管理器 UI 容器沿不可见网格的行和列定位 UI 组件。在创建网格布局管理器后，使用 GridLayout 对象修改其外观和行为。
创建对象
使用 uigridlayout 函数在 App 中创建一个网格布局管理器。
属性
网格
列间距，指定为网格中相邻列之间的标量像素数。您指定的数字会应用于所有列。
行间距，指定为网格中相邻行之间的标量像素数。您指定的数字会应用于所有行。
围绕网格外围进行填充，指定为 [left bottom right top] 形式的向量。下表描述了向量的元素。
| 向量元素 | 描述 |
|---|---|
left | 父容器的内部左边缘与网格左边缘之间的距离（以像素为单位）。 |
bottom | 父容器的内部下边缘与网格下边缘之间的距离（以像素为单位）。 |
right | 父容器的内部右边缘与网格右边缘之间的距离（以像素为单位）。 |
top | 父容器的内部上边缘与网格上边缘之间的距离（以像素为单位）。父容器的内部上边缘从所有装饰元素（如标题、选项卡标签或菜单栏）下方开始。 |
颜色
背景颜色，指定为 RGB 三元组、十六进制颜色代码或下表中列出的颜色选项之一。
RGB 三元组和十六进制颜色代码对于指定自定义颜色非常有用。
RGB 三元组是包含三个元素的行向量，其元素分别指定颜色中红、绿、蓝分量的强度。强度值必须位于
[0,1]范围内，例如[0.4 0.6 0.7]。十六进制颜色代码是字符向量或字符串标量，以井号 (
#) 开头，后跟三个或六个十六进制数字，范围可以是0到F。这些值不区分大小写。因此，颜色代码"#FF8800"与"#ff8800"、"#F80"与"#f80"是等效的。
此外，还可以按名称指定一些常见的颜色。下表列出了命名颜色选项、等效 RGB 三元组和十六进制颜色代码。
| 颜色名称 | 短名称 | RGB 三元组 | 十六进制颜色代码 | 外观 |
|---|---|---|---|---|
"red" | "r" | [1 0 0] | "#FF0000" |
|
"green" | "g" | [0 1 0] | "#00FF00" |
|
"blue" | "b" | [0 0 1] | "#0000FF" |
|
"cyan" | "c" | [0 1 1] | "#00FFFF" |
|
"magenta" | "m" | [1 0 1] | "#FF00FF" |
|
"yellow" | "y" | [1 1 0] | "#FFFF00" |
|
"black" | "k" | [0 0 0] | "#000000" |
|
"white" | "w" | [1 1 1] | "#FFFFFF" |
|
下表列出了浅色和深色主题中绘图的默认调色板。
| 调色板 | 调色板颜色 |
|---|---|
在 R2025a 之前的版本中: 大多数绘图默认使用这些颜色。 |
|
|
|
您可以使用 orderedcolors 和 rgb2hex 函数获取这些调色板的 RGB 三元组和十六进制颜色代码。例如，获取 "gem" 调色板的 RGB 三元组并将其转换为十六进制颜色代码。
RGB = orderedcolors("gem");
H = rgb2hex(RGB);在 R2023b 之前的版本中: 使用 RGB = get(groot,"FactoryAxesColorOrder") 获取 RGB 三元组。
在 R2024a 之前的版本中: 使用 H = compose("#%02X%02X%02X",round(RGB*255)) 获取十六进制颜色代码。
交互性
子级的可见性，指定为 'on' 或 'off'，或者指定为数值或逻辑值 1 (true) 或 0 (false)。值 'on' 等效于 true，'off' 等效于 false。因此，您可以使用此属性的值作为逻辑值。该值存储为 matlab.lang.OnOffSwitchState 类型的 on/off 逻辑值。
将此属性设置为 'off' 可隐藏网格中的所有子组件及其后代后代。无论 Visible 属性的值如何，都隐藏后代及其后代后代。隐藏组件后，即使它们未显示在 App 中，您也可以获取并设置其属性。
将此属性设置为 'on' 时，仅当其 Visible 属性也设置为 'on' 时，后代及其后代后代才可见。
在网格上设置 Visible 属性不会更改其后代后代的 Visible 属性的值。
滚动能力，指定为 'off' 或 'on'，或者指定为数值或逻辑值 1 (true) 或 0 (false)。值 'on' 等效于 true，'off' 等效于 false。因此，您可以使用此属性的值作为逻辑值。该值存储为 matlab.lang.OnOffSwitchState 类型的 on/off 逻辑值。
将此属性设置为 'on' 可以在网格布局管理器内滚动。要进行滚动，还必须满足以下条件：
为网格布局管理器的
'RowHeight'属性指定的值的总和必须大于父容器的高度。为网格布局管理器的
'ColumnWidth'属性指定的值的总和必须大于父容器的宽度。网格布局管理器中有至少一行或一列必须设置为固定的像素高度或宽度。
网格布局管理器必须包含组件。
某些类型的图和坐标区不支持可滚动容器。但是，您可以将图或坐标区放在不可滚动的面板中，然后将该面板放在可滚动的容器中。有关详细信息，请参阅在 App 设计工具中显示图形。
上下文菜单，指定为 ContextMenu 对象。使用此属性可在您右键点击网格布局管理器时显示上下文菜单。使用 uicontextmenu 函数创建上下文菜单。
位置
此 属性 为只读。
网格布局管理器的位置和大小，以 [left bottom width height] 形式的四元素向量形式返回。此表介绍该向量中的每个元素。
| 元素 | 描述 |
|---|---|
left | 父容器的内部左边缘与网格布局管理器的左边缘之间的距离 |
bottom | 父容器的内部下边缘与网格布局管理器的下边缘之间的距离 |
width | 网格布局管理器左边缘和右边缘之间的距离 |
height | 网格布局管理器下边缘和上边缘之间的距离 |
所有测量值都以像素为单位。
此图显示由具有一些 UI 组件的网格布局管理器的 Position 值（橙色实线）和 InnerPosition 值（蓝色虚线）定义的区域。
此 属性 为只读。
网格布局管理器的位置和大小，不包括填充，以 [left bottom width height] 四元素向量形式返回。此表介绍该向量中的每个元素。
| 元素 | 描述 |
|---|---|
left | 父容器的内部左边缘与网格布局管理器中可放置组件的区域的内部左边缘之间的距离 |
bottom | 父容器的内部下边缘与网格布局管理器中可放置组件的区域的内部下边缘之间的距离 |
width | 网格布局管理器中可放置组件的区域的内部左边缘和内部右边缘之间的距离 |
height | 网格布局管理器中可放置组件的区域的内部下边缘和内部上边缘之间的距离 |
所有测量值都以像素为单位。
InnerPosition 值受 Padding 属性的值影响。如果 Padding 为 [0 0 0 0]，则 InnerPosition 属性值与 Position 属性值相同。
此图显示由具有一些 UI 组件的网格布局管理器的 Position 值（橙色实线）和 InnerPosition 值（蓝色虚线）定义的区域。
此 属性 为只读。
网格布局管理器的位置和大小，以 [left bottom width height] 形式的四元素向量形式返回。所有测量值都以像素为单位。
此属性值等同于网格布局管理器的 Position 属性值。
布局选项，指定为 GridLayoutOptions 对象。此属性指定嵌套网格布局容器的选项。如果网格布局不是另一个网格布局容器的子级（例如，它是图窗或面板的子级），则此属性为空且不起作用。但是，如果网格布局是另一个网格布局的子级，则可以通过设置 GridLayoutOptions 对象上的 Row 和 Column 属性，将该子网格放在父网格的所需行和列中。
例如，以下代码在 grid1 的第三行第二列上嵌套 grid2。
grid1 = uigridlayout([4 3]); grid2 = uigridlayout(grid1); grid2.Layout.Row = 3; grid2.Layout.Column = 2;
Row 或 Column 属性指定为二元素向量。例如，此命令使 grid2 跨 grid1 的第 2 列到第 3 列：grid2.Layout.Column = [2 3];
回调
回调执行控件
父级/子级
父容器，指定为 Figure 对象或其子容器之一：Tab、Panel、ButtonGroup 或 GridLayout。如果未指定容器，MATLAB 将调用 uifigure 函数以创建一个新 Figure 对象来充当父容器。
子级，以 UI 组件对象数组的形式返回。使用此属性可查看子级列表，或重新排列子级顺序（通过将该属性设置为其自身的置换来完成）。您不能使用此属性添加或删除子级。要向该列表中添加子级，请设置子 UI 组件的 Parent 属性。
对子级重新排序不会影响网格中组件的位置。要更改网格中组件的位置，请设置其 Layout 属性。
标识符
此 属性 为只读。
图形对象的类型，以 'uigridlayout' 形式返回。
对象函数
scroll | 滚动到 UI 组件内的位置 |
isInScrollView | Determine if component is visible in scrollable container |
示例
创建一个图窗和一个网格。然后通过设置行高和列宽来配置该网格。在本例中，配置 3×2 网格，其中前两行具有 22 像素的固定高度，而底行具有可变高度。将左列设置为具有 150 像素的宽度，将右列设置为具有可变宽度。网格填充整个图窗，但因为网格不可见，图窗看起来为空。
fig = uifigure('Position',[100 100 440 320]); g = uigridlayout(fig); g.RowHeight = {22,22,'1x'}; g.ColumnWidth = {150,'1x'};
将两个下拉框、一个列表框和一个坐标区组件添加到网格中。如果没有为组件的 Layout 属性指定行或列位置，则默认情况下，组件会从左到右、从上到下填充网格。在本例中，通过设置 Layout 属性将第二个下拉框 (dd2) 和列表框 (chanlist) 移至特定的行和列。
% Device drop-down dd1 = uidropdown(g); dd1.Items = {'Select a device'}; % Range drop-down dd2 = uidropdown(g); dd2.Items = {'Select a range'}; dd2.Layout.Row = 2; dd2.Layout.Column = 1; % List box chanlist = uilistbox(g); chanlist.Items = {'Channel 1','Channel 2','Channel 3'}; chanlist.Layout.Row = 3; chanlist.Layout.Column = 1; % Axes ax = uiaxes(g);
将坐标区设置为跨越行 1 到 3，填充垂直空间。
ax.Layout.Row = [1 3];
调整图窗大小时，坐标区会增大和缩小以填充左列未使用的可用空间。左侧的各组件保持固定，因为该列定义为具有 150 像素的宽度。
为可变宽度列指定不同权重时，每列的宽度与权重成比例。可变高度行以相同方式分配空间。
创建一个图窗和一个 2×2 网格。然后配置行高和列宽。在本例中，顶行具有 40 像素的固定高度，而底行具有可变高度。两列的宽度均可变，但第二列的权重是第一列的两倍。由于网格不可见，图窗看起来为空。
fig = uifigure('Position',[100 100 437 317]); g = uigridlayout(fig,[2 2]); g.RowHeight = {40,'1x'}; g.ColumnWidth = {'1x','2x'};
在顶行添加一个跨两列的标签。然后向底行的每列添加一个坐标区组件。
% Add title title = uilabel(g,'Text','Market Trends'); title.HorizontalAlignment = 'center'; title.FontSize = 24; title.Layout.Row = 1; title.Layout.Column = [1,2]; % Add two axes ax1 = uiaxes(g); ax2 = uiaxes(g);
因为左列的权重为 1，右列的权重为 2，所以右侧坐标区使用的水平空间是左侧坐标区的两倍。调整图窗大小时，网格会保持此比率。
嵌套网格允许您管理组件的子集。在本例中，有三个网格：一个网格覆盖整个图窗，第二个网格管理垂直堆叠的组件，第三个网格管理并排放置在垂直堆叠底部的两个按钮。
创建一个图窗和一个 1×2 网格。然后配置列宽。在本例中，左列具有 150 像素的固定宽度，而右列具有可变宽度。由于网格不可见，图窗看起来为空。
fig = uifigure('Position',[100 100 500 315]); grid1 = uigridlayout(fig,[1 2]); grid1.ColumnWidth = {150,'1x'};
在 grid1 的第一列内创建一个名为 grid2 的 4×1 网格。然后将一个坐标区组件添加到 grid1 的第二列。
grid2 = uigridlayout(grid1,[4 1]);
grid2.RowHeight = {22,22,22,44};
ax = uiaxes(grid1);
在 grid2 的前三行中添加三个下拉框。
% Routes drop-down ddRoutes = uidropdown(grid2); ddRoutes.Items = {'Route 1', 'Route 2'}; % Direction drop-down ddDirection = uidropdown(grid2); ddDirection.Items = {'Inbound', 'Outbound'}; % Time drop-down ddTime = uidropdown(grid2); ddTime.Items = {'Morning', 'Afternoon'};
在 grid2 的最后一行内创建一个名为 grid3 的 1×2 网格。然后将两个按钮添加到 grid3。去除 grid3 的左右边距，使按钮与下拉框的左右边缘对齐。
grid3 = uigridlayout(grid2,[1 2]); grid3.Padding = [0 10 0 10]; b1 = uibutton(grid3,'Text','Start'); b2 = uibutton(grid3,'Text','Stop');
调整图窗大小时，坐标区会增大和缩小以填充 grid1 的左列未使用的可用空间。左侧的各组件保持固定，因为该列定义为具有 150 像素的宽度。
通过指定像素坐标或位置名称，以显示可滚动网格布局的子组件。
创建一个 5×2 网格布局，并将网格的 Scrollable 属性设置为 'on'。然后在该网格中添加一个标签、一个表和一个面板。将面板的 Scrollable 属性设置为 'off'，然后向面板添加一个图。
fig = uifigure('Position',[782 497 435 311]); g = uigridlayout(fig,'Scrollable','on'); g.RowHeight = {22,40,22,22,400}; g.ColumnWidth = {400,400}; lbl = uilabel(g,'Text','Tsunamis'); lbl.Layout.Row = 2; lbl.Layout.Column = [1,2]; lbl.HorizontalAlignment = 'center'; lbl.FontSize = 28; tsunamis = readtable('tsunamis.xlsx'); tsunamis.Cause = categorical(tsunamis.Cause); t = uitable(g,'Data',tsunamis); t.Layout.Row = [3,5]; t.Layout.Column = 2; p = uipanel(g); p.Scrollable = 'off'; p.Layout.Row = [3,5]; p.Layout.Column = 1; gb = geobubble(p,tsunamis.Latitude,tsunamis.Longitude,... tsunamis.MaxHeight,tsunamis.Cause);
滚动到网格中的一个位置。
scroll(g,100,-30)
现在使用位置名称滚动到网格的右下角。
scroll(g,'bottom','right')
创建一个网格布局管理器，当您将标签等组件添加到 App 时，或当基于文本的组件的字体大小动态变化时，该管理器会自动调整其行和列的大小以适应这些组件。
创建一个 5×2 网格布局管理器。对第一列的宽度和前四行的高度指定 'fit'。
fig = uifigure('Position',[500 500 430 310]); g = uigridlayout(fig); g.ColumnWidth = {'fit',120,'1x'}; g.RowHeight = {'fit','fit','fit','fit','1x'};
创建一个占据所有列的标题标签。然后，在第一列和第二列的行中创建标签和控件。最后，在最后一列中创建占据第二行到第五行的一个表 UI 组件。请注意，当您将组件添加到具有 'fit' 高度和宽度的行和列时，这些行和列的大小会自动调整以适应新内容。
patientLabel = uilabel(g,'Text','Patient:'); patientLabel.Layout.Row = 2; patientLabel.Layout.Column = 1; patientEdit = uieditfield(g); ageLabel = uilabel(g,'Text','Age:'); ageLabel.Layout.Row = 3; ageLabel.Layout.Column = 1; ageEdit = uidropdown(g,'Items',{'<20','20 - 40','40 - 60','>60'}); stateLabel = uilabel(g,'Text','State:'); stateLabel.VerticalAlignment = 'top'; stateLabel.Layout.Row = 4; stateLabel.Layout.Column = 1; stateLB = uilistbox(g,'Items',{'MA','VA','WY'}); tdata = readtable('patients.dat'); uit = uitable(g); uit.Data = tdata; uit.Layout.Row = [2 5]; uit.Layout.Column = 3;
现在，更改网格中所有 UI 组件的字体名称和字体大小。
set(allchild(g),'FontName','Lucida Console','FontSize',20)
