TabView(QtQuick Controls 1)サンプル

TabView(QtQuick Controls 1)のサンプル

テスト用QML

import QtQuick 2.9
import QtQuick.Controls 1.4
import QtMultimedia 5.9

ApplicationWindow {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("TabViewサンプル")

    Audio { id: tabChangeSound; source: "Sounds/btn01.mp3" }
    Audio { id: clickSound; source: "Sounds/btn02.mp3" }

    Column {
        // TabView定義
        TabView {
            id: tabView
            width: root.width
            onCurrentIndexChanged: tabChangeSound.play()

            Tab{
                title: "Tab1"

                Text {
                    text: "text1"
                }
            }

            Tab {
                title: "Tab2"

                Text {
                    text: "text2"
                }
            }
        }

        // タブ追加用コンポーネント定義
        Component {
            id: compo
            Text { text: "aaa" }
        }

        Row {
            spacing: 2

            // タブ追加ボタン定義
            Button {
                text: "Add"
                onClicked: {
                    clickSound.play()
                    var tab = tabView.addTab("Tab" + (tabView.count + 1), compo)
                    tab.active = true
                    var tabItem = tab.item
                    tabItem.text = "text" + tabView.count
                }
            }

            // タブ挿入ボタン定義
            Button {
                text: "Insert"
                onClicked: {
                    clickSound.play()
                    var tab = tabView.insertTab(tabView.currentIndex, "Tab" + (tabView.count + 1), compo)
                    tab.active = true
                    var tabItem = tab.item
                    tabItem.text = "text" + tabView.count
                }
            }

            // タブ移動ボタン定義
            // 先頭のタブを末尾に移動する
            Button {
                text: "Move"
                onClicked: {
                    clickSound.play()
                    tabView.moveTab(0, tabView.count - 1)
                }
            }

            // タブ削除ボタン定義
            Button {
                text: "Remove"
                onClicked: {
                    clickSound.play()
                    if (tabView.count > 0) {
                        tabView.removeTab(tabView.currentIndex)
                    }
                }
            }
        }
    }
}

実行結果

※Linux Mint 18.2 & Qt 5.9.1使用