Únase al grupo para recibir materiales de aprendizaje sobre desarrollo de Qt e intercambios técnicos a continuación ↓↓↓↓↓↓↓↓

Prefacio

Érase una vez, todos pasamos tiempo bajo el marco negro. Estábamos hartos del miedo a ser dominados por el marco negro. Queríamos saltar y ver el exterior. Estábamos hartos de escuchar que la interfaz es solo una máscara, y el código detrás de ella es el rey. Palabras, cuando sientas que el marco negro ya no puede satisfacerte, creo que es hora de que hagas algunos cambios. Si estás aprendiendo C ++, creo que Qt puede ser una opción para que ingreses a la interfaz. En este artículo, no hablaremos de funciones o clases. En resumen, no hablaremos de código. Además de código, hablemos sobre cómo diseñar, cómo usar qt para crear una interfaz hermosa❤️. Vi este comentario en una publicación de blog sobre diseño: ¿ Por qué tienes que diseñarlo? ¿No sería mejor diseñarlo tú mismo? Creo que muchos estudiantes que son nuevos en el diseño tienen esta idea. Por supuesto, yo tuve la misma idea que tú al principio, pero ahora ya no me atrevo a tener esta idea . La razón por la que dijo esto fue que era nuevo en la interfaz o hizo clic casualmente. Aba Aba hizo un comentario después de leerlo. Cuando entré en contacto por primera vez con la interfaz, el diseño realmente no era tan importante. Nuestro software (ni siquiera se puede llamar software, solo un caparazón vacío) solo tenía unos pocos componentes en total, ¿dos botones? ¿Tres cuadros de texto? Cuando entró en contacto con él por primera vez, ¿ha considerado el problema de los cambios aleatorios en el tamaño del software? ¿Ha considerado agregar componentes más adelante? A medida que nuestro software se hace cada vez más grande, es particularmente importante permitir que los componentes asignen espacio automáticamente. .

Dividido en dos secciones principales: diseño y versión Qt de CSS, lo básico es primero y lo avanzado después, la primera parte habla sobre componentes de diseño y sintaxis css, etc., y luego lo practicamos y resolvemos los problemas encontrados. . No puedo terminarlo. Por favor, dame algunas sugerencias. Guárdalo primero y compruébalo más tarde si es necesario. Se utiliza la versión Qt5.10.0. Para obtener métodos de uso más detallados, haga clic en el documento oficial a continuación para verlo ❤️La creación no es fácil, tus Me gusta son la motivación para mi creación.

1. Introducción a los componentes relacionados con el diseño.

Relacionados con el diseño están los tres elementos marcados por los cuadrados rojos en la imagen de arriba, que se explican a su vez a continuación.

1.Diseños (diseño)

La palabra Diseños debe resultarle familiar. El significado de diseño es que hay 4 tipos de diseño en el primer cuadro rojo, a saber, Diseños verticales (diseño vertical) , Diseños horizontales (diseño horizontal) , Diseños de cuadrícula (diseño de red) , Formulario Diseños .

Diseños verticales

Al utilizar el diseño vertical, los componentes se distribuyen verticalmente automáticamente.

Diseños horizontales

Al utilizar el diseño horizontal, los componentes se distribuyen automáticamente de forma horizontal.

Diseños de cuadrícula

Usando un diseño horizontal, los componentes se distribuyen automáticamente en la dirección de la cuadrícula.

Diseños de formulario

Similar al diseño de la cuadrícula, pero solo la columna más a la derecha de la cuadrícula cambia de tamaño.

2.Espaciadores (espaciadores espaciales/resortes)

Hay dos tipos de espaciadores, uno es horizontal y el otro es vertical.

El espaciador tiene cuatro propiedades:

spacerName（名字）

orientation（决定spacer是水平间隔或垂直间隔）

sizeType（单独说）

sizeHint(该值是组件作为在布局管理器中部件的缺省大小，既建议值，也是缺省值，其他组件该值不可修改，但Spacer组件可修改，组件实际大小受部件的大小策略、sizeHint以及布局中其他部件的影响)

Entre los cuatro atributos, se debe discutir sizeType:

descripción del atributo sizeType	valor	ilustrar
Fijado	0	Estrategia de valor fijo: el tamaño predeterminado correspondiente a Qwidget.sizeHint () es el tamaño fijo del componente, por lo que el componente no se puede ampliar ni reducir.
Mínimo	Bandera de crecimiento	Especifique la estrategia de valor mínimo: el tamaño predeterminado correspondiente a Qwidget.sizeHint () es el valor mínimo. El tamaño del widget no se puede cambiar a un tamaño menor que el tamaño predeterminado y el valor debe ser suficiente para satisfacer la visualización del widget. Los widgets permiten la expansión, pero Qt no recomienda la expansión (por ejemplo: botones horizontales).
Máximo	Bandera retráctil	Especifique la estrategia de valor máximo: el tamaño predeterminado correspondiente a Qwidget.sizeHint () es el valor máximo. Si otros componentes requieren espacio y no destruyen el componente, entonces se permite reducir el componente (por ejemplo: una línea divisoria).
preferido	Bandera de crecimiento\|Bandera de reducción	Estrategia de preferencia: el tamaño predeterminado correspondiente a Qwidget sizeHint () es el mejor efecto. Se permite ampliar o reducir el widget, pero no se recomienda expandirlo más que sizeHint (). Esta estrategia es la estrategia predeterminada.
En expansión	Aumentar Bandera\|Reducir Bandera\|Expandir Bandera	Estrategia de escala: el tamaño predeterminado correspondiente a Qwidget.sizeHint() es un tamaño razonable, pero el widget puede reducirse y está disponible. El widget puede aprovechar el espacio extra, por lo que obtendrá tanto espacio como sea posible (por ejemplo, un control deslizante en dirección horizontal).
MínimoExpansión	Crecer Bandera\|Expandir Bandera	Estrategia de escalabilidad mínima: el tamaño predeterminado correspondiente a Qwidget.sizeHint () es el valor mínimo y el tamaño es suficiente. El widget puede utilizar espacio adicional, por lo que obtendrá tanto espacio como sea posible (por ejemplo: un control deslizante en dirección horizontal).
ignorado	Reducir bandera\|Crecer bandera\|Ignorar bandera	Se ignorará el tamaño predeterminado correspondiente a Qwidget.sizeHint() y el widget obtendrá tanto espacio como sea posible.

Al menos, es posible que los recién llegados no entiendan esta explicación. En lenguaje sencillo, se ve así:

Corregido: el control no se puede ampliar ni reducir. El tamaño del control es su tamaño.Sugerencia.

Mínimo: el sizeHint del control es el tamaño mínimo del control. El control no puede ser más pequeño que este tamaño. Sugerencia, pero se puede ampliar.

Máximo: El sizeHint del control es el tamaño máximo del control. El control no se puede ampliar, pero sí se puede reducir a su tamaño más pequeño permitido.

Preferido: el sizeHint del control es su sizeHint, pero se puede ampliar o reducir.

Expandint: El control puede aumentar o disminuir por sí solo.

Expansión mínima: el sizeHint del control es su sizeHint, pero se puede usar espacio adicional, es decir, obtendrá tanto espacio como sea posible.

?Ignorado: El sizeHint del control no tiene ningún efecto, intentará conseguir el mayor espacio posible.

Entonces, cuando vea esto, no vuelva a decir que su espaciador no puede establecer el tamaño.

3.Barra de herramientas del diseñador de interfaz de usuario

Los cuatro primeros tienen poco que ver con nuestro artículo y no los presentaremos, veremos el resto más adelante.

Diseñar horizontalmente: ¿Diseñar los componentes seleccionados en el formulario horizontalmente? Diseñar verticalmente: ¿Diseñar los componentes seleccionados en el formulario verticalmente? Diseñar horizontalmente en el divisor: ¿Usar una barra de división para dividir los componentes seleccionados en el formulario horizontalmente? Verticalmente en el divisor: ¿Utilizar una barra de división para dividir verticalmente los componentes seleccionados en el formulario? Diseñar en un diseño de formulario: Diseñar los componentes seleccionados en el formulario? Diseñar en una cuadrícula: Diseñar los componentes seleccionados en el formulario Diseño de cuadrícula ¿De los componentes seleccionados? Romper diseño: libera el diseño de los componentes seleccionados en el formulario, es decir, rompe el diseño. ?Ajustar tamaño: ajusta automáticamente el tamaño del componente seleccionado.

En este momento, es posible que desee preguntar si el diseño aquí es el mismo que el de ahora. Es el mismo, pero aquí puede diseñar los componentes más rápidamente, como el siguiente:

Diseño dividido

En cuanto al diseño dividido, no está disponible de forma predeterminada. Para usarlo, primero seleccione el control que se colocará en QSplitter. En este momento, el icono del diseño dividido se vuelve más brillante y luego seleccione el diseño horizontal o vertical.

Utilice la propiedad handleWidth para ajustar el espacio entre componentes. De forma predeterminada, opaqueResize en la propiedad está marcada (marcada). Cuando usa el mouse para arrastrar el límite entre las subventanas divididas, la subventana cambiará dinámicamente su tamaño. Sin embargo, si desea cambiar el tamaño cuando suelta el mouse, puede configurar los siguientes parámetros y desmarcarlo. El efecto es el siguiente (marque a la izquierda):

Eso es todo para escribir sobre componentes o herramientas relacionados con el diseño. Aquí hay algunos ejemplos que hice.

2. Hoja de estilo Qt QSS

Qt viene con una función QSS puramente natural, que es la versión Qt de CSS. Incluso si no tienes un artista, puedes crear fácilmente una interfaz interesante. Para obtener la documentación oficial completa, puedes ver el enlace azul al principio del texto. Aquí, solo se presenta la sintaxis comúnmente utilizada.

1. Sintaxis de la hoja de estilo

Tipo de selector

Me pregunto si alguna vez ha configurado una imagen de fondo en una interfaz, pero el fondo de los componentes de la interfaz, como los botones, también se configurará en la imagen de fondo, como se muestra en la siguiente figura. Este es un problema causado por el selector.

El marco de la figura se llama selector, lo que significa que la configuración de la hoja de estilo solo es válida para este selector. El marco en la imagen de arriba es el nombre del objeto de un formulario. Si el selector es un nombre de objeto de instancia de clase específica, debe estar representado por # al frente. También puede cambiar #frame en la imagen a QFrame (nombre del tipo). La diferencia es que el primero solo tiene efecto en una forma específica, y el segundo tiene efecto en todas las clases de QFrame y sus subclases. Además de esto, existen los siguientes selectores:

?QPushButton[flat="false"]: Coincide con instancias de QPushButton no planas.

?.QPushButton: Coincide con instancias de QPushButton, pero no con sus subclases, tenga en cuenta el punto anterior.

?QPushButton#okButton: Coincide con todas las instancias de QPushButton cuyo nombre de objeto es okButton.

?QDialog QPushButton: Coincide con todas las instancias de QPushButton que son descendientes (hijos, etc.) de QDialog.

?QDialog > QPushButton: Coincide con todas las instancias de QPushButton que son descendientes directos de QDialog.

declaración

QPushButton{color:rgb(255, 0, 0);} 
/*括号里面的color:rgb(255, 0, 0);被称为声明。*/
/*该语句的意思是将QPshButton类的按钮中的字体设置为红色。*/
QPushButton{background-color: rgb(0, 170, 255);}
/*该语句的意思是将QPshButton类的按钮的背景色设置为蓝色。*/

Si hace lo anterior, el color de fuente del botón se puede ver antes de la compilación, pero es posible que no se muestre el fondo del botón. Debe compilarse antes de poder mostrarse. En este caso, puede agregar border-radius:0px; , para que el botón Se muestre el color de fondo, el motivo específico no está muy claro. Y border-radius:0px; significa el radio del borde. A medida que el valor aumenta cada vez más, el botón se vuelve cada vez más redondeado~~, como se muestra a continuación.

?Subcontrol

Como se muestra arriba, el componente QTabWidget tiene su prototipo como se muestra a continuación. Para componentes de ventana con estilos complejos (que se componen de varios componentes pequeños), debe acceder a los subcontroles del widget, usar la hoja de estilo por separado y directamente a la derecha. -Haga clic en él. QTabWidget usando hojas de estilo no está disponible.

Por ejemplo, el rojo es la pestaña del widget, QTabBar o QToolBox, y el azul es el panel, el panel (marco) de QTabWidget. Si desea lograr el efecto en la imagen, debe configurar la hoja de estilo por separado.

pseudo estado

¿Cuál es el propósito del pseudo estado? Se utiliza para efectos dinámicos en la interfaz. Se utiliza para detectar una serie de acciones, como pasar el mouse sobre un botón y presionar el mouse. Los efectos dinámicos producidos por dicha serie de acciones.

El efecto puede ser demasiado grande, pero a efectos de demostración, no importa.

? Pasar el cursor: pasar el cursor ? Sin pasar el cursor:! pasar el cursor ? Pasar el cursor y marcar: pasar el cursor: marcar ? Pasar el cursor y presionar: pasar el cursor:! presionado

Si desea modificar el color del borde del cuadro de entrada en la imagen, puede usar

border-style:solid;
border-color: rgb(170, 170, 255);

La premisa es definir el estilo de borde como el siguiente tipo (el tipo predeterminado es ninguno, sin borde, que no se mostrará incluso si se usa el color del borde):

?Ninguno no define fronteras. ?oculto Igual que "ninguno". Excepto cuando se aplica a tablas, en las que se utiliza oculto para resolver conflictos de límites. ?punteado define un borde punteado. Se representa como una línea continua en la mayoría de los navegadores. ?discontinuo define una línea discontinua. Se representa como una línea continua en la mayoría de los navegadores. ?sólido define una línea continua. ?double define líneas dobles. El ancho de la línea doble es igual al valor del ancho del borde. ?surco define el borde del surco 3D. El efecto depende del valor del color del borde. ?ridge define un borde de cresta 3D. El efecto depende del valor del color del borde. ?inset define el borde insertado 3D. El efecto depende del valor del color del borde. ?outset define el borde inicial 3D. El efecto depende del valor del color del borde.