Main Content

Mediante los administradores de diseño de cuadrícula

Nota

Los administradores de diseño de cuadrícula son solo para aplicaciones creadas con la función.uifigure

Al diseñar una aplicación con un administrador de diseño de cuadrícula, se colocan los componentes en las filas y columnas de una cuadrícula invisible. El uso de un diseño de cuadrícula es sencillo, pero es importante comprender la relación entre la cuadrícula, su contenedor principal y los componentes que administra la cuadrícula.

Cuando se crea una cuadrícula, siempre abarca toda la ventana de la aplicación o el contenedor en el que se coloca. Debe configurar sus filas y columnas para que dividan el espacio del contenedor primario de forma adecuada.

Para configurar las filas y columnas, especifique las propiedades de la cuadrícula.RowHeightColumnWidth Especifique el valor de cada propiedad como una matriz de celdas. La longitud de la matriz de celdas controla el número de filas o columnas. Por ejemplo, para crear una cuadrícula que tenga tres filas, especifique la propiedad como una matriz de celdas de 1 por 3.RowHeight Los valores de cada matriz de celdas controlan el tamaño de cada fila o columna.

Hay dos tipos de tamaños:

  • Tamaño fijo en píxeles: especifique un número. El tamaño de la fila o columna se fija en el número de píxeles que especifique. Cuando el contenedor principal cambia de tamaño, no cambia.

  • Tamaño variable: especifique un número emparejado con un carácter (por ejemplo,).'x''1x' Cuando el contenedor primario cambia de tamaño, la fila o columna crece o se encoge. Las filas y columnas de tamaño variable llenan el espacio restante que las filas o columnas fijas no utilizan. El número que empareje con el carácter es un peso para dividir el espacio restante entre todas las filas o columnas de tamaño variable.'x'

Por ejemplo, este código crea una cuadrícula de 2 por 3. La primera fila se fija a 25 píxeles de alto, mientras que la segunda fila tiene una altura variable. Las dos primeras columnas tienen 100 píxeles de ancho y la última columna tiene un ancho variable.

f = uifigure; g = uigridlayout(f); g.RowHeight = {25,'1x'}; g.ColumnWidth = {100,100,'1x'}; 

La cuadrícula es invisible, pero esta imagen incluye líneas para ilustrar cómo se distribuye el espacio.

Para colocar un componente en una fila y columna específica de la cuadrícula, debe:

  • Especifique la rejilla como el elemento primario del componente.

  • Especifique la fila y la columna de destino estableciendo la propiedad del componente.Layout

Por ejemplo, este código crea una cuadrícula que tiene el tamaño predeterminado (dos filas y dos columnas).'1x''1x' A continuación, coloca un cuadro de lista en la primera fila y la segunda columna de esa cuadrícula.

g = uigridlayout; list = uilistbox(g); list.Layout.Row = 1; list.Layout.Column = 2; 

De nuevo, las líneas de rejilla de esta imagen no aparecen en la figura.

Si agrega componentes y no especifica la propiedad, la cuadrícula coloca los componentes en ubicaciones predeterminadas.Layout Los componentes llenan la rejilla de izquierda a derecha y de arriba a abajo inicialmente. Por ejemplo, este código crea una cuadrícula de 2 por 2 que contiene cuatro componentes en el orden predeterminado.

f = uifigure; g = uigridlayout(f); g.RowHeight = {25,'1x'}; g.ColumnWidth = {100,'1x'}; b = uibutton(g,'Text','Open File'); dd = uidropdown(g,'Items',{'Scatter Plot','Line Plot'}); list = uilistbox(g,'Items',{'one','two'}); ax = uiaxes(g); 

Si vuelve a configurar la rejilla después de añadirle componentes, la rejilla no redistribuirá los componentes. Por ejemplo, si agrega una tercera columna en el ejemplo anterior, la cuadrícula no desplaza el cuadro de lista de nuevo a la tercera columna de la primera fila.

g.ColumnWidth = {100,'1x','1x'};

Algunos cambios que realice en el diseño pueden cambiar el tamaño de la cuadrícula. Por ejemplo, agregar un componente a una cuadrícula completamente rellenada agrega una fila para acomodar el nuevo componente.

Para ver la lista de objetos de componente en la cuadrícula, consulte la propiedad de la cuadrícula.Children Cambiar el orden en la lista no cambia el diseño en la cuadrícula.

Ejemplo: ocultar filas basadas en condiciones de tiempo de ejecución

En este ejemplo se muestra cómo ocultar componentes dentro de una fila de una cuadrícula en función de la selección del usuario en un menú desplegable. El código realiza estas tareas de alto nivel:

  • Crea una cuadrícula de 1 por 2 en la figura que administra un panel y un componente de ejes.grid1

  • Crea una cuadrícula de 3 por 2 dentro del panel.grid2 Esta cuadrícula administra el diseño de un menú desplegable, dos Spinners y sus etiquetas.

  • Crea una función de devolución de llamada llamada para el menú desplegable.findMethodSelected Cuando el valor del menú desplegable cambia a, la devolución de llamada oculta los componentes en la segunda fila de estableciendo en.'Quartiles'grid2grid.RowHeight{2}0

Cree un archivo de programa llamado.showhide.m A continuación, pegue este código en el archivo y ejecútelo.

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,'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

Cuando se establece en la aplicación, la etiqueta y el Spinner junto a él se ocultan.Find MethodQuartilesWindow Size

Consulte también

|