En el capítulo anterior, usamos códigos para diseñar directamente la interfaz. En este capítulo, usamos Qt Designer para diseñar la interfaz. Es simple y directo, y lo que ves es lo que obtienes, lo que mejora enormemente la eficiencia del trabajo, especialmente para interfaces complejas.
1 Familiarizado con Qt Designer
Qt Designer es un software diseñado por Qt para el diseño de interfaz, que permite a los usuarios organizar directamente la interfaz arrastrando y soltando, y luego Qt Creator puede convertir la interfaz de Qt Designer en código C++. Qt también incorporó Qt Designer en Qt Creator, lo que permite a los usuarios alternar entre la interfaz y el código en un editor. En el proyecto HelloWorld creado anteriormente, haga doble clic en mainwindow.ui y aparecerá la siguiente interfaz:
Así es como se ve el Qt Designer incrustado en Qt Creator, pero dado que todos preferimos un tema negro cuando programamos con Qt Creator, esto hace que el Qt Designer incorporado sea oscuro, y los controles de arrastre no son muy claros, por lo que recomiendo que abra Qt Designer por separado para diseñar la interfaz. Qt Designer abierto por separado tiene un tema blanco y la interfaz es relativamente clara. ¡Vale!
Cómo abrir rápidamente Qt Designer en el proyecto, puede hacer esto: coloque el mouse en mainwindow.ui en el directorio del proyecto a la izquierda, haga clic con el botón derecho, seleccione "Abrir con ..." y luego seleccione Qt Designer, como se muestra en la siguiente figura:
El software Qt Designer abierto se muestra en la siguiente figura:
Incluso si nunca ha utilizado este software, puede comprender el contenido de cada componente del software de un vistazo. Simplifiquemos la interfaz, eliminemos las partes que no se usan comúnmente o que no se usan temporalmente, y tachemos las subinterfaces del editor de señales/ranuras, el editor de acciones y el navegador de recursos en la esquina inferior derecha del software, dejando el menú superior en el toda la barra de herramientas del software, el área de control a la izquierda, el área de diseño de la interfaz en el medio y el visor de objetos y el editor de propiedades a la derecha. El proceso de usar Qt Designer para diseñar una interfaz es más o menos el siguiente: ① Arrastre y suelte los controles requeridos desde el área de control al área de diseño de la interfaz; ② Luego, en el visor de objetos, puede ver los controles y el orden de los controles en el interfaz; ③Luego, en el editor de propiedades ④ Haga clic en la herramienta de diseño en la barra de herramientas superior para diseñar la interfaz; ⑤ Recuerde guardar, de lo contrario, Qt Creator no podrá obtener los últimos cambios en la interfaz.
2. Controles de arrastrar y soltar para el diseño
A continuación, usamos Qt Designer para diseñar la interfaz, mostramos las palabras "Hello World" en la ventana y luego usamos Qt Creator para compilar el programa para generar la ventana. No usamos la barra de menú y la barra de estado por el momento, primero elimínelas y luego siga los cinco pasos que se acaban de resumir, operamos como se muestra en la siguiente animación:
Coloqué un control de etiqueta, establecí la propiedad de texto de la etiqueta en "Hello World", establecí la alineación horizontal en el centro, luego hice clic en la ventana para seleccionar la ventana, luego hice clic en "Diseño horizontal" en la barra de herramientas para llenar la etiqueta en la ventana, cuando estira la ventana para el zoom de la ventana, "Hello World" siempre está en el centro de la ventana. Después de diseñar la interfaz (asegúrese de guardarla), cambie a Qt Creator para ejecutar el programa directamente, espere a que la compilación se complete y se ejecute, y aparecerá la siguiente ventana:
En este punto, se completa el proceso de usar Qt Designer para el diseño de la interfaz. A continuación, usamos Qt Designer para diseñar la interfaz del diseño horizontal de los tres controles escritos directamente por código en el capítulo anterior.Después de ejecutar el programa, la ventana se muestra en la siguiente figura:
Aquí hay una habilidad muy importante, que es establecer los atributos del diseño. Los atributos del diseño horizontal son los siguientes:
Como se muestra en la figura anterior, layoutName es el nombre de la variable del diseño horizontal. Este nombre de variable se puede usar directamente en el código y representa el control de diseño horizontal; los cuatro atributos de layoutLeftMargin, layoutTopMargin, layoutRightMargin y layoutBottomMargin son del tamaño de el límite de distancia de control en el diseño horizontal. ;layoutSpacing es la distancia entre controles en el diseño horizontal; layoutStretch es la relación de espacio asignada a cada control en el diseño horizontal de izquierda a derecha; layoutSizeConstraint es la regla de restricción de tamaño de espacio para el diseño horizontal . A continuación, establecemos la propiedad layoutStretch en 1, 3, 6 para ver el efecto de la interfaz, de la siguiente manera:
Cuando hace zoom en la ventana, encontrará que la proporción de espacio ocupado por los tres controles en la ventana se asigna de acuerdo con el 1:3:6 que configuramos. Esta técnica optimizará en gran medida su interfaz y hará que el diseño sea más razonable.
Con las habilidades anteriores, podemos jugar libremente y hacer que la interfaz sea más complicada. El siguiente es un sumador simple que diseñé, y la ventana después de ejecutarse es la siguiente:
3. Resumen
Este capítulo utiliza Qt Designer para el diseño de la interfaz, explica cómo arrastrar y soltar los controles, luego realiza el diseño horizontal y finalmente diseña un "sumador simple" relativamente complejo. En el próximo capítulo, tomaremos este "sumador simple" como ejemplo para aprender a programar y usar el control. Después de ingresar el sumando en la interfaz, haga clic en el botón "Calcular" para obtener el resultado y mostrarlo.