CSS樣式支持

約 1349 字大約 5 分鐘

2025-07-17

CSS屬性介紹

width

設(shè)置默認(rèn)寬度，單位缺省或dp

  width: 15;
  width: 15dp;

min-width

設(shè)置最小寬度，默認(rèn)最小寬度為0，單位缺省或dp

  min-width: 15;
  min-width: 15dp;

max-width

設(shè)置最大寬度，默認(rèn)最大寬度為 WIDGET_MAX_WIDTH （代碼中的宏定義），單位缺省或dp

  max-width: 15;
  max-width: 15dp;

height

設(shè)置默認(rèn)寬度，單位缺省或dp

  height: 15;
  height: 15dp;

min-height

設(shè)置最小高度，默認(rèn)最小高度為0，單位缺省或dp

  min-height: 15;
  min-height: 15dp;

max-height

設(shè)置最大高度，默認(rèn)最大高度為 WIDGET_MAX_HEIGHT （代碼中的宏定義），單位缺省或dp

  max-height: 15;
  max-height: 15dp;

color

設(shè)置字體顏色，支持rgb和rgba格式

    color: rgb(38, 38, 38);
    color: rgba(38, 38, 38, 1.0);

sub-color

設(shè)置輔助色，部分有效，例如tpSlider、tpPercentProgressBar等，支持rgb和rgba格式

    sub-color: rgb(140, 29, 235);
    sub-color: rgba(140, 29, 235, 1.0);

background

設(shè)置背景顏色，支持rgb、rgba和漸變格式

    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 1.0);
    background: linear-gradient(90deg, rgb(107, 80, 246), rgb(204, 143, 237));

background-color

設(shè)置背景顏色，支持rgb、rgba和漸變格式

    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 1.0);
    background-color: linear-gradient(90deg, rgb(107, 80, 246), rgb(204, 143, 237));

border-color

設(shè)置邊框顏色，支持rgb、rgba和漸變格式

    border-color: rgb(255, 255, 255);
    border-color: rgba(255, 255, 255, 1.0);
    border-color: linear-gradient(90deg, rgb(107, 80, 246), rgb(204, 143, 237));

border-width

設(shè)置邊框線寬，默認(rèn)線寬為1px，單位缺省或dp

    border-width: 1;
    border-width: 1dp;

font-size

設(shè)置字體大小，單位缺省或dp

    font-size: 18;
    font-size: 18dp;

gap

設(shè)置內(nèi)部元素間隔，單位缺省或dp

    gap: 3;
    gap: 3dp;

padding

設(shè)置內(nèi)部元素距四個(gè)邊界距離，如果設(shè)置padding則padding-left、padding-right、padding-top、padding-bottom屬性無效，單位缺省或dp

    padding: 3;
    padding: 3dp;

padding-left

設(shè)置內(nèi)部元素距左邊界距離，如果設(shè)置了padding屬性則本屬性無效，單位缺省或dp

    padding-left: 3;
    padding-left: 3dp;

padding-right

設(shè)置內(nèi)部元素距右邊界距離，如果設(shè)置了padding屬性則本屬性無效，單位缺省或dp

    padding-right: 3;
    padding-right: 3dp;

padding-top

設(shè)置內(nèi)部元素距上邊界距離，如果設(shè)置了padding屬性則本屬性無效，單位缺省或dp

    padding-top: 3;
    padding-top: 3dp;

padding-bottom

設(shè)置內(nèi)部元素距下邊界距離，如果設(shè)置了padding屬性則本屬性無效，單位缺省或dp

    padding-bottom: 3;
    padding-bottom: 3dp;

border-radius

設(shè)置圓角尺寸，單位缺省或dp

    border-radius: 3;
    border-radius: 3dp;

icon-size

設(shè)置圖標(biāo)尺寸，部分組件有效，例如TpIconTopButton、TpMediaTileButton、TpMenuPanelItem等，單位缺省或dp

    icon-size: 3;
    icon-size: 3dp;

CSS狀態(tài)介紹

hover

鼠標(biāo)懸停狀態(tài)，使用此狀態(tài)可設(shè)置鼠標(biāo)懸停組件時(shí)的樣式

TpButton:hover {
  background-color: rgb(239, 239, 239);
}

active

鼠標(biāo)按壓狀態(tài)，可設(shè)置鼠標(biāo)按下組件時(shí)樣式

TpButton:active {
  background-color: rgb(208, 215, 221);
}

checked

選中狀態(tài)，可設(shè)置組件選中時(shí)樣式，組件可設(shè)置開啟選中態(tài)，開啟后點(diǎn)擊一次切換為選中態(tài)，再點(diǎn)擊則切換為非選中態(tài)

TpButton:checked {
  background-color: rgb(208, 215, 221);
}

disabled

禁用狀態(tài)，可設(shè)置組件被禁用時(shí)樣式

TpButton:disabled {
  background-color: rgb(208, 215, 221);
}

enabled

啟用狀態(tài)，即默認(rèn)狀態(tài)，可設(shè)置組件在啟用/默認(rèn)狀態(tài)的樣式，可缺省表示

TpButton:enabled {
  background-color: rgb(208, 215, 221);
}
TpButton {
  background-color: rgb(208, 215, 221);
}

自定義篩選類型

可以對CSS設(shè)置篩選類型，指定組件響應(yīng)指定樣式，使用type對CSS進(jìn)行修飾，并在代碼中為組件綁定特殊樣式

TpButton[type="ControlPanelPowerButton"] {
    height: 64dp;
    width: 305dp;
    font-size: 18dp;
    color: rgb(38, 38, 38);
    background-color: rgb(255, 255, 255);
    border-radius: 32;
}

TpButton[type="ControlPanelPowerButton"]:hover {
    background-color: rgb(239, 239, 239);
}

// C++代碼中指定組件綁定樣式
setProperty("type", "ControlPanelPowerButton");

使用實(shí)例

創(chuàng)建測試程序

參考應(yīng)用開發(fā)創(chuàng)建一個(gè)默認(rèn)應(yīng)用程序，并創(chuàng)建一個(gè)TpButton對象

定義自定義CSS樣式

TpButton {
    gap: 5dp;
    font-size: 15dp;
    color: rgb(255, 128, 128);
    background-color: rgb(255, 255, 255);
}

TpButton:hover {
    background-color: rgb(128, 255, 128);
}

TpButton[type="TestCssType"] {
    height: 64dp;
    width: 305dp;
    font-size: 18dp;
    color: rgb(128, 128, 255);
    background-color: rgb(255, 255, 255);
    border-radius: 32;
}

TpButton[type="TestCssType"]:hover {
    background-color: rgb(55, 55, 55);
}

對按鈕設(shè)置自定義CSS樣式

    TpString testCSSStr = "上一步的CSS";
    setStyleSheet(testCSSStr);

    TpButton* testButton1 = new TpButton("測試按鈕1", this);
    testButton1->setSize(300, 70);
    testButton1->move(150, 150);

    TpButton* testButton2 = new TpButton("測試按鈕2", this);
    testButton2->setProperty("type", "TestCssType");
    testButton2->setSize(300, 70);
    testButton2->move(500, 150);