8

Qtアプリのタブを次のようにスタイル設定したいと思います。

ここに画像の説明を入力してください

私は次のスタイルシートを使用しました：

QTabBar{background-color: #fff; border-top: 0px;}
QTabBar::tab {
    border-image: url(:/New_UI/tab_inactive.png) 7 17 7 2;
    margin-left: 2px;
    border-right: 17px;
    border-top: 5px;
    border-bottom: 5px;
    font: 400 9.2pt "Segoe UI";
    color: #ccc;
    padding: 0px 13px 0px 5px;
    max-height: 26px;
 }

QTabBar::tab:selected, QTabBar::tab:hover {
    border-image: url(:/New_UI/tab_active.png) 6 17 6 2;
}

QTabBar::close-button {
    image: url(:/New_UI/tab_close.png);
    subcontrol-origin: padding;
    subcontrol-position: right; 
    width: 13px;
    height: 13px;

}

結果は次のようになります（閉じるボタンの位置は私が望んでいたものではありません）：

ここに画像の説明を入力してください

私は何を間違っているのですか？どうすれば希望の結果を得ることができますか？

4

5 に答える 5

7

編集：私はこの投稿が古いことを知っていますが、それが他の誰かを助けることができることを願っています。

いくつかのテストの後、これを行う方法は1つあると思いますが、使用しませんQt style sheets：

  1. QTabWidget保護された機能に完全にアクセスできるようにサブクラス化する
  2. 独自に作成するQWidgetかQPushButton、閉じるボタンとして作成します
  3. スタイルシートプロパティを使用してボタンの位置を管理します（margin-right例）
  4. タブにボタンを追加しますtabBar()->setTabButton(index, QTabBar::RightSide, closeButton);

テストに使用したコード：

MyTab::MyTab(QWidget *parent) : QTabWidget(parent)
{
/// Create your button
QPushButton *close = new QPushButton(this);

// Add a tab
addTab(new QWidget(), QIcon(), "Tab 1");
setStyleSheet("QTabBar::tab { width : 150px;}");

// Size and move your button
close->setStyleSheet("max-height: 14px; max-width: 15px; margin-right: 50px;");

// Add your button to the tab
tabBar()->setTabButton(0, QTabBar::RightSide, close);
}

最後に、メインウィンドウで、独自のTabWidgetをレイアウトに追加しました。

ui->layout->addWidget(new MyTab(this));

結果 ：

ここに画像の説明を入力してください

ただし、ボタンを接続してクローズアクションを手動で処理し、removeTab(index)呼び出しのインデックスを取得する必要があります。

于 2013-01-19T10:02:41.147 に答える
0

私はあなたと同じことをしています。これが私のスタイルシートです。

QTabBar::close-button{
    image:url(:tabclose.png); 
    margin-right:4px;
}

「width」プロパティと「height」プロパティは使用しないでください。これら2つはここでは機能しません。サブコントロールに「image：url（）」を設定すると、サブコントロールの幅と高さが暗黙的に設定されます（SVG内の画像を除く） ）。

「margin-right」プロパティを使用して、タブの右端からの距離を制御します。

于 2013-03-15T09:18:14.100 に答える
0

カスタムボタンを追加するのは良い答えですが、マージンを使用して閉じるボタンの位置を決定すると、閉じるボタンのマウス領域が異常になるため、ウィジェットにSpacerItemとボタンを追加し、最後にこのウィジェットをTabWidgetに追加します。

void TabBarCloseable::tabInserted(int index)
{
    QWidget *widget = new QWidget(this);
    QHBoxLayout *layout = new QHBoxLayout(this);
    widget->setLayout(layout);

    QToolButton *closeBtn = new QToolButton(this);
    layout->addWidget(closeBtn);
    layout->insertSpacing(1, 15);
    closeBtn->setStyleSheet("max-height: 16px; max-width: 16px;");

    this->setTabButton(index, QTabBar::RightSide, widget);

    QTabBar::tabInserted(index);
}
于 2016-10-27T05:41:51.527 に答える
0

パディングが間違っています

ここに画像の説明を入力してください

上

QTabBar::tab {
    min-width: 25ex;
    padding: 10px 50px 10px 10px;
}

バットトム

QTabBar::tab {
    min-width: 25ex;
    padding: 10px 0px 10px 10px;
}
于 2020-01-31T06:34:06.847 に答える
-1

これは、ボタンを手動で作成することなく、純粋なスタイルシートソリューションです。

QTabBar::close-button {
    image: url(:/tab-close.png);
    padding-left: -13px;
}

Qtソースを確認すると、イメージペインティングコードはパディング値のみを使用し、マージン値は使用しません。

于 2016-04-14T16:13:04.057 に答える