近期学习了Qt,使用到了自定义控件方法。需要写一个类,在类中实现控件的组合和样式调整。
本次使用的是VS2019进行Qt项目创建。首先右键点击Source Files->添加->新建项完成一个新的继承自QWidget类的创建。
双击.ui文件,用Qt Creator打开之后,完成一个spinBox和horizontalSlider的控件组合,并在widget中水平布局。并且通过信号/槽机制,将两个控件的值进行绑定,即slider发生滑动时,spinBox中的值也会跟着改变。
右键点击控件,可以选择改变样式表,本次Slider的样式表改称为:
QSlider::groove:horizontal {
border: 1px solid #bbb;
background: white;
height: 10px;
border-radius: 4px;
}
QSlider::sub-page:horizontal {
background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,
stop: 0 #bbf, stop: 1 #55f);
background-color: rgb(0, 255, 0);
border: 1px solid #777;
height: 10px;
border-radius: 4px;
}
QSlider::add-page:horizontal {
background: #fff;
border: 1px solid #777;
height: 10px;
border-radius: 4px;
}
QSlider::handle:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
stop:0 #eee, stop:1 #ccc);
border: 1px solid #777;
width: 13px;
margin-top: -2px;
margin-bottom: -2px;
border-radius: 4px;
}
QSlider::handle:horizontal:hover {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
stop:0 #fff, stop:1 #ddd);
border: 1px solid #444;
border-radius: 4px;
}
QSlider::sub-page:horizontal:disabled {
background: #bbb;
border-color: #999;
}
QSlider::add-page:horizontal:disabled {
background: #eee;
border-color: #999;
}
QSlider::handle:horizontal:disabled {
background: #eee;
border: 1px solid #aaa;
border-radius: 4px;
}
改变样式表后,控件会显得更好看一点,这篇博客详细讲述了QSlider的样式设计方法。
关于样式表的学习博客
完成自定义控件类的封装后,在另一个ui中添加一个widget,将其提升为封装的类。注意不要勾选全局包含,勾选之后会程序运行时会报错,“窗口部件提升后no such file or dictionary”
1.参考这篇博客解决了问题
2.这个也可以解决但是每次都需要改,稍微有点麻烦
QScrollArea的使用方法和注意事项
在使用QScrollArea时发现,里面的widget需要大于QScrollArea尺寸,且QScrollArea需要设置布局之后才能显示滚动条,否则不显示。