QMLのコントロール - Label
概要
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も参照すること。
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"));