QMLのコントロール - Label

提供：MochiuWiki : SUSE, EC, PCB
ナビゲーションに移動 検索に移動

概要

Labelタイプは、Textタイプにスタイルとフォントを継承したものである。
デフォルトの色とフォントはスタイルに依存する。

Labelタイプは、視覚的な背景項目を持つこともできる。

 Label {
    text: "Label"
 }


textプロパティを使用して、テキストの外観を自由に変更することができる。

 Label {
    text: "Hello world"
    font.pixelSize: 22
    font.italic: true
 }


Labelタイプの詳細を知りたい場合は、Qtの公式Webサイトを参照すること。


Labelタイプの独自プロパティ

  • background : Item型
    背景項目を保持する。

    ※注意
    背景アイテムのサイズが明示的に指定されていない場合は、自動的にコントロールのサイズに従う。
    多くの場面では、背景アイテムの幅や高さを指定する必要はない。


  • implicitBackgroundHeight : real型
    暗黙の背景の高さを保持する。
    この値は、background ? background.implicitHeight : 0と等価である。

    このプロパティは、QtQuick.Controls 2.5 (Qt 5.12) で導入された。
    以下に示すimplicitBackgroundWidthプロパティも参照すること。


  • implicitBackgroundWidth : real型
    暗黙の背景幅を保持する。
    この値は、background ? background.implicitWidth : 0と等価である。

    このプロパティは、QtQuick.Controls 2.5 (Qt 5.12) で導入された。
    上記のimplicitBackgroundHeightプロパティも参照すること。


  • topInset : real型
    背景のトップインセットを保持する。

    このプロパティは、QtQuick.Controls 2.5 (Qt 5.12) で導入された。
    QMLのコントロール - Controlレイアウト、および、以下に示すbottomInsetプロパティも参照すること。


  • bottomInset : real型
    背景のボトムインセットを保持する。

    このプロパティは、QtQuick.Controls 2.5 (Qt 5.12) で導入された。
    QMLのコントロール - Controlレイアウト、および、上記のtopInsetプロパティも参照すること。


  • leftInset : real型
    背景の左インセットを保持する。

    このプロパティは、QtQuick.Controls 2.5 (Qt 5.12) で導入された。
    QMLのコントロール - Controlレイアウト、および、以下に示すrightInsetプロパティも参照すること。


  • rightInset : real型
    背景の右インセットを保持する。

    このプロパティは、QtQuick.Controls 2.5 (Qt 5.12) で導入された。
    QMLのコントロール - Controlレイアウト、および、上記のleftInsetプロパティも参照すること。


  • palette : palette型
    ラベルに現在設定されているパレットを保持する。

    このプロパティは、QtQuick.Controls 2.3 (Qt 5.10) で導入された。
    QMLのコントロール - ControlレイアウトにあるControl::paletteプロパティも参照すること。



palette型

palette型において、使用可能なプロパティを下表に示す。

プロパティ 説明
palette.alternateBase : color型 行の色が交互に表示されるアイテムビューの代替背景色として使用される。
palette.base : color型 主にテキストエディタコントロールやアイテムビューの背景色として使用される。
通常は白か他の明るい色である。
palette.brightText : color型 palette.windowTextとは大きく異なり、palette.dark等と良好なコントラストを持つテキスト色である。
通常、palette.textやpalette.windowText、palette.buttonTextではコントラストが
悪くなるようなテキストを描画する必要がある場合に使用する。
palette.button : color型 一般的なボタンの背景色。
スタイルによっては、ボタンに異なる背景色を必要とするため、この背景はpalette.windowとは異なることがある。
palette.buttonText : color型 palette.button.colorで使用される前景色。
palette.dark : color型 palette.buttonより暗い色。
palette.highlight : color型 選択された項目または現在の項目を示す色。
palette.highlightedText : color型 palette.highlightと対照的なテキスト色。
palette.light : color型 palette.buttonより明るい色。
palette.link : color型 ハイパーリンクに使用されるテキスト色。
palette.linkVisited : color型 既に訪問したハイパーリンクに使用されるテキスト色。
palette.mid : color型 palette.buttonとpalette.darkの間の色。
palette.midlight : color型 palette.buttonとpalette.lightの間の色。
palette.shadow : color型 とても濃い色。
palette.text : color型 palette.baseで使用される前景色。
これは、palette.windowTextと同じであり、その場合は、palette.windowやpalette.baseと良好なコントラストを提供する必要がある。
palette.toolTipBase : color型 ツールチップの背景色として使用される。
palette.toolTipText : color型 ツールチップの前景色として使用される。
palette.window : color型 一般的な背景色。
palette.windowText : color型 一般的な前景色。


詳細を知りたい場合は、QMLのコントロール - ControlにあるControl::palette、QMLのコントロール - PopupにあるPopup::palette、QMLのコントロール - ウインドウにあるApplicationWindow::palette、
QMLのコントロール - QPaletteにあるQPalette::ColorRoleも参照すること。


文字列の配置

中央に配置

widthプロパティ、heightプロパティで設定した領域のうち、文字列の配置を指定する。

 Label {
    verticalAlignment:   Label.AlignVCenter
    horizontalAlignment: Label.AlignHCenter
 }


行間の調整

ピクセル数で行間を指定できる。

 Label {
    lineHeightMode: Text.FixedHeight
    lineHeight: 20
 }


割合で行間を指定することもできる。

 Label {
    lineHeightMode: Text.ProportionalHeight  // 省略可能
    lineHeight: 1.8
 }


トラッキング（文字間隔）の調整

指定のピクセル数だけ、文字と文字の間隔を調整することができる。
値が負数の場合は、間隔が狭くなる。

 Label {
    font.letterSpacing : 3
 }


配置の調整にlineLaidOutシグナルを使用する

Labelコントロール (Textコントロールも含む)は、１行毎にxプロパティ、yプロパティ、widthプロパティ、heightプロパティを変更することができる。

以下の例では、2行目の幅を20ピクセルずつ狭めて文字列を配置している。

 Label {
    onLineLaidOut: {
       if (line.number === 1)
       {
          line.x = line.x + 20
          line.width = line.width - 20
       }
    }
 }


行毎にxプロパティ、yプロパティ、widthプロパティ、heightプロパティを指定することができるため、ボタン等のコントロールを避けて配置することが可能である。
行番号を意味する変数numberの値は、0から始まることに注意する。

さらに、forceLayout()メソッドも併用すれば動的に変更することができる。


ツールチップ

サイズより大きいLabelコントロールをツールチップでホバー表示することができる。

Labelコントロールには、文字列がサイズより大きい場合、truncatedプロパティがtrueになる。

maximumLineCountプロパティ、または、elideプロパティを設定することにより、truncatedプロパティがtrueになる。
同様に、MouseAreaコントロールのhoverEnabledプロパティをtrueに設定することにより、containsMouseプロパティがtrueになる。

以下の例では、上記のtruncatedプロパティ、および、containsMouseプロパティがtrueの時、ツールチップを表示させている。

 Label {
    id: name
    wrapMode: Label.Wrap
    maximumLineCount: 1
 
    MouseArea {
       anchors.fill: parent
       hoverEnabled: true
 
       ToolTip {
          visible: parent.containsMouse && name.truncated
          delay: 500
          text: name.text
          contentItem: Label { }     // contentItemプロパティでLabelをカスタマイズすることができる
          background: Rectangle { }  // 背景も同様
       }
    }
 }



URLリンクの作成

LabelにURLを貼るには、LabelまたはTextを使用して、MouseAreaを組み合わせる方法がある。
Qt.openUrlExternallyメソッドを使用して、外部ブラウザでURLを開くことができる。

以下の例では、Labelで表示されるテキストをクリックすると、指定したURLがWebブラウザで開かれる。

 import QtQuick 2.15
 import QtQuick.Controls 2.15
 
 ApplicationWindow {
    visible: true
    width: 500
    height: 300
    title: "URL Label Example"
 
    Label {
       text: "Click here to visit a website"
       color: "blue"
       underline: true
 
       MouseArea {
           anchors.fill: parent
           onClicked: {
              Qt.openUrlExternally("http://www.example.com")
           }
       }
    }
 }



フォントの変更

QMLで使用されるデフォルトのフォントを変更することができる。
main関数で、QGuiApplication::setFontメソッドにフォント名を指定することにより、デフォルトのフォントを変更することができる。

QGuiApplicationクラスのオブジェクトを生成する前に記述する必要がある。
これは、QGuiApplicationクラスのコンストラクタで生成されるQFontクラスは、QGuiApplication::setFontメソッドで指定したフォントになるためである。
つまり、システムのデフォルトのQFontクラスが生成されないということである。

 QGuiApplication::setFont(QFont("Arial"));



「http://mochiuwiki.e2.valueserver.jp/index.php?title=QMLのコントロール_-_Label&oldid=7939」から取得