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 はタブベースのナビゲーションモデルを提供します。

TabBar にはTabButton コントロールが配置され、StackLayout やcurrentIndex などの - プロパティを提供するレイアウトやコンテナ・コントロールと共に使用することができます。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 、タブバーのカスタマイズ、ナビゲーション・コントロール、コンテナ・コントロール、 Qt Quick Controls のフォーカス管理も参照してください 。

プロパティの説明

付属プロパティ文書