0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

TabView(QtQuick Controls 1)サンプル

Posted at

#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)
                    }
                }
            }
        }
    }
}

##実行結果
SignalTransitionサンプル動画
※Linux Mint 18.2 & Qt 5.9.1使用

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?