Main Content

本页的翻译已过时。点击此处可查看最新英文版本。

uigridlayout

创建网格布局管理器

说明

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

将两个下拉框、一个列表框和一个坐标区组件添加到网格中。如果没有为组件的 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,所以右侧坐标区使用的水平空间是左侧坐标区的两倍。调整图窗大小时,网格会保持此比率。

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

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

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

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

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

在面板中创建一个名为 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;

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

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

创建一个图窗和一个 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)

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

创建一个名为 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 标签及其旁边的微调器将隐藏。

输入参数

全部折叠

父容器,指定为使用 uifigure 函数创建的 Figure 对象或其子容器之一:TabPanelButtonGroupGridLayout。如果不指定父容器,MATLAB 会调用 uifigure 函数创建新 Figure 对象充当父容器。

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

名称-值对组参数

指定可选的、以逗号分隔的 Name,Value 对组参数。Name 为参数名称,Value 为对应的值。Name 必须放在引号中。您可采用任意顺序指定多个名称-值对组参数,如 Name1,Value1,...,NameN,ValueN 所示。

示例: 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 属性不会更改。

提示

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

兼容性考虑

全部展开

R2020b 中的行为有变化

在 R2018b 中推出