动态添加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

回答

相关问题