Main Content

uigridlayout

创建网格布局管理器

全页折叠

语法

g = uigridlayout
g = uigridlayout(parent)
g = uigridlayout(___,sz)
g = uigridlayout(___,Name,Value)

说明

g = uigridlayout 为 App 创建网格布局管理器。网格布局管理器沿一个不可见网格的行和列定位 UI 组件，该网格占据整个图窗或图窗中的一个容器。此命令在新图窗中创建 2×2 网格布局，并返回 GridLayout 对象。MATLAB® 调用 uifigure 函数来创建该图窗。如果您不想通过在 Position 向量中设置像素值来定位组件，请使用网格布局管理器。

如果将组件添加到网格布局管理器，但没有指定组件的 Layout 属性，则网格布局管理器会先从左到右、再从上到下添加组件。

示例

g = uigridlayout(parent) 在指定的父容器中创建网格布局。父容器可以是使用 uifigure 函数创建的图窗或其子容器之一。

示例

g = uigridlayout(___,sz) 将网格的大小指定为向量 sz。此向量中的第一个元素是行数，第二个元素是列数。单独指定 sz 参量或在 parent 参量之后指定它。

示例

g = uigridlayout(___,Name,Value) 使用一个或多个名称-值对组参量指定 GridLayout 属性值。在上述任一语法中的所有其他参量之后指定名称-值对组参量。

示例

全部折叠

创建一个图窗和一个网格。然后通过设置行高和列宽来配置该网格。在本例中，配置 3×2 网格，其中前两行具有 22 像素的固定高度，而底行具有可变高度。将左列设置为具有 150 像素的宽度，将右列设置为具有可变宽度。网格填充整个图窗，但因为网格不可见，图窗看起来为空。

fig = uifigure('Position',[100 100 440 320]);
g = uigridlayout(fig);
g.RowHeight = {22,22,'1x'};
g.ColumnWidth = {150,'1x'};

Empty UI figure window

将两个下拉框、一个列表框和一个坐标区组件添加到网格中。如果没有为组件的 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);

UI figure window with components laid out in two columns. The left column contains two drop-down menus above a list box that fills the remaining vertical space. The right column contains an axes component horizontally aligned with the list box.

将坐标区设置为跨越行 1 到 3，填充垂直空间。

ax.Layout.Row = [1 3];

UI figure window with components laid out in two columns. The axes component in the right column fills the vertical space.

调整图窗大小时，坐标区会增大和缩小以填充左列未使用的可用空间。左侧的各组件保持固定，因为该列定义为具有 150 像素的宽度。

UI figure window resized to be wider. The axes component fills the additional horizontal space.

为可变宽度列指定不同权重时，每列的宽度与权重成比例。可变高度行以相同方式分配空间。

创建一个图窗和一个 2×2 网格。然后配置行高和列宽。在本例中，顶行具有 40 像素的固定高度，而底行具有可变高度。两列的宽度均可变，但第二列的权重是第一列的两倍。由于网格不可见，图窗看起来为空。

fig = uifigure('Position',[100 100 437 317]);
g = uigridlayout(fig,[2 2]);
g.RowHeight = {40,'1x'};
g.ColumnWidth = {'1x','2x'};

Empty UI figure window

在顶行添加一个跨两列的标签。然后向底行的每列添加一个坐标区组件。

% 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);

UI figure window with a label and two axes. The label is centered across the top. Below, the axes component on the right is twice as wide as the axes component on the left.

因为左列的权重为 1，右列的权重为 2，所以右侧坐标区使用的水平空间是左侧坐标区的两倍。调整图窗大小时，网格会保持此比率。

在面板中排列 UI 组件的一种方法是在面板中创建网格。

创建一个图窗和一个 1×2 网格。然后配置列宽。在本例中，左列具有 220 像素的固定宽度，而右列具有可变宽度。由于网格不可见，图窗看起来为空。

fig = uifigure('Position',[100 100 500 315]);
grid1 = uigridlayout(fig,[1 2]);
grid1.ColumnWidth = {220,'1x'};

Empty UI figure window

将一个面板和坐标区添加到 grid1。

p = uipanel(grid1,'Title','Configuration');
ax = uiaxes(grid1);

UI figure window with two columns. The left column contains a panel with the title "Configuration", and the right column contains an axes component.

在面板中创建一个名为 grid2 的网格。然后在 grid2 中放置三个组件和三个标签。grid2 的左列将标签与组件对齐。由于每行高度仅为 22 个像素，因此面板中第三行下方具有额外空间。

% Grid in the panel
grid2 = uigridlayout(p,[3 2]);
grid2.RowHeight = {22,22,22};
grid2.ColumnWidth = {80,'1x'};

% Device label
dlabel = uilabel(grid2);
dlabel.HorizontalAlignment = 'right';
dlabel.Text = 'Device';

% Device drop-down
devicedd = uidropdown(grid2);
devicedd.Items = {'Select a device'};

% Channel label
chlabel = uilabel(grid2);
chlabel.HorizontalAlignment = 'right';
chlabel.Text = 'Channel';

% Channel drop-down
channeldd = uidropdown(grid2);
channeldd.Items = {'Channel 1', 'Channel 2'};

% Rate Label
ratelabel = uilabel(grid2);
ratelabel.HorizontalAlignment = 'right';
ratelabel.Text = 'Rate (scans/s)';

% Rate edit field
ef = uieditfield(grid2, 'numeric');
ef.Value = 50;

UI figure window with a panel and axes. The panel contains UI components and their labels in two columns.

调整图窗大小时，坐标区会增大和缩小以填充 grid1 的左列未使用的可用空间。面板保持固定，因为该列定义为具有 220 像素的宽度。

UI figure window resized to be wider. The axes component fills the additional horizontal space.

嵌套网格允许您管理组件的子集。在本例中，有三个网格：一个网格覆盖整个图窗，第二个网格管理垂直堆叠的组件，第三个网格管理并排放置在垂直堆叠底部的两个按钮。

创建一个图窗和一个 1×2 网格。然后配置列宽。在本例中，左列具有 150 像素的固定宽度，而右列具有可变宽度。由于网格不可见，图窗看起来为空。

fig = uifigure('Position',[100 100 500 315]);
grid1 = uigridlayout(fig,[1 2]);
grid1.ColumnWidth = {150,'1x'};

Empty UI figure window

在 grid1 的第一列内创建一个名为 grid2 的 4×1 网格。然后将一个坐标区组件添加到 grid1 的第二列。

grid2 = uigridlayout(grid1,[4 1]);
grid2.RowHeight = {22,22,22,44};

ax = uiaxes(grid1);

UI figure window with an axes component on the right side

在 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'};

UI figure window with two columns. The left column has three rows with drop-down components. The right column has one row with an axes component.

在 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');

UI figure window with two columns. The left column has two nested columns containing drop-down and button components.

调整图窗大小时，坐标区会增大和缩小以填充 grid1 的左列未使用的可用空间。左侧的各组件保持固定，因为该列定义为具有 150 像素的宽度。

UI figure window resized to be wider. The axes component fills the additional horizontal space.

通过指定像素坐标或位置名称，以显示可滚动网格布局的子组件。

创建一个 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);

Scrollable UI figure window with the upper-left portion of the grid visible

滚动到网格中的一个位置。

scroll(g,100,-30)

UI figure window scrolled 100 pixels to the right and 30 pixels down

现在使用位置名称滚动到网格的右下角。

scroll(g,'bottom','right')

UI figure window scrolled fully to the right and down, so that the lower-right portion of the grid is visible

创建一个网格布局管理器，当您将标签等组件添加到 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 figure window with multiple components laid out in two columns

现在，更改网格中所有 UI 组件的字体名称和字体大小。

set(allchild(g),'FontName','Lucida Console','FontSize',20)

UI figure window with all label, drop-down, list box, and table text in 20-point font

根据用户在下拉菜单中的选择，隐藏网格行中的组件。

创建一个名为 showhide.m 的程序文件。在该文件中，

  • 在图窗中创建一个 1×2 网格，称之为 grid1。使用此网格来管理一个面板和一个坐标区组件。

  • 在该面板内创建一个 3×2 网格，称之为 grid2。使用此网格来管理一个下拉菜单、两个微调器及其标签的布局。

  • 为下拉菜单创建名为 findMethodSelected 的回调函数。当下拉菜单的值更改为 'Quartiles' 时，此回调通过将 grid2.RowHeight{2} 设置为 0 来隐藏 grid2 的第二行中的组件。

然后，运行文件。

function showhide
    
    f = uifigure('Name','Statistical Analysis');
    
    % Create grid1 in the figure
    grid1 = uigridlayout(f);
    grid1.RowHeight = {'1x'};
    grid1.ColumnWidth= {220,'1x'};
    
    % Add a panel and axes
    p = uipanel(grid1);
    ax = uiaxes(grid1);

    % Create grid2 in the panel
    grid2 = uigridlayout(p);
    grid2.RowHeight = {22, 22, 22};
    grid2.ColumnWidth = {80,'1x'};

    % Add method label and drop-down
    findMethodLabel = uilabel(grid2,'Text','Find Method:');
    findMethod = uidropdown(grid2);
    findMethod.Items = {'Moving median','Quartiles'};
    findMethod.ValueChangedFcn = @findMethodSelected;

    % Add window size label and spinner
    winSizeLabel = uilabel(grid2,'Text','Window Size:');
    winSize = uispinner(grid2,'Value',0);

    % Add threshold label and spinner
    thresLabel = uilabel(grid2,'Text','Threshold:');
    thres = uispinner(grid2,'Value',3);

        function findMethodSelected(src,~)
            method = src.Value;

            switch method
            case 'Quartiles'
                % Collapse the second row (hides winSize spinner)
                grid2.RowHeight{2} = 0;
            case 'Moving median'
                % Expand the second row
                grid2.RowHeight{2} = 22;
            end 
        end
end

当您在 App 中将 Find Method 设置为 Quartiles 时，Window Size 标签及其旁边的微调器将隐藏。

Two states of a statistical analysis app. On the left, the method is "Moving median" and the app contains options to select the window size and threshold. On the right, the method is "Quartiles" and the app contains an option to select the threshold only.

输入参数

全部折叠

父容器，指定为使用 uifigure 函数创建的 Figure 对象或其子容器之一：Tab、Panel、ButtonGroup 或 GridLayout。如果不指定父容器，MATLAB 会调用 uifigure 函数创建新 Figure 对象充当父容器。

网格的大小，指定为二元素向量。第一个元素是行数，第二个元素是列数。两个值都必须大于 0。如果在未设置 RowHeight 或 ColumnWidth 属性的情况下指定此参量，MATLAB 会自动将行高和列宽设置为 '1x'。

名称-值参数

将可选的参量对组指定为 Name1=Value1,...,NameN=ValueN，其中 Name 是参量名称，Value 是对应的值。名称-值参量必须出现在其他参量之后，但参量对组的顺序无关紧要。

在 R2021a 之前，使用逗号分隔每个名称和值，并用引号将 Name 引起来。

示例: uigridlayout('RowHeight',{100,100}) 创建一个网格，其中包含高度为 100 像素的两个行。

注意

此处所列的属性只是一部分。有关完整列表，请参阅 GridLayout 属性。

列宽，指定为元胞数组，其中包含 'fit'、数字或与 'x' 字符配对的数字。您可以指定值的任意组合。元胞数组中的元素数量控制网格中的列数。例如，要创建四列网格，请指定一个 1×4 元胞数组。只有指定的元素类型相同（例如 ["1x" "2x" "1x"] 或 [100 200 50]）时，列宽才能指定为字符串数组或数值数组。

有三种不同类型的列宽：

  • 适应宽度 - 指定 'fit'。列宽会自动调整以适应其内容。对于基于文本的组件，'fit' 宽度根据字体属性进行调整，以显示整个文本。对于非基于文本的组件，'fit' 宽度基于组件的默认大小和其他因素。如果您要避免对列宽进行硬编码以适应组件，或如果您的 App 翻译成另一种语言或在不同平台上运行，请使用 'fit' 宽度。

  • 固定宽度（以像素为单位）- 指定一个数字。列宽固定为您指定的像素数。在父容器调整大小时，列宽不变。

  • 可变宽度 - 指定与 'x' 字符配对的数字（例如，'1x'）。当父容器调整大小时，列宽会增大或减小。可变宽度列填充等宽列不使用的其余水平空间。与 'x' 字符配对的数字是用于在所有可变宽度列中划分其余空间的权重。如果网格只有一个可变宽度列，则它将使用所有其余空间，而不管配对数字设置如何。如果有多个可变宽度列且它们的配对数字相同，则它们会均匀地共享空间。在其他情况下，空间量与配对数字成正比。

例如，{'fit',200,'2x','1x'} 指定第一列的宽度大小可调整以适合其内容，第二列固定为 200 像素，最后两列共享剩余的水平空间。第三列使用的空间是第四列的两倍。

更改布局的某些方面可能会影响此属性的值。例如，向已填满的网格添加更多组件会更改网格的大小以容纳新组件。

在已包含组件的网格布局上更改 ColumnWidth 属性不会更改组件的布局。例如，如果您尝试动态删除包含若干组件的列，则在将这些组件移出该列之前，ColumnWidth 属性不会更改。

行高，指定为元胞数组，其中包含 'fit'、数字或与 'x' 字符配对的数字。您可以指定值的任意组合。元胞数组中的元素数量控制网格中的行数。例如，要创建一个具有 4 行的网格，请指定一个 1×4 元胞数组。只有指定的元素类型相同（例如 ["1x" "2x" "1x"] 或 [100 200 50]）时，行高才能指定为字符串数组或数值数组。

行高有三种不同类型：

  • 适应高度 - 指定 'fit'。行高会自动调整以适应其内容。对于基于文本的组件，'fit' 高度根据字体属性进行调整，以显示整个文本。对于非基于文本的组件，'fit' 高度基于组件的默认大小和其他因素。如果您要避免对行高进行硬编码以适应组件，或如果您的 App 翻译成另一种语言或在不同平台上运行，请使用 'fit' 高度。

  • 等高（以像素为单位）- 指定一个数字。行高固定为您指定的像素数。在父容器调整大小时，行高不变。

  • 可变高度 - 指定与 'x' 字符配对的数字（例如，'1x'）。当父容器调整大小时，行高会增大或减小。可变高度行填充等高行不使用的其余垂直空间。与 'x' 字符配对的数字是用于在所有可变高度行中划分其余空间的权重。如果网格只有一个可变高度行，则它将使用所有其余空间，而不管配对数字设置如何。如果有多个可变高度行且它们使用相同的配对数字，则它们会均匀地共享空间。在其他情况下，空间量与配对数字成正比。

例如，{'fit',200,'2x','1x'} 指定第一行的高度大小可调以适应其内容，第二行固定为 200 像素，最后两行共享剩余的垂直空间。第三行使用的空间是第四行的两倍。

更改布局的某些方面可能会影响此属性的值。例如，向已填满的网格添加更多组件会更改网格的大小以容纳新组件。

在已包含组件的网格布局上更改 RowHeight 属性不会更改组件的布局。例如，如果您尝试动态删除包含若干组件的行，则在将这些组件移出该行之前，RowHeight 属性不会更改。

此 属性 为只读。

网格布局管理器的位置和大小，以 [left bottom width height] 形式的四元素向量形式返回。此表介绍该向量中的每个元素。

元素描述
left父容器的内部左边缘与网格布局管理器的左边缘之间的距离
bottom父容器的内部下边缘与网格布局管理器的下边缘之间的距离
width网格布局管理器左边缘和右边缘之间的距离
height网格布局管理器下边缘和上边缘之间的距离

所有测量值都以像素为单位。

此图显示由具有一些 UI 组件的网格布局管理器的 Position 值（橙色实线）和 InnerPosition 值（蓝色虚线）定义的区域。

Grid layout manager in a UI figure window. The orange solid line surrounds the interior of the UI figure window and excludes the UI figure title bar. The blue dashed line surrounds the area of the grid layout manager that contains the UI components and excludes the padding around the components.

提示

要查看网格中组件对象的列表，请查询网格的 Children 属性。更改列表中的顺序不会更改网格中的布局。

版本历史记录

在 R2018b 中推出

全部展开

另请参阅

函数

属性

工具

主题