qt 布局学习笔记

AI视觉网奇2024-05-28 17:36

目录

qt下载地址：

[widget 宽高](#widget 宽高)

管理信息列表源码

c++版：

pro文件：

[qt 设置水平布局，里面有两个按钮，每个按钮就变的很宽，怎么设置按钮的精确位置](#qt 设置水平布局，里面有两个按钮，每个按钮就变的很宽，怎么设置按钮的精确位置)

设置固定大小：

使用弹性空间（Spacer）

使用布局比例：

[qt c++ 加载ui文件：](#qt c++ 加载ui文件：)

[方法1: 使用Qt Designer UI文件直接加载](#方法1: 使用Qt Designer UI文件直接加载)

[方法2: 将UI文件转换为C++代码](#方法2: 将UI文件转换为C++代码)

qt下载地址：

Download Qt: Install and get started

widget 宽高

管理信息列表源码

python 复制代码 
import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QListWidget, QListWidgetItem, QLabel, QWidget, QVBoxLayout, QHBoxLayout
from PyQt5.QtGui import QPixmap
from PyQt5.QtCore import QSize

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Student Information List")
        self.setGeometry(100, 100, 450, 400)

        self.listWidget = QListWidget(self)
        self.setCentralWidget(self.listWidget)

        # 示例数据
        students = [
            {"name": "John Doe", "id": "123456789", "gender": "Male", "age": "20", "height": "180cm", "avatar": "res/drawable/head.png"},
            {"name": "Jane Smith", "id": "987654321", "gender": "Female", "age": "22", "height": "170cm", "avatar": "res/drawable/head.png"},
            {"name": "aaaa", "id": "fsadf", "gender": "sfd", "age": "sdf", "height": "170cm", "avatar": "res/drawable/head.png"},
            # 添加更多学生数据
        ]

        for student in students:
            self.add_student(student)

    def add_student(self, student):
        # 创建一个自定义的QWidget
        widget = QWidget()
        hbox = QHBoxLayout()
        hbox.setContentsMargins(10, 0, 10, 0)
        hbox.setSpacing(5);
        # 头像
        label_avatar = QLabel()
        pixmap = QPixmap(student["avatar"]).scaled(75, 82)  # 假设头像图片的路径正确
        label_avatar.setPixmap(pixmap)

        label_avatar.setFixedSize(80, 90)

        hbox.addWidget(label_avatar)

        # 其他信息
        info_widget = QWidget()
        vbox = QVBoxLayout()

        # 第一行信息：名字和身份证号
        label_name_id = QLabel(f"姓名：{student['name']} 性别：{student['gender']}, {student['id']}")

        label_name_id.setFixedSize(300, 20)

        vbox.addWidget(label_name_id)

        # 第二行信息：性别，年龄，身高
        label_details = QLabel(f"类型：{student['age']}  单位：{student['age']} years old, {student['height']}")

        label_details.setFixedSize(300, 20)
        vbox.addWidget(label_details)

        # 第二行信息：性别，年龄，身高
        label_details = QLabel(f"职务：{student['age']}  证件号：{student['age']} years old, {student['height']}")

        label_details.setFixedSize(300, 20)
        vbox.addWidget(label_details)

        vbox.setContentsMargins(10, 10, 10, 10)
        vbox.setSpacing(5);
        info_widget.setLayout(vbox)
        hbox.addWidget(info_widget)
        widget.setLayout(hbox)

        # 将自定义widget加入到QListWidgetItem中
        item = QListWidgetItem()
        item.setSizeHint(widget.sizeHint())  # 必须设置sizeHint
        self.listWidget.addItem(item)
        self.listWidget.setItemWidget(item, widget)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())

c++版：

main.cpp

cpp 复制代码 
#include <QApplication>
#include <QMainWindow>
#include <QListWidget>
#include <QListWidgetItem>
#include <QWidget>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QLabel>
#include <QPixmap>

// 示例数据
struct Student {
    QString name;
    QString id;
    QString gender;
    QString age;
    QString height;
    QString avatar;
};

class MainWindow : public QMainWindow {
public:
    MainWindow(QWidget *parent = nullptr) : QMainWindow(parent) {
        setWindowTitle("Student Information List");
        setGeometry(100, 100, 450, 400);

        auto listWidget = new QListWidget(this);
        setCentralWidget(listWidget);



        QVector<Student> students = {
            {"John Doe", "123456789", "Male", "20", "180cm", "111.jpg"},
            {"Jane Smith", "987654321", "Female", "22", "170cm", "111.jpg"},
            {"aaaa", "fsadf", "sfd", "sdf", "170cm", "111.jpg"}
            // 添加更多学生数据
        };

        for (auto &student : students) {
            addStudent(student, listWidget);
        }
    }

    void addStudent(const Student &student, QListWidget *listWidget) {
        auto widget = new QWidget();
        auto hbox = new QHBoxLayout(widget);
        hbox->setContentsMargins(10, 0, 10, 0);
        hbox->setSpacing(5);

        // 头像
        auto labelAvatar = new QLabel();
        QPixmap pixmap(student.avatar);
        labelAvatar->setPixmap(pixmap.scaled(75, 82));
        labelAvatar->setFixedSize(80, 90);
        hbox->addWidget(labelAvatar);

        // 其他信息
        auto infoWidget = new QWidget();
        auto vbox = new QVBoxLayout(infoWidget);

        // 第一行信息：名字和身份证号
        auto labelNameId = new QLabel(QString("姓名：%1 性别：%2, %3").arg(student.name, student.gender, student.id));
        labelNameId->setFixedSize(300, 20);
        vbox->addWidget(labelNameId);

        // 第二行信息：年龄，身高
        auto labelDetails = new QLabel(QString("年龄：%1 years old, 身高：%2").arg(student.age, student.height));
        labelDetails->setFixedSize(300, 20);
        vbox->addWidget(labelDetails);

        vbox->setContentsMargins(10, 10, 10, 10);
        vbox->setSpacing(5);
        hbox->addWidget(infoWidget);

        auto item = new QListWidgetItem();
        item->setSizeHint(widget->sizeHint());
        listWidget->addItem(item);
        listWidget->setItemWidget(item, widget);
    }
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    MainWindow window;
    window.show();
    return app.exec();
}

pro文件：

bash 复制代码 
QT       += core gui
QT += core gui widgets
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

CONFIG += c++11

# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
    main.cpp

HEADERS += \
    mainwindow.h

FORMS += \
    mainwindow.ui

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

qt 设置水平布局，里面有两个按钮，每个按钮就变的很宽，怎么设置按钮的精确位置

设置固定大小：

  • 可以为按钮设置固定的宽度和高度，这样按钮就不会根据布局自动调整大小了。
cpp 复制代码 
QPushButton *button1 = new QPushButton("Button 1");
QPushButton *button2 = new QPushButton("Button 2");

button1->setFixedSize(100, 30); // 设置按钮的固定大小
button2->setFixedSize(100, 30);

QHBoxLayout *layout = new QHBoxLayout;
layout->addWidget(button1);
layout->addWidget(button2);

使用弹性空间（Spacer）

  • ： 你可以在按钮之间或按钮周围添加空间，这样可以更精确地控制按钮的位置。
cpp 复制代码 
QPushButton *button1 = new QPushButton("Button 1");
QPushButton *button2 = new QPushButton("Button 2");

QHBoxLayout *layout = new QHBoxLayout;
layout->addStretch(1); // 在布局开始处添加弹性空间
layout->addWidget(button1);
layout->addStretch(1); // 在两个按钮之间添加弹性空间
layout->addWidget(button2);
layout->addStretch(1); // 在布局结束处添加弹性空间

使用布局比例：

  • 使用 QSizePolicy 来设置控件的大小策略，允许更细致的控制。
cpp 复制代码 
QPushButton *button1 = new QPushButton("Button 1");
QPushButton *button2 = new QPushButton("Button 2");

button1->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Fixed);
button2->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Fixed);

QHBoxLayout *layout = new QHBoxLayout;
layout->addWidget(button1, 1);
layout->addWidget(button2, 1);

qt c++ 加载ui文件：

方法1: 使用Qt Designer UI文件直接加载

在这种方法中，你可以使用QUiLoader类来动态加载UI文件。这种方式的优点是你可以在不重新编译程序的情况下更改UI设计，但缺点是可能会增加程序的启动时间和复杂性。

  1. 包括必要的头文件：

    复制代码 
    #include <QUiLoader> 
#include <QFile> 
#include <QWidget>

  2. 加载.ui文件： 你可以创建一个函数来加载UI文件，并返回一个指向加载的界面的指针。

    cpp 复制代码 
    QWidget* loadUiFile(QWidget* parent)
{
    QFile file(":/path/to/your.ui");
    file.open(QFile::ReadOnly);

    QUiLoader loader;
    QWidget* formWidget = loader.load(&file, parent);
    file.close();

    return formWidget;
}

  3. 在主窗口中使用加载的UI：

cpp 复制代码 
#include <QApplication>
#include <QVBoxLayout>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QWidget window;

    QWidget* myForm = loadUiFile(&window);

    QVBoxLayout* layout = new QVBoxLayout;
    layout->addWidget(myForm);
    window.setLayout(layout);

    window.show();
    return app.exec();
}

方法2: 将UI文件转换为C++代码

Qt提供了一个名为uic的工具，它可以将UI文件转换为C++类。这种方法的优点是执行效率更高，因为UI直接编译到程序中，但缺点是每次UI改变都需要重新编译。

  1. 在.pro文件中添加UI文件： 将UI文件添加到Qt项目文件中以自动调用uic工具。

    复制代码 
    FORMS += mainwindow.ui

  2. 使用转换后的类 ： uic工具会生成一个头文件，通常命名为ui_<filename>.h，你可以在你的C++类中包含这个文件，并使用其中的类。

cpp 复制代码 
#include "ui_mainwindow.h"

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr)
    {
        ui.setupUi(this);
    }

private:
    Ui::MainWindow ui;
};
  1. 在主函数中创建和显示窗口：
cpp 复制代码 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    MainWindow mainWindow;
    mainWindow.show();
    return app.exec();
}

这两种方法可以根据不同的开发需求选择使用。如果需要灵活性和频繁的UI更改，推荐使用方法1；如果追求性能和稳定性，推荐使用方法2。

相关推荐
前端小趴菜0534 分钟前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~2 小时前
styled-components：现代React样式解决方案
前端·react.js·前端框架
kangkang-2 小时前
PC端基于SpringBoot架构控制无人机(三):系统架构设计
java·架构·无人机
段帅龙呀2 小时前
Redis构建缓存服务器
服务器·redis·缓存
乌鸦不像写字台2 小时前
【docker部署】在服务器上使用docker
服务器·docker·容器
sasaraku.2 小时前
serviceWorker缓存资源
前端
RadiumAg3 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
界面开发小八哥3 小时前
「Java EE开发指南」如何用MyEclipse创建一个WEB项目？（三）
java·ide·java-ee·myeclipse
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
热门推荐
01集群聊天服务器---MySQL数据库的建立02Java学习第十五部分——MyBatis03Coze扣子平台完整体验和实践（附国内和国际版对比）04《深入设计模式》模式结构汇总05使用Ruby接入实时行情API教程06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07基于odoo17的设计模式详解---单例模式08基于odoo17的设计模式详解---装饰模式09DeepSeek各版本说明与优缺点分析10Everything文件检索工具 几秒检索几百G的文件