TabBar QML Type

ユーザーが異なるビューやサブタスクを切り替えることができます。詳細...

• 継承されたメンバーを含む、すべてのメンバーのリスト

プロパティ

• contentHeight : real (since QtQuick.Controls 2.2 (Qt 5.9))
• contentWidth : real (since QtQuick.Controls 2.2 (Qt 5.9))
• position : enumeration

関連するプロパティ

• index : int (since QtQuick.Controls 2.3 (Qt 5.10))
• position : enumeration (since QtQuick.Controls 2.3 (Qt 5.10))
• tabBar : TabBar (since QtQuick.Controls 2.3 (Qt 5.10))

詳細説明

TabBarは、タブベースのナビゲーションモデルを提供します。

currentIndex TabBarにはTabButton コントロールが配置され、StackLayout やSwipeView

TabBar {
    id: bar
    width: parent.width
    TabButton {
        text: qsTr("Home")
    }
    TabButton {
        text: qsTr("Discover")
    }
    TabButton {
        text: qsTr("Activity")
    }
}

StackLayout {
    width: parent.width
    currentIndex: bar.currentIndex
    Item {
        id: homeTab
    }
    Item {
        id: discoverTab
    }
    Item {
        id: activityTab
    }
}

前述のように、TabBarには通常、タブバーの子要素としてインラインで定義された静的なタブボタンのセットが配置されます。また、実行時にadd 、insert 、move 、およびremove の各項目を動的に設定することも可能です。これらの項目には、itemAt() またはcontentChildren を使用してアクセスできます。

TabBarをSwipeView などの別のコンテナと組み合わせる場合、各コントロールのcurrentIndex プロパティ間で双方向バインディングを設定する必要があります。バインディングを破損させずにこれを行うには、currentIndex を直接設定するのを避け、代わりにsetCurrentIndex()などを使用してください。詳細については、Managing the Current Index を参照してください。

currentIndex が変更された際にアクションを実行するには、onCurrentIndexChanged プロパティの変更シグナルハンドラを使用します：

onCurrentIndexChanged: {
    print("currentIndex changed to", currentIndex)
    // ...
}

タブのサイズ変更

デフォルトでは、TabBar はコントロールの幅に合わせてボタンのサイズを変更します。利用可能なスペースは各ボタンに均等に割り当てられます。ボタンの幅を明示的に設定することで、このデフォルトのサイズ変更動作を上書きできます。

次の例は、各タブボタンをタブバーに合わせてサイズ変更するのではなく、暗黙的なサイズを維持する方法を示しています：

TabBar {
    width: parent.width
    TabButton {
        text: "First"
        width: implicitWidth
    }
    TabButton {
        text: "Second"
        width: implicitWidth
    }
    TabButton {
        text: "Third"
        width: implicitWidth
    }
}

フリック可能なタブ

ボタンの合計幅がタブバーの利用可能な幅を超える場合、自動的にフリック操作が可能になります。

TabBar {
    id: bar
    width: parent.width

    Repeater {
        model: ["First", "Second", "Third", "Fourth", "Fifth"]

        TabButton {
            text: modelData
            width: Math.max(100, bar.width / 5)
        }
    }
}

「 TabButton 」、「TabBarのカスタマイズ」、「ナビゲーションコントロール」、「コンテナコントロール」、および「 Qt Quick コントロールにおけるフォーカス管理」も参照してください 。

プロパティのドキュメント

contentHeight : real [since QtQuick.Controls 2.2 (Qt 5.9)]

このプロパティはコンテンツの高さを保持します。これは、タブバーの暗黙的な総高さを計算するために使用されます。

このプロパティは、QtQuick.Controls 2.2 (Qt 5.9) で導入されました。

Container::contentHeightも参照してください 。

contentWidth : real [since QtQuick.Controls 2.2 (Qt 5.9)]

このプロパティはコンテンツの幅を保持します。タブバーの暗黙的な合計幅を計算するために使用されます。

このプロパティは、QtQuick.Controls 2.2 (Qt 5.9) で導入されました。

Container::contentWidthも参照してください 。

position : enumeration

このプロパティは、タブバーの位置を指定します。

指定可能な値：

デフォルト値はスタイルによって異なります。

関連項目： ApplicationWindow::header 、ApplicationWindow::footer 、Page::header 、およびPage::footer 。

添付プロパティのドキュメント

TabBar.index : int [read-only attached, since QtQuick.Controls 2.3 (Qt 5.10)]

この添付プロパティは、TabBar 内の各タブボタンのインデックスを保持しています。

これは、TabBar の各タブボタンに紐付けられています。

このプロパティは、QtQuick.Controls 2.3 (Qt 5.10) で導入されました。

TabBar.position : enumeration [read-only attached, since QtQuick.Controls 2.3 (Qt 5.10)]

この添付プロパティは、タブバーの位置を保持します。

これは、TabBar の各タブボタンにアタッチされています。

取り得る値：

このプロパティは、QtQuick.Controls 2.3 (Qt 5.10) で導入されました。

TabBar.tabBar : TabBar [read-only attached, since QtQuick.Controls 2.3 (Qt 5.10)]

この関連プロパティには、このタブボタンを管理するタブバーが格納されています。

これは、TabBar の各タブボタンにアタッチされます。

このプロパティは、QtQuick.Controls 2.3 (Qt 5.10) で導入されました。