Pruebas de software | Configuración y uso de QtDesigner

Introducción

En el artículo anterior, presentamos la instalación y configuración del entorno PyQt5 e instalamos las herramientas Qt. En este artículo, presentaremos cómo usar QtDesigner de las herramientas Qt.

Empezando con QtDesigner

1. Abre nuestro proyecto
2. Seleccione: en la barra de menú superior Tools -> ExternalTools -> QtDesignery aparecerá la siguiente ventana de ejecución de QtDesigner, como se muestra a continuación:

La interfaz de QtDesigner es la siguiente:

3. Nueva forma

QtDesignerEl cuadro de diálogo "Nuevo formulario" puede aparecer automáticamente cuando se ejecuta por primera vez. También puede seleccionar "Archivo->Nuevo" a través de la barra de menú o usar la tecla de acceso directo "Ctrl+N" para invocar el cuadro de diálogo "Nuevo formulario". caja .
Seleccione "Ventana principal" en el menú de la izquierda de la ventana "Nuevo formulario" para crear una nueva ventana gráfica, como se muestra a continuación:

4. Diseñar una nueva interfaz

QtDesignerLa interfaz de usuario es muy intuitiva. La interfaz principal está dividida en tres partes: izquierda, central y derecha. A la izquierda hay varios objetos de control alternativos. El "Visor de objetos" en la parte superior derecha muestra la estructura de árbol del control. El Editor de propiedades "en la parte inferior derecha" muestra varias propiedades del control y la parte central se utiliza para mostrar la interfaz diseñada. A continuación agregamos varios controles gráficos a la nueva ventana gráfica:

botón agregar

Seleccione el botón del Botón en la barra de control izquierda PushButton, haga clic en el botón con el botón izquierdo del mouse PushButton, mueva el mouse y PushButtonarrastre el botón a cualquier posición en la nueva ventana gráfica en el medio, suelte el botón izquierdo del mouse y el botón se generará en la posición de la ventana gráfica. Un PushButtonobjeto de botón, como se muestra a continuación:

Haga clic en el objeto del botón PushButton en la ventana gráfica con el botón izquierdo del mouse y arrastre el botón para ajustar la posición del control. Para otros controles, también puede ajustar la posición arrastrando el mouse.

Cuando se selecciona el objeto del botón PushButton con el mouse, aparecerán 8 puntos azules en el borde alrededor del control, lo que indica que el control está seleccionado. En este momento, las propiedades del objeto se pueden editar y modificar en el "Editor de propiedades" a la derecha, por ejemplo

• Modifique la altura del objeto PushButton a 50 y el ancho a 150
• Cambie el "QAbstractButton->text" del objeto PushButton a "PLAY";

Agregar control de texto

• InputWidgetSeleccione el botón de la barra de control izquierda TextEdit, seleccione el botón con el botón izquierdo del mouse TextEdity arrástrelo a la nueva ventana gráfica. Suelte el botón izquierdo del mouse para generar un objeto TextEdit en la ventana gráfica.
• Seleccione el objeto TextEdit con el mouse y podrá editar y modificar las propiedades del objeto en el "Editor de propiedades" a la derecha, por ejemplo:
  • Modifique la altura del objeto TextEdit a 200 y el ancho a 300;
  • El contenido mostrado del objeto TextEdit se puede editar en html, markdown y otros formatos. También puede hacer doble clic en el objeto TextEdit para abrir el cuadro de diálogo de edición html e ingresar el contenido que desea mostrar.

En los pasos anteriores, hemos logrado la creación y edición de una página básica.

5. Guarde la interfaz gráfica diseñada como .uiun archivo

Utilice las teclas de método abreviado Ctrl+spara guardar el archivo. Le damos al archivo el nombre qt_demo1.ui. La configuración predeterminada del proyecto de este artículo también guarda el archivo .py en el subdirectorio \program en la ruta actual del proyecto. El archivo de interfaz gráfica se puede importar directamente durante la programación de la aplicación.
Si las rutas para guardar archivos establecidas por PyChrm o QtDesigner son diferentes, preste atención a configurar y utilizar la ruta correcta al importar el archivo de interfaz gráfica.