2020-10-08-qt之ui设计

qt之ui设计

本博客持续更新,灵感主要来自b站某up主的视频与代码。
主要是qt的一些控件ui设计。
当然自己也可以重写控件来实现相应功能

qt 页面切换

主要是用一个主页面,监听与执行按钮发出的信号。然后执行相应的槽函数,也可以写Lambda表达式,{}

qt界面主要有mainwindowswidget两种,当然现在一般不纯用代码来实现相应界面的功能,一般配合设计师界面一起来使用

ui设计

先在pro文件里面添加

#添加资源文件过大导致
CONFIG += resources_big

styleSheet里面设置一些ui设计,格式和css很像

编辑框样式

如下图:
在这里插入图片描述

QLineEdit{
background:transparent;
border:none;
color:#717072;
font-size:32px;
font-family:Microsoft JhengHei;
border-bottom:1px solid #717072;
}

按钮样式

如下图:
在这里插入图片描述

QPushButton{
background:#96CA2D;
border-radius:15px;
font-size:25px;
font-family:Microsoft JhengHei;
}
QPushButton:hover{
background:#168039;
border-radius:10px;
font-size:25px;
font-family:Microsoft JhengHei;
}
好的,下面是一个使用Qt实现科技感Windows软件界面的示例代码: ```cpp #include <QApplication> #include <QWidget> #include <QLabel> #include <QHBoxLayout> #include <QVBoxLayout> int main(int argc, char *argv[]) { QApplication app(argc, argv); // 创建主窗口 QWidget *mainWindow = new QWidget(); mainWindow->setWindowTitle("科技感Windows软件界面"); // 创建顶部区域 QLabel *titleLabel = new QLabel("欢迎使用科技感Windows软件界面"); titleLabel->setObjectName("titleLabel"); QLabel *logoLabel = new QLabel(); QPixmap logoPixmap(":/images/logo.png"); logoLabel->setPixmap(logoPixmap.scaled(64, 64)); logoLabel->setObjectName("logoLabel"); QHBoxLayout *topLayout = new QHBoxLayout(); topLayout->addWidget(titleLabel); topLayout->addStretch(); topLayout->addWidget(logoLabel); // 创建中间区域 QLabel *contentLabel = new QLabel("这是一个使用Qt实现的科技感Windows软件界面"); contentLabel->setObjectName("contentLabel"); // 创建底部区域 QLabel *bottomLabel = new QLabel("版权所有 © 2021 科技感Windows软件界面"); bottomLabel->setObjectName("bottomLabel"); // 创建布局 QVBoxLayout *mainLayout = new QVBoxLayout(); mainLayout->addLayout(topLayout); mainLayout->addWidget(contentLabel); mainLayout->addWidget(bottomLabel); // 设置样式 QFile styleFile(":/qss/style.qss"); styleFile.open(QFile::ReadOnly); QString style = QLatin1String(styleFile.readAll()); app.setStyleSheet(style); // 设置主窗口布局 mainWindow->setLayout(mainLayout); mainWindow->show(); return app.exec(); } ``` 需要注意的是,上面的代码中使用了样式表文件 `style.qss`,该文件包含了界面的样式定义,可以在Qt Creator中创建一个新的QSS文件,编写样式定义。 希望这个示例代码可以帮到您。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值