一、项目(框架建立)（一）ui布局及QSS1、嵌入式设备界面2、windows软件界面3、pad界面4、QSS使用4.1 将QSS文件添加到项目中4.2 在项目的资源中添加该文件4.3 在构造函数中通过路径读取QSS文件QString qss; QFile qssFile(":/res/qss/white.qss"); qssFile.open(QFile::ReadOnly); if(qssFile.isOpen()) { qss=QLatin1String(qssFile.readAll()); this-setStyleSheet(qss); qssFile.close(); }参考初学Qt不会样式表怎么办，打包好的Qt样式表一键生成送给你https://blog.csdn.net/Fdog_/article/details/108296647?spm=1001.2014.3001.5506资源收集的QSS皮肤风格文件https://download.csdn.net/download/weixin_58619060/88862911QSS组件皮肤生成器https://download.csdn.net/download/weixin_58619060/88862945Qt的项目框架参考https://download.csdn.net/download/weixin_58619060/88862929QSS-Skin-Builder皮肤生成器及其相关框架https://download.csdn.net/download/weixin_58619060/88862959（二）创建资源文件并显示图片第一步：创建文件夹，把图片保存到自己的工程目录下图片名称为image1.png，我这里放在了image文件夹中第二步：添加qrc资源文件选中项目右键，添加新文件选择Qt Resource File，点击Choose然后给资源文件qrc取个名字，我这里取的名字是ret第三步：给资源文件添加具体图片右键ret.qrc，Open in Editor然后会显示image.qrc这个窗口，点击下面添加前缀按钮注：可以添加前缀也可以不用添加前缀，添加前缀是为了更好区分资源。前缀名如果不知道起什么，就用“/”即可，然后点击add files然后，就可以点击添加文件。此时会弹出选择框让我们选择。注：路径太长有2种方式更改路径名1、直接更改真实文件名缺点：1、要修改大量图片真实文件名，操作复杂。2、图片会直接跳出创建的资源文件夹外面(此处是image文件夹)可以看到，资源文件中image文件已经没有，而且改名为1.png后直接出现在image文件夹外面，此时image文件夹完全没有作用2、为文件取别名优点：1、 如果要更改大量同种类型文件路径，不需要关心文件真实文件名。2、图片不会跳出资源文件夹外面第四步：使用图片并显示我们选择设计模式，在窗口界面中，选中要显示图片的label （效果如下图蓝色虚框），右键---修改样式表点击添加资源，选择border-image或者image（为什么选择？详细如下）关于background-image、border-image、image的说明1、background-imagesetStyleSheet("background-image:url(:/image/image1.png);");特点：不会自动适应图片，如果图片过小，将会图片裁剪填充其他区域；过大，截取一部分区域填充（平铺）效果如下：2、border-imagesetStyleSheet("border-image:url(:/image/image1.png);");特点：会自适应部件区域大小，可以有拉伸效果但是会让边框不可见，如下图蓝色边框消失效果如下：3、imagesetStyleSheet("image:url(:/image/image1.png);");特点：会自适应部件区域大小，不可以有拉伸效果，哪条边最小长宽自适应哪条边效果如下：（三）主页ToolBar（工具栏）的创建和设置1、项目创建QMainWidget2、为ToolBar添加控件首先创建一个主窗口ui，默认带有一个TooBar（工具栏），在ui界面拖动四个ToolButton按钮，并为四个按钮添加图标。3、添加代码，让这四个按钮出现在工具栏上面//ui-toolBar 是我们的工具栏 ui-toolBar-addWidget(ui-toolButton); ui-toolBar-addWidget(ui-toolButton_2); ui-toolBar-addWidget(ui-toolButton_3); ui-toolBar-addWidget(ui-toolButton_4);效果如下：4、常用属性movable 属性该属性属性用来确认toolBar是否可以移动，该属性默认trueui界面设置：代码可通过isMovable()和setMovable()，访问和设置该属性allowedAreas 属性该属性指定工具栏允许移动的范围，默认值是AllToolBarAreas，其余五个值分别是窗口左边，右边，菜单下，底部状态栏之上，以及NoToolBarArea（没有设定工具栏区域，意味着你可以把它任意地方）ui界面设置：代码可通过allowedAreas() 和setAllowedAreas，访问和设置该变量iconSize 属性该属性设置图标栏，大小ui界面设置：toolButtonStyle 属性该属性指定按钮显示模式，默认为ToolButtonIconOnly（仅显示图标）其他四个值分别为：ToolButtonTextOnly（只显示文字）ToolButtonTextBesideIcon（文字在图标旁）ToolButtonTextUnderIcon（文字在图标下）ToolButtonFollowStyle（根据QStyle::StyleHint格式显示，我们没有设置StyleHint，所以和默认一样）ui界面设置：代码可通过toolButtonStyle()和setToolButtonStyle()，访问和设置该属性此属性定义所有作为QAction添加的工具按钮的样式。请注意，如果使用addWidget（）方法添加QToolButton，它将不会获得此按钮样式要使工具按钮的样式遵循系统设置，请将此属性设置为Qt :: ToolButtonFollowStylefloatble 属性该属性保存是否可以将工具栏作为独立窗口进行拖放，默认是true当设置为false，虽然鼠标可以拖动工具栏，但无法独立出来ui界面设置：代码可通过isFloatable()和setFloatable()，访问和设置该属性arrowType属性该属性是按钮是否显示箭头从而代替普通图标，默认值是NoArrow，如果将其设置为DownArrow，则如下图所示，此外还有其他朝向三个方向箭头的值供选择注意：当设置该属性，按钮上已存在的图标，文字等都会被覆盖ui界面可设置：代码可通过arrowType()和setArrowType()，访问和设置该属性autoRaise属性该属性决定按钮是否有边框，默认值是False，与正常按钮一样，当设置为true时，如下图：当鼠标划过时，会自动弹起代码可通过autoRaise()和setAutoRaise()，访问和设置该属性popupMode属性该属性可设置弹出菜单的方式，默认是DelayedPopup（值为0，按下按钮一定时间后，显示菜单）首先需要有下拉菜单才能看到效果QMenu *menu=new QMenu(this); menu-addAction(QIcon(":/image/image2.png"),"工程0",this,SLOT(doSlot())); menu-addAction(QIcon(":/image/image2.png"),"工程1",this,SLOT(doSlot())); menu-addAction(QIcon(":/image/image2.png"),"工程2",this,SLOT(doSlot())); menu-addAction(QIcon(":/image/image2.png"),"工程3",this,SLOT(doSlot())); menu-addAction(QIcon(":/image/image2.png"),"工程4",this,SLOT(doSlot())); menu-addAction(QIcon(":/image/image2.png"),"工程5",this,SLOT(doSlot())); menu-addAction(QIcon(":/image/image2.png"),"工程6",this,SLOT(doSlot())); ui-toolButton-setMenu(menu);此时会出现“箭头”下标并且有下拉项，如下图：（1）InstantPopup：鼠标放在ToolButton上，延时几秒后弹出下拉项（2）MenuButtonPopup：会在右侧出现一个下拉“箭头”，只有点击“箭头”才能弹出下拉项，点击ToolButton则不会弹出下拉项（3）InstantPopup：点击ToolButton则立即弹出下拉项ui界面可设置：代码可通过popupMode()和setPopupMode()，访问和设置该属性（四）同一窗口下的多个页面切换1、使用QStackedWidget1.1 创建StackedWdiget注意：刚拖拽的StackedWdiget默认是有两个page页的，所以currentIndex(0)和currentIndex(1)已经存在，当我们addWidget后通过currentIndex(2)才能访问刚刚加入的widget窗口。也可以将默认的2个page删除重新从currentIndex(0)开始1.2 创建新的Widget并加入StackWidget中，点击切换#include "widget.h" #include "ui_widget.h" #include "ui_form.h" Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); page1 = new Form(this); page1-ui-groupBox-setTitle("page1"); page2 = new Form(this); page2-ui-groupBox-setTitle("page2"); //将两个widget添加至stackedWidget ui-stackedWidget-addWidget(page1); ui-stackedWidget-addWidget(page2); //设置stackedWidget当前展示页面 ui-stackedWidget-setCurrentIndex(0); } Widget::~Widget() { delete ui; } void Widget::on_pushButton_clicked() { ui-stackedWidget-setCurrentIndex(0); } void Widget::on_pushButton_2_clicked() { ui-stackedWidget-setCurrentIndex(1); }效果如下：注意：想要页面自适应窗口，必须将StackWidget和Page页面都做成自适应窗口，如下所示：2、使用QStackedLayout2.1 创建一个container容器，这里是拖拽的Widget容器2.2 将自定义类加入容器中#include "widget.h" #include "ui_widget.h" #include "ui_form.h" #include QVBoxLayout Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); page1 = new Form(this); page1-ui-groupBox-setTitle("page1"); page2 = new Form(this); page2-ui-groupBox-setTitle("page2"); //创建QStackedLayout，并将Page加入QVBoxLayout layout = new QStackedLayout(ui-widget);//指定父类(自己拖拽的Widget组件),Widget组件里放一个QStackedLayout，也可以写成如下所示 // ui-widget-setLayout(layout); //将page1、page2加入到layout中 layout-addWidget(page1); layout-addWidget(page2); } Widget::~Widget() { delete ui; } void Widget::on_pushButton_clicked() { layout-setCurrentIndex(0); } void Widget::on_pushButton_2_clicked() { layout-setCurrentIndex(1); }（五） 带滑动条的窗口1、选择QT Creator左侧类栏中的Scroll Area，拖放到UI上，调整大小覆盖UI注意：当拖拽QScrollArea时，它里面还存在一个QWdiget，我们的内容就放在QWidget里面2、修改scrollArea其中三个属性，具体如下图：verticalScrollBarPolicy设置为ScrollBarAlwaysOn：开启垂直滚动条horizontalScrollBarPolicy设置为ScrollBarAlwaysOn：开启水平滚动条widgetResizable设置为空：不会自动调整部件QWidget的大小，这样设置使QWdiget长宽都能超过QScrollArea的长宽，这样可以利用额外空间3、修改scrollAreaWidgetContents(QWidget)的大小