動態添加TabButton到QML中的TabBar

我想添加一個tabButton到TabBar動態按下按鈕，但我花了很多時間搜索，但我沒有得到如何添加，下面是代碼，我我工作的：動態添加TabButton到QML中的TabBar

MyTabButton.qml

import QtQuick 2.4 
import QtQuick.Controls 2.2 

Item 
{ 
    property int BtnWidth:0 
    property int BtnHeight:0 
    property string BtnText: "" 
    property bool isChecked : false 

    TabButton 
    { 
     id:tabBtn 
     text:BtnText 
     width:BtnWidth 
     height:BtnHeight 

    } 
}

MainForm.qml

import QtQuick 2.4 
import QtQuick.Controls 2.2 

Rectangle 
{ 
    Button 
    { 
     id:button 
     width:100 
     height:100 
     anchors.top:parent.top 
     text:qStr("Add") 
     onClicked{ 
      //How to add logic here to add tab in below tabBar. 
     } 
    } 
    TabBar 
    { 
     id:tabBar 
     anchors.top:button.bottom 
     width:500 
     height:500 
    } 
}

來源

2017-07-27 pra7

你需要有一個像Component這是一個TabButton。您的文件MyTabButton.qml不會導致TabButton，而是包含TabButton的Item，但是對此，您的TabBar不知道該怎麼做。

所以你的文件需要有TabButton作爲根元素

//MyTabButton.qml

import QtQuick 2.4 
import QtQuick.Controls 2.2 
TabButton 
{ 
    id: tabBtn 
    // customize as you like 
}

然後你創建文件中要使用它的這個組件。（如main.qml）

import QtQuick 2.4 
import QtQuick.Controls 2.0 

ApplicationWindow { 
    width: 800 
    height: 600 
    visible: true 

    TabBar { 
     id: tabBar 
     width: 800 
     height: 50 
    } 

    // The component is like a factory for MyTabButtons now. 
    // Use myTabButton.createObject(parent, jsobject-with-property-assignments) to create instances. 
    Component { 
     id: myTabButton 
     MyTabButton { 
      /// EDIT ACCORDING TO YOUR COMMENTS *** 
      Connections { 
       target: tabBar 
       onCurrentIndexChanged: doSomething() 
      } 
      /// EDIT OVER 
     } 
    } 

    Button { 
     anchors.centerIn: parent 
     // Create a object out of the component, and add it to the container 
     onClicked: tabBar.addItem(myTabButton.createObject(tabBar /*, { object to set properties }*/)) 
    } 
}

來源

2017-07-27 11:51:44 derM

這正是我所需要的，但如果我想使用一個函數在** MyTabButton中創建** say ** doSomething（）**如何訪問** tabBar中的onCurrentIndexChanged（）事件處理函數？ – pra7

你想調用所有'TabButtons'的'doSomething'或者只調用'doBometon'嗎？ – derM

我需要調用所有'TabButtons'的'doSomething'，因爲我正在對TabButton進行一些繪製...... – pra7

實施例：

import QtQuick 2.7 
import QtQuick.Controls 2.0 

ApplicationWindow { 
    id: window 
    width: 360 
    height: 630 
    visible: true 

    header: TabBar { 
     id: tabBar 
    } 

    Component { 
     id: tabButton 
     TabButton { } 
    } 

    Button { 
     text: "Add" 
     anchors.centerIn: parent 
     onClicked: { 
      var tab = tabButton.createObject(tabBar, {text: "Tab " + tabBar.count}) 
      tabBar.addItem(tab) 
     } 
    } 
}

來源

2017-07-27 11:45:43 jpnurmi

這正是我需要的，但如果我想使用它在創建一個功能** ** TabButton說** DoSomething的（）**如何訪問，在** tabBar ** onCurrentIndexChanged（）事件處理程序？ – pra7

查看['Container']（https://doc.qt.io/qt-5/qml-qtquick-controls2-container.html）API。它提供對當前項目或任何其他項目的訪問，如果你想。 – jpnurmi

感謝您的建議，我會研究... – pra7

TabBar繼承Container，其具有addItem()。

來源

2017-07-27 11:46:21 dtech

感謝，我已經提到它，但我想在飛行中添加一個新的tabButton ... – pra7

動態添加TabButton到QML中的TabBar

回答

相關問題