css - QT5 样式 QPushButton 以移除其周围的空间-6ren

css - QT5 样式 QPushButton 以移除其周围的空间

转载作者：行者123 更新时间：2023-11-27 22:51:07

我在 Qt5 Qt Widgets Application 中创建简单的滑动菜单。

一切似乎都很好，现在我的表格看起来像这样:

当我按下按钮时子菜单显示，其他元素向下滑动。

这里是表格的代码:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>695</width>
    <height>388</height>
   </rect>
  </property>
  <property name="sizePolicy">
   <sizepolicy hsizetype="Preferred" vsizetype="Minimum">
    <horstretch>0</horstretch>
    <verstretch>0</verstretch>
   </sizepolicy>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <property name="styleSheet">
   <string notr="true"/>
  </property>
  <widget class="QWidget" name="centralwidget">
   <property name="styleSheet">
    <string notr="true">QWidget#centralwidget {
    border-top: 1px solid gray;
}</string>
   </property>
   <layout class="QHBoxLayout" name="horizontalLayout">
    <property name="spacing">
     <number>0</number>
    </property>
    <property name="leftMargin">
     <number>0</number>
    </property>
    <property name="topMargin">
     <number>0</number>
    </property>
    <property name="rightMargin">
     <number>0</number>
    </property>
    <property name="bottomMargin">
     <number>0</number>
    </property>
    <item>
     <widget class="QWidget" name="menuContainerBox" native="true">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Fixed" vsizetype="Preferred">
        <horstretch>0</horstretch>
        <verstretch>0</verstretch>
       </sizepolicy>
      </property>
      <property name="minimumSize">
       <size>
        <width>101</width>
        <height>0</height>
       </size>
      </property>
      <property name="autoFillBackground">
       <bool>false</bool>
      </property>
      <property name="styleSheet">
       <string notr="true">QWidget#menuContainerBox{

border-right: 1px solid gray;

}

QWidget#menuBoxWidget QPushButton
{
border: 1px solid gray;
border-bottom: none;
border-left: none;
border-right: none;
padding: 3 20px;
text-align: left;
}


QWidget#menuBoxWidget QWidget QPushButton
{
padding: 3 10px;
text-align: right;
}


QWidget#menuBoxWidget QWidget QPushButton:hover
{
    background-color: rgb(168, 168, 168);
}

QWidget#menuBoxWidget QPushButton:hover
{
    background-color: rgb(168, 168, 168);
}


QWidget#menuBoxWidget {
    border-bottom: 1px solid gray;
}</string>
      </property>
      <layout class="QVBoxLayout" name="menuContainer">
       <property name="spacing">
        <number>0</number>
       </property>
       <property name="sizeConstraint">
        <enum>QLayout::SetDefaultConstraint</enum>
       </property>
       <property name="leftMargin">
        <number>0</number>
       </property>
       <property name="topMargin">
        <number>0</number>
       </property>
       <property name="rightMargin">
        <number>0</number>
       </property>
       <property name="bottomMargin">
        <number>0</number>
       </property>
       <item>
        <widget class="QWidget" name="menuBoxWidget" native="true">
         <property name="sizePolicy">
          <sizepolicy hsizetype="Fixed" vsizetype="Minimum">
           <horstretch>0</horstretch>
           <verstretch>0</verstretch>
          </sizepolicy>
         </property>
         <property name="minimumSize">
          <size>
           <width>100</width>
           <height>0</height>
          </size>
         </property>
         <property name="baseSize">
          <size>
           <width>0</width>
           <height>0</height>
          </size>
         </property>
         <layout class="QVBoxLayout" name="menuBox">
          <property name="spacing">
           <number>0</number>
          </property>
          <property name="leftMargin">
           <number>0</number>
          </property>
          <property name="topMargin">
           <number>0</number>
          </property>
          <property name="rightMargin">
           <number>0</number>
          </property>
          <property name="bottomMargin">
           <number>0</number>
          </property>
          <item>
           <widget class="QPushButton" name="menu1">
            <property name="sizePolicy">
             <sizepolicy hsizetype="Fixed" vsizetype="Preferred">
              <horstretch>0</horstretch>
              <verstretch>0</verstretch>
             </sizepolicy>
            </property>
            <property name="minimumSize">
             <size>
              <width>100</width>
              <height>0</height>
             </size>
            </property>
            <property name="text">
             <string>Menu1</string>
            </property>
           </widget>
          </item>
          <item>
           <widget class="QWidget" name="subMenuBox1" native="true">
            <property name="enabled">
             <bool>true</bool>
            </property>
            <property name="sizePolicy">
             <sizepolicy hsizetype="Fixed" vsizetype="Minimum">
              <horstretch>0</horstretch>
              <verstretch>0</verstretch>
             </sizepolicy>
            </property>
            <property name="minimumSize">
             <size>
              <width>100</width>
              <height>0</height>
             </size>
            </property>
            <property name="styleSheet">
             <string notr="true"/>
            </property>
            <layout class="QVBoxLayout" name="verticalLayout_4" stretch="0,0">
             <property name="spacing">
              <number>0</number>
             </property>
             <property name="leftMargin">
              <number>0</number>
             </property>
             <property name="topMargin">
              <number>0</number>
             </property>
             <property name="rightMargin">
              <number>0</number>
             </property>
             <property name="bottomMargin">
              <number>0</number>
             </property>
             <item>
              <widget class="QPushButton" name="pushButton_5">
               <property name="text">
                <string>Submenu1_1</string>
               </property>
              </widget>
             </item>
             <item>
              <widget class="QPushButton" name="pushButton">
               <property name="styleSheet">
                <string notr="true"/>
               </property>
               <property name="text">
                <string>Submenu1_2</string>
               </property>
              </widget>
             </item>
            </layout>
           </widget>
          </item>
          <item>
           <widget class="QPushButton" name="menu2">
            <property name="sizePolicy">
             <sizepolicy hsizetype="Minimum" vsizetype="Preferred">
              <horstretch>0</horstretch>
              <verstretch>0</verstretch>
             </sizepolicy>
            </property>
            <property name="minimumSize">
             <size>
              <width>100</width>
              <height>0</height>
             </size>
            </property>
            <property name="text">
             <string>Menu2</string>
            </property>
           </widget>
          </item>
          <item>
           <widget class="QWidget" name="subMenuBox2" native="true">
            <property name="sizePolicy">
             <sizepolicy hsizetype="Fixed" vsizetype="Minimum">
              <horstretch>0</horstretch>
              <verstretch>0</verstretch>
             </sizepolicy>
            </property>
            <property name="minimumSize">
             <size>
              <width>100</width>
              <height>0</height>
             </size>
            </property>
            <layout class="QVBoxLayout" name="verticalLayout_5">
             <property name="spacing">
              <number>0</number>
             </property>
             <property name="leftMargin">
              <number>0</number>
             </property>
             <property name="topMargin">
              <number>0</number>
             </property>
             <property name="rightMargin">
              <number>0</number>
             </property>
             <property name="bottomMargin">
              <number>0</number>
             </property>
             <item>
              <widget class="QPushButton" name="pushButton_11">
               <property name="text">
                <string>Submenu2_1</string>
               </property>
              </widget>
             </item>
             <item>
              <widget class="QPushButton" name="pushButton_7">
               <property name="text">
                <string>Submenu2_2</string>
               </property>
              </widget>
             </item>
             <item>
              <widget class="QPushButton" name="pushButton_8">
               <property name="text">
                <string>Submenu2_3</string>
               </property>
              </widget>
             </item>
            </layout>
           </widget>
          </item>
          <item>
           <widget class="QPushButton" name="menu3">
            <property name="sizePolicy">
             <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
              <horstretch>0</horstretch>
              <verstretch>0</verstretch>
             </sizepolicy>
            </property>
            <property name="minimumSize">
             <size>
              <width>100</width>
              <height>0</height>
             </size>
            </property>
            <property name="text">
             <string>Menu3</string>
            </property>
           </widget>
          </item>
          <item>
           <widget class="QWidget" name="subMenuBox3" native="true">
            <property name="sizePolicy">
             <sizepolicy hsizetype="Preferred" vsizetype="Minimum">
              <horstretch>0</horstretch>
              <verstretch>0</verstretch>
             </sizepolicy>
            </property>
            <property name="minimumSize">
             <size>
              <width>0</width>
              <height>0</height>
             </size>
            </property>
            <layout class="QVBoxLayout" name="verticalLayout_6">
             <property name="spacing">
              <number>0</number>
             </property>
             <property name="leftMargin">
              <number>0</number>
             </property>
             <property name="topMargin">
              <number>0</number>
             </property>
             <property name="rightMargin">
              <number>0</number>
             </property>
             <property name="bottomMargin">
              <number>0</number>
             </property>
             <item>
              <widget class="QPushButton" name="pushButton_9">
               <property name="text">
                <string>Submenu3_1</string>
               </property>
              </widget>
             </item>
            </layout>
           </widget>
          </item>
         </layout>
        </widget>
       </item>
       <item>
        <spacer name="verticalSpacer">
         <property name="orientation">
          <enum>Qt::Vertical</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>50</width>
           <height>40</height>
          </size>
         </property>
        </spacer>
       </item>
       <item>
        <widget class="QPushButton" name="LogoBtn">
         <property name="styleSheet">
          <string notr="true">border: none;
font-width: bold;</string>
         </property>
         <property name="text">
          <string>LOGO</string>
         </property>
        </widget>
       </item>
      </layout>
     </widget>
    </item>
    <item>
     <spacer name="horizontalSpacer">
      <property name="orientation">
       <enum>Qt::Horizontal</enum>
      </property>
      <property name="sizeHint" stdset="0">
       <size>
        <width>40</width>
        <height>20</height>
       </size>
      </property>
     </spacer>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>695</width>
     <height>21</height>
    </rect>
   </property>
   <widget class="QMenu" name="menuFile">
    <property name="title">
     <string>File</string>
    </property>
    <addaction name="actionExit"/>
   </widget>
   <widget class="QMenu" name="menuAbout">
    <property name="title">
     <string>About</string>
    </property>
    <addaction name="actionAbout"/>
   </widget>
   <addaction name="menuFile"/>
   <addaction name="menuAbout"/>
  </widget>
  <action name="actionAbout">
   <property name="text">
    <string>About...</string>
   </property>
  </action>
  <action name="actionExit">
   <property name="text">
    <string>Exit</string>
   </property>
  </action>
 </widget>
 <resources/>
 <connections/>
</ui>

and here program code:

    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    #include<QDebug>

    MainWindow::MainWindow(QWidget *parent)
        : QMainWindow(parent)
        , ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
        ui->subMenuBox1->hide();
        ui->subMenuBox2->hide();
        ui->subMenuBox3->hide();
    }

    MainWindow::~MainWindow()
    {
        delete ui;
    }



    void MainWindow::on_menu1_clicked()
    {
        qInfo() << "Clicked!";
        if (ui->subMenuBox1->isHidden()){
            ui->subMenuBox1->show();
            ui->subMenuBox2->hide();
            ui->subMenuBox3->hide();
        }
    }

    void MainWindow::on_menu2_clicked()
    {
        qInfo() << "Clicked!";
        if (ui->subMenuBox2->isHidden()){
            ui->subMenuBox2->show();
            ui->subMenuBox1->hide();
            ui->subMenuBox3->hide();
        }
    }

    void MainWindow::on_menu3_clicked()
    {
        qInfo() << "Clicked!";
        if (ui->subMenuBox3->isHidden()){
            ui->subMenuBox3->show();
            ui->subMenuBox2->hide();
            ui->subMenuBox1->hide();
        }
    }

它简单而且工作得很好。

但现在我需要通过删除按钮之间的所有空格并将按钮文本向左对齐以及子菜单按钮文本向右对齐来设置样式。

我尝试为 subMenuBox1 设置 padding:0 但它只影响按钮高度。

我还需要在 menuBoxWidget 的右侧添加一行，以便将菜单与其他屏幕分开。

如何设置样式，使菜单看起来不错？

更新 1:

我更新了添加了样式的表单代码。

最佳答案

好的，我知道它是如何工作的!

此处样式:

QWidget#menuContainerBox{

border-right: 1px solid gray;

}

QWidget#menuBoxWidget QPushButton
{
border: 1px solid gray;
border-bottom: none;
border-left: none;
border-right: none;
padding: 3 20px;
text-align: left;
}


QWidget#menuBoxWidget QWidget QPushButton
{
padding: 3 10px;
text-align: right;
}


QWidget#menuBoxWidget QWidget QPushButton:hover
{
    background-color: rgb(168, 168, 168);
}

QWidget#menuBoxWidget QPushButton:hover
{
    background-color: rgb(168, 168, 168);
}


QWidget#menuBoxWidget {
    border-bottom: 1px solid gray;
}

现在看起来，它非常基本，但它可以正常工作并且看起来像我想要的!

关于css - QT5 样式 QPushButton 以移除其周围的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59443361/

文章推荐： Javascript 样式分配仅适用于 Opera(但不适用于 Firefox 或 IE8)

文章推荐： javascript - 如何清除 Shibboleth session

文章推荐： jquery - 如何在图像中嵌入缩略图

文章推荐： javascript - AngularJS 1.5 在获取 Controller 值之前打印的组件

c++ - 将 QPushButton 宽度链接到另一个 QPushButton
我创建了一个 GUI 宽度的 Qt Creator (Qt 5.0.1)，当然也使用了布局。出于美学原因，我希望 QPushButton 与放置在 GUI 其他角落的另一个 QPushButton 具
c++ - 最大化小部件时如何在没有其他 QPushButton 的情况下扩展特定 QPushButton 的大小
如何扩展棕色的对象(QPushButton)。坦率地说，我曾尝试通过添加 Horizontal layout 来做到这一点，但似乎效果不佳。如图所示，当小部件最大化时，我想扩展(仅宽度)特定
c++ - 获取二维数组 QPushButton 上 QPushButton 的索引
我有一个二维数组QPushButton，当用户点击它时我如何获取按钮的索引？例如当用户点击按钮 a[2][3] 时，它会显示 (2,3) ? 最佳答案这个例子是这样的: Qt 4/5 使用对象名称
qt - 当鼠标悬停在 QPushButton 上时，如何从 QPushButton 发出信号？
最近想要那个QPushButton当鼠标指针进入时可以发出信号。我怎样才能做到？我知道 QPushButton 有一些已经定义好的信号，比如 clicked() , pressed() , dest
qt - PySide : How to get the clicked QPushButton object in the QPushButton clicked slot?
我是 PySide 的新手。我想在其单击的插槽中获取 QPushButton obj(例如使用它来获取其文本)。 button = QtGui.QPushButton("start go") butt
python - QtGui.QPushButton.clicked[bool] 和 QtGui.QPushButton.clicked 之间的区别
请注意 redb.clicked[bool].connect(self.setColor) 行，为什么要添加 [bool] 部分？我试图删除该部分，将行修改为 redb.clicked.connect
c++ - 当鼠标悬停在 QPushButton 上时，alpha 级别为 0% 的 QPushButton 变为实心。如何用 C++ 修复 Qt(用样式表？)
我在 Qt Designer 中设计了两种不同的 QPushButton。一个是默认的，另一个我想说清楚。在 QT Designer 中，我将后者的初始样式表设置如下: background-colo
macos - QPushButton 更改同一布局中其他小部件的边距
我有一个包含以下结构的小部件和布局的大布局: QVBoxLayout QTableView QPushButton 我将布局上的边距、内边距和间距设置为 0。这在 Mac OS X 上呈现的方
Qt QPushButton 样式表悬停
我有以下按钮样式表: QPushButton:hover{ background: qlineargradient(x1 : 0, y1 : 0, x2 : 0, y2 : 1,
qt - 在多个小部件上显示相同的 QPushButton
我有两个小部件(真实的和假的)，其中一个有 QPushButton。现在我希望在另一个小部件中显示相同的按钮。我该怎么做？我不想创建副本，我希望在不更改父级的情况下同时显示另一个小部件上的相同 QO
qt - QPushButton() 只要按下它就应该使用react
我在我的程序中使用 QPushButton()。使用这些按钮，我可以旋转我的对象。到目前为止工作正常。唯一的问题是我必须单击多次才能进一步旋转对象。这有点烦人。只要我按下按钮并且对象将进一步旋转，按
qt - QPushButton 问题
我正在使用以下代码创建一个按钮。它工作正常。但我在左角得到了黄色矩形。为什么？请帮我。提前致谢， backButton = new QPushButton(tr("Back"));
qt - 带有自定义形状的 QPushButton
我想让一些按钮看起来像你在 Skype 中看到的按钮。如何设计 QPushButton自定义形状？我不知道这样做。所以我需要一些建议。例如，我想要我的 QPushButton看起来像这样 image
python - 如何在窗口内对齐 QPushButton？
我想将 QPushButton 对齐到右下角，但没有固定大小，因为如果我使用固定大小并调整窗口大小，它看起来就不再好看了。这是我的代码: self.copy_btn = QtWidgets.Q
Qpushbutton 悬停/按下图标
我从 Qt 开始，每当有人将鼠标悬停在 QPushButton 上时，我想将 QPushButton 设置为不同的图标。到目前为止，这是我的代码: #include QPushButton *but
qt - QPushButton 和快捷方式
我在使用 Qt 4.6.0 和 QPushButtons 快捷方式时遇到问题: 当用户单击按钮时，我想在QTextEdit中显示特殊文本，但仅当按下按钮时，如下一旦发布，我希望出现另一个文本。一切正
Qpushbutton 悬停/按下图标
我从 Qt 开始，我想在有人将鼠标悬停在 QPushButton 上时将其设置为不同的图标。到目前为止，这是我的代码: #include QPushButton *button = new QPus
qt - QPushButton 的工具提示
是否可以向 QPushButton 添加工具提示。我的意思是，当您将鼠标悬停在按钮上时，会出现一个小文本框(通常是黄色)并告诉用户该按钮正在做什么。谢谢。最佳答案 QPushButton 是 QW
python - 改变PNG图像的颜色 QPushbutton
我尝试在通过 QtWidgets.QColorDialog 设置 PNG 图像的颜色后更改其颜色。使用Python ---> 至尽管如此，当我应用代码时，结果是: 它改变了我的PNG图像的背景 PN
python - QPushButton 切换连接似乎并未在开始时触发
我正在连接一个 QPushButton，它将在其中隐藏/显示框架内的小部件。我使用 .ui 方法加载/创建了我的 GUI。对于这个 QPushButton，我设置并检查了属性 setChecked

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - QT5 样式 QPushButton 以移除其周围的空间