QScrollArea样式

2024-02-23 18:30
文章标签 样式 qscrollarea

本文主要是介绍QScrollArea样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

        简介

        QScrollBar垂直滚动条分为sub-line、add-line、add-page、sub-page、up-arrow、down-arrow和handle几个部分。
        QScrollBar水平滚动条分为sub-line、add-line、add-page、sub-page、left-arrow、right-arrow和handle几个部分。

部件如下图所示：

 样式详细说明

/* 整个滚动条区域样式 */
QScrollBar:vertical {border: 2px solid grey;background: #32CC99;width: 30px;/* 滑块活动区域间距，这个间距如果小于add-line和sub-line的高度或宽度滚动滑块将会覆盖add-line和sub-line，所以可以通过margin: 0px 0 0px 0;来隐藏滚动条两头区域*/margin: 32px 0 32px 0;
}/* 滑块区域样式 */
QScrollBar::handle:vertical {background: rgb(250, 3, 3);border: 2px solid rgb(8, 8, 8);border-radius: 10px;/*无效，宽度由QScrollBar width控制*/width: 10px;/*可以通过margin设置滑块小于QScrollBar width，再鼠标滑过滑块样式中再重新设置margin，达到鼠标滑过滑块变大的效果，但是圆角设置border-radius不生效了！！！*/margin: 0 5px 0 5px;min-height: 50px;/*max-height无效!!!*/max-height: 50px;
}/* 鼠标滑过滑块样式 */
QScrollBar::handle:vertical:hover,
QScrollBar::handle:vertical:pressed {border-radius: 10px;margin: 0 1px 0 1px;background: rgb(221, 81, 17);
}/* 向上区域样式 */
QScrollBar::sub-line:vertical {border: 2px solid rgb(18, 208, 221);background: #0c5a20;height: 30px;subcontrol-position: top;subcontrol-origin: margin;
}/* 向下区域样式 */
QScrollBar::add-line:vertical {border: 2px solid rgb(68, 218, 31);background: #123026;height: 30px;subcontrol-position: bottom;subcontrol-origin: margin;
}/* 向上箭头样式 */
QScrollBar::up-arrow:vertical {border-image:url(:/scrollarea/resources/image/scrollarea/arrowup.png);border: 2px solid rgb(22, 12, 68);width: 20;height: 20;background: rgb(130, 141, 165);
}/* 向下箭头样式 */
QScrollBar::down-arrow:vertical {border-image:url(:/scrollarea/resources/image/scrollarea/arrowdown.png);border: 2px solid rgb(223, 104, 104);width: 20;height: 20;background: rgb(233, 159, 177);
}/* 当鼠标放到向上区域的时候 */
QScrollBar::sub-line:vertical:hover {}/* 当鼠标放到向下区域的时候 */
QScrollBar::add-line:vertical:hover {}/* 当鼠标放到向上箭头上的时候 */
QScrollBar::up-arrow:vertical:hover {/* height:9px;width:8px; *//* border-image:url(:/images/a/2.png); */subcontrol-position: top;
}/* 当鼠标放到向下箭头上的时候 */
QScrollBar::down-arrow:vertical:hover {/* height:9px;width:8px; *//* border-image:url(:/images/a/4.png); */subcontrol-position: bottom;
}/* 滑块上面区域样式 */
QScrollBar::sub-page:vertical {background: rgb(117, 196, 13);border: 2px solid rgb(223, 104, 104);
}/* 滑块下面区域样式 */
QScrollBar::add-page:vertical {background: rgba(255, 102, 11);border: 2px solid rgb(223, 104, 104);
}/* ############################################ */
/* 整个滚动条区域样式 */
QScrollBar:horizontal {border: 2px solid grey;background: #32CC99;height: 30px;/* 滑块活动区域间距，这个间距如果小于add-line和sub-line的高度或宽度滚动滑块将会覆盖add-line和sub-line，所以可以通过margin: 0px 0 0px 0;来隐藏滚动条两头区域*/margin: 0 32px 0 32px;
}/* 滑块区域样式 */
QScrollBar::handle:horizontal {background: rgb(250, 3, 3);border: 2px solid rgb(8, 8, 8);/*无效，高度由QScrollBar height控制*/height: 10px;/*可以通过margin设置滑块小于QScrollBar height，再鼠标滑过滑块样式中再重新设置margin，达到鼠标滑过滑块变大的效果*/margin: 5px 0 5px 0;min-width: 50px;/*max-width无效!!!*/max-width: 50px;
}/* 鼠标滑过滑块样式 */
QScrollBar::handle:horizontal:hover,
QScrollBar::handle:horizontal:pressed {margin: 0 1px 0 1px;background: rgb(221, 81, 17);
}/* 向左区域样式 */
QScrollBar::sub-line:horizontal {border: 2px solid rgb(18, 208, 221);background: #0c5a20;width: 30px;/*sub-line:horizontal要设置height但是sub-line:vertical却不要设置width！！！*/height: 20px;subcontrol-position: left;subcontrol-origin: margin;
}/* 向右区域样式 */
QScrollBar::add-line:horizontal {border: 2px solid rgb(68, 218, 31);background: #123026;width: 30px;height: 20px;subcontrol-position: right;subcontrol-origin: margin;
}/* 向左箭头样式 */
QScrollBar::left-arrow:horizontal {border-image:url(:/scrollarea/resources/image/scrollarea/arrow-left.png);border: 2px solid rgb(22, 12, 68);width: 20;height: 20;background: rgb(130, 141, 165);
}/* 向右箭头样式 */
QScrollBar::right-arrow:horizontal {border-image:url(:/scrollarea/resources/image/scrollarea/arrowright.png);border: 2px solid rgb(223, 104, 104);width: 20;height: 20;background: rgb(233, 159, 177);
}/* 当鼠标放到向左区域的时候 */
QScrollBar::sub-line:horizontal:hover {}/* 当鼠标放到向右区域的时候 */
QScrollBar::add-line:horizontal:hover {}/* 当鼠标放到向左箭头上的时候 */
QScrollBar::left-arrow:horizontal:hover {/* height:9px;width:8px; *//* border-image:url(:/images/a/2.png); */subcontrol-position: top;
}/* 当鼠标放到向右箭头上的时候 */
QScrollBar::right-arrow:horizontal:hover {/* height:9px;width:8px; *//* border-image:url(:/images/a/4.png); */subcontrol-position: bottom;
}/* 滑块左面区域样式 */
QScrollBar::sub-page:horizontal {background: rgb(117, 196, 13);border: 2px solid rgb(223, 104, 104);
}/* 滑块右面区域样式 */
QScrollBar::add-page:horizontal {background: rgba(255, 102, 11);border: 2px solid rgb(223, 104, 104);
}QScrollArea qss样式美化/* QScrollArea {border: none;background: none;
} *//* 整个垂直滚动条区域样式 */
QScrollBar:vertical {border: none;background: rgb(30, 30, 30);width: 10px;margin: 0px 0 0px 0;
}/* 整个水平滚动条区域样式 */
QScrollBar:horizontal {border: none;background: rgb(30, 30, 30);height: 10px;margin: 0px 0 0px 0;
}/* 滑块区域样式 */
QScrollBar::handle:vertical {background: rgb(66, 66, 66);min-height: 20px;border-radius: 5px;border: none;/* margin: 0 1px 0 1px; */
}QScrollBar::handle:horizontal {background: rgb(66, 66, 66);min-height: 20px;border-radius: 5px;border: none;
}/* 鼠标滑过滑块样式 */
QScrollBar::handle:vertical:hover,
QScrollBar::handle:vertical:pressed {background: rgb(79, 79, 79);/* margin: 0 0 0 0; */
}QScrollBar::handle:horizontal:hover,
QScrollBar::handle:horizontal:pressed {background: rgb(79, 79, 79);
}/* 向下箭头样式 */
QScrollBar::add-line:vertical {border: none;background: none;height: 0px;subcontrol-position: bottom;subcontrol-origin: margin;
}/* 向右箭头样式 */
QScrollBar::add-line:horizontal {border: none;background: none;height: 0px;subcontrol-position: bottom;subcontrol-origin: margin;
}/* 向上箭头样式 */
QScrollBar::sub-line:vertical {border: none;background: none;height: 0px;subcontrol-position: top;subcontrol-origin: margin;
}/* 向左箭头样式 */
QScrollBar::sub-line:horizontal {border: none;background: none;height: 0px;subcontrol-position: top;subcontrol-origin: margin;
}/* 滚动条上面和下面区域样式 */
QScrollBar::sub-page:vertical,
QScrollBar::add-page:vertical {background: none;width: 0px;height: 0px;
}/* 滚动条左面和右面区域样式 */
QScrollBar::sub-page:horizontal,
QScrollBar::add-page:horizontal {background: none;width: 0px;height: 0px;
}重写QScrollArea实现QScrollArea获得焦点时qscrollbar才显示，使用时将QScrollArea提升为自定义的QScrollArea。#pragma once
#include <QtWidgets>class MyQScrollArea : public QScrollArea
{Q_OBJECT
private:
protected:void enterEvent(QEvent *event) override;void leaveEvent(QEvent *event) override;public:MyQScrollArea(QWidget *parent = nullptr);~MyQScrollArea();
};#include "myqscrollarea.h"MyQScrollArea::MyQScrollArea(QWidget *parent) : QScrollArea(parent)
{// setMouseTracking(true);verticalScrollBar()->hide();horizontalScrollBar()->hide();
}MyQScrollArea::~MyQScrollArea()
{
}void MyQScrollArea::enterEvent(QEvent *event)
{verticalScrollBar()->show();horizontalScrollBar()->show();QAbstractScrollArea::enterEvent(event);
}
void MyQScrollArea::leaveEvent(QEvent *event)
{verticalScrollBar()->hide();horizontalScrollBar()->hide();QAbstractScrollArea::leaveEvent(event);
}

实例

    QString _scrollStyle =//水平样式--宽度设置为0：为了隐藏"QScrollArea{border:none;background-color:transparent;}""QScrollArea QScrollBar:horizontal{width:0px;background:transparent;margin:0px,1px,0px,1px;padding-top:0px;padding-bottom:0px;border-radius:2px;}""QScrollArea QScrollBar::handle:horizontal{background:#00ffff;border-radius:2px;}""QScrollArea QScrollBar::handle:horizontal:hover{background:#47d5d5;border-radius:2px;}""QScrollArea QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal{background:transparent;border-radius:2px;}""QScrollArea QScrollBar::add-line:horizontal,QScrollBar::sub-line:horizontal{height:0px;width:0px;}"//垂直样式"QScrollArea QScrollBar:vertical{width:8px;background:transparent;margin:0px,1px,0px,1px;padding-top:0px;padding-bottom:0px;border-radius:2px;}""QScrollArea QScrollBar::handle:vertical{width:8px;background:rgb(230,230,230);border-radius:4px;}""QScrollArea QScrollBar::handle:vertical:hover{background:rgba(69, 178, 255,90%);border-radius:4px;}""QScrollArea QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{background:transparent;border-radius:2px;}""QScrollArea QScrollBar::add-line:vertical,QScrollBar::sub-line:vertical{height:0px;width:0px;}";videoToolArea->setStyleSheet(_scrollStyle);

鼠标离开时：

鼠标在上面时：

 

这篇关于QScrollArea样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/739542。

相关文章

vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
在项目开发中，jsp页面不会少了，如何公用页面（添加页面和修改页面）和公用样式代码（css，js）？

在项目开发中，jsp页面不会少了，如何公用页面（添加页面和修改页面）和公用样式代码（css，js）？

在项目开发中，如何公用添加页面和修改页面？ <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><html><head><title>岗位设置</title><%@ include file="/WEB-INF/jsp/public/common.jspf"%></head><body> <!-- 标
阅读更多...
纯css实现checkbox的checked样式

纯css实现checkbox的checked样式

纯css也能实现checked样式 今天使用微信的WEUI的checkbox的时候，发现点击checkbox是有checked和unchecked的变化的，但是想要去获得checkbox的checked状态时，发现event listener里居然没有该checkbox的click之类的事件。这才发现，weui只是纯粹的css样式，没有对应组件的js代码。那么问题来了，没有js事件，weui是如
阅读更多...
WebAPI (一)DOM树、DOM对象，操作元素样式(style className,classList)。表单元素属性。自定义属性。间歇函数定时器

WebAPI (一)DOM树、DOM对象，操作元素样式(style className,classList)。表单元素属性。自定义属性。间歇函数定时器

文章目录 Web API基本认知一、 变量声明二、 DOM1. DOM 树2. DOM对象3. 获取DOM对象(1)、选择匹配的第一个元素(2)、选择匹配多个元素 三、 操作元素1. 操作元素内容2. 操作元素属性(1)、常用属性（href之类的）(2)、通过style属性操作CSS(3)、通过类名(className)操作CSS(4)、通过classList操作控制CSS(5)、操作表单
阅读更多...
Android style(样式)， theme（主题）资源

Android style(样式)， theme（主题）资源

本文内容摘自《疯狂Android讲义 第三版-李刚著作》 样式和主题资源都用于对Android应用进行“美化”，只要充分利用Android应用的样式和主题资源，开发者就可以开发出各种风格的Android应用。 样式资源（style）: 如果我们经常需要对某个类型的组件指定大致相似的格式，比如字体，颜色，背景色等，如果次都要为View组件重复指定这些属性，无疑会有大量的工作量，而且不利于项目后
阅读更多...
鼠标移入移出，样式修改，显示隐藏提示消息

鼠标移入移出，样式修改，显示隐藏提示消息

重要的有三点： 1.a标签中的ishow是自己定义的属性，自己输入值 2.a:hover表示鼠标移上去时， 3.a:hover:after{content:attr(ishow)}表示鼠标移上去后，显示提示消息 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title>实践题 </
阅读更多...
10Python的Pandas：样式Style

10Python的Pandas：样式Style

Pandas 提供了多种样式选项，可以让你对数据框的显示进行格式化。这些样式可以帮助突出显示数据中的某些元素、设置颜色、格式化数字等。以下是一些常用的 Pandas 样式示例： 1. 基本样式设置 要为整个数据框应用样式，可以使用 style 属性。例如，你可以为所有的数值设置显示格式： import pandas as pd# 创建示例数据框df = pd.DataFrame({'A':
阅读更多...
使用 Java 为图片添加各种样式的水印

使用 Java 为图片添加各种样式的水印

在互联网时代，图像的版权保护变得越来越重要。水印作为一种常见的图像保护手段，可以有效防止未经授权的复制和使用。在本文中，我们将详细探讨如何在 Java 中为图片添加各种样式的水印，包括文本水印、图像水印、平铺水印等。通过这一系列的示例和代码实现，您将掌握如何利用 Java 来创建和应用水印，为您的图片增添一层保护。 1. 简介 水印是一种覆盖在图像表面上的标识，通常以文字或图像的形式存在。其主
阅读更多...
鸿蒙图表MPChart自定义样式（五）左y轴显示数值，右y轴显示百分比

鸿蒙图表MPChart自定义样式（五）左y轴显示数值，右y轴显示百分比

左y轴数值不变，右y轴改成百分比，需要通过自定义RightAxisFormatter实现IAxisValueFormatter接口，将右y轴的数值改成百分比文本，RightAxisFormatter类如下： class RightAxisFormatter implements IAxisValueFormatter {maxNumber: number = 0;constructor(ma
阅读更多...
c# Chart设置样式

c# Chart设置样式

一、chart属性熟悉 能够对C# chart控件属性熟悉起帮助的code, 现在分享给大家，Chart Operate Demo Code Download，如有帮助，别忘点个赞. 有关MS_Chart的Control范围、ChartArea范围、InnerPlotArea范围，及Lengend、刻度与标签的位置关系如下图所示。以便让大家有个清晰的认识。   Chart
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2