Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML Editable Tab title within TabView on double-click



  • Hi,

    Is it possible to achieve a possibility of editing title of a tab within TabView after double-click it? I mean exactly something as follows.
    alt text

    I had a look at Tab, TabView and TabBar documentation, but I didn't find anything which could help to implement mentioned functionality.



  • @ebleble
    I believe people implement this themselves via overlaying the tab title with a QLineEdit dynamically when it is double-clicked.
    Here's one: https://stackoverflow.com/questions/30269046/inline-renaming-of-a-tab-in-qtabbar-qtabwidget
    Or here's another one: https://forum.qt.io/topic/10141/solved-changing-qtabwidget-s-tab-name-at-runtime



  • Thank you for your hints, @JonB . I think that's the way to go. However, I'm trying to do it using QtQuick controls in QML, not with QWidgets.

    TabView {
        Layout.fillHeight: true
        Layout.fillWidth: true
    
        Tab {
            id: tab1
            title: "tab1"
    
            TextField {
                anchors.fill: parent
                text: "text field"
            }
        }
    }
    

    I put TextField inside Tab, but that TextField is not visible for some reason, so it doesn't overlay the tab.



  • @ebleble
    There I can't help you, as I know nothing about QML/Quick.... It's possible you'll have to do it dynamically via code, which I believe can be done easily from QML....



  • Hi @ebleble,

    you need to use TabViewStyle to make your 'Tab title' editable. In this case, only a single click on the tab title is required. I didn't try with double click.

    I've elaborated slightly on your original code, but this works (at least in ApplicationWindow);

    import QtQuick 2.12
    import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.12
    import QtQuick.Controls.Styles 1.4
    
    ApplicationWindow {
        visible: true; width: 240; height: 150
    
        TabView {
            Layout.fillHeight: parent
            Layout.fillWidth: parent
    
            Tab { id: tab1; title: "Red"
            Rectangle { color: "red" }}
    
            Tab { id: tab2; title: "Green"
            Rectangle { color: "green" }}
    
            Tab { id: tab3; title: "Blue"
            Rectangle { color: "blue" }}
    
            style: TabViewStyle { tabsMovable: true; frameOverlap: 1
                tab: Rectangle { border.color: styleData.selected ? "black" : "white"
                    implicitWidth: Math.max(edit.width + 4, 80); implicitHeight: 20
                    TextEdit {
                        id: edit; focus: true; anchors.centerIn: parent; text: styleData.title
                    }
                }
            }
        }
    }
    
    


  • I'd prefer to use QuickControls 2, it is way easier to customize them. Here is an example:

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
    
        TabBar {
            width: parent.width
    
            TabButton {
                id: tb1
                text: "Example"
    
                contentItem: Item {
                    Text {
                        id: txt
                        anchors.fill: parent
                        text: tb1.text
                        font: tb1.font
                        color: tb1.checked ? tb1.palette.windowText : tb1.palette.brightText
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                    }
                    TextField {
                        id: tf
                        anchors.centerIn: parent
                        width: parent.width - tb1.padding * 2
                        onAccepted: { tb1.text = text; tb1.state = "default" }
                        horizontalAlignment: TextField.AlignHCenter
                        background: null // hide border of text field
                        selectByMouse: true
                        onActiveFocusChanged: {
                            if (activeFocus)
                                Qt.callLater(selectAll)
                        }
                    }
                }
                onCheckedChanged: {
                    if (!checked)
                        state = "default"
                }
                onDoubleClicked: {
                    if (tb1.state === "default")
                        tb1.state = "editing"
                }
    
                state: "default"
                states: [
                    State {
                        name: "default"
                        PropertyChanges { target: tf; visible: false }
                        PropertyChanges { target: txt; visible: true }
                    },
                    State {
                        name: "editing"
                        PropertyChanges { target: tf; visible: true; text: tb1.text }
                        StateChangeScript { script: { tf.forceActiveFocus(); } }
                        PropertyChanges { target: txt; visible: false }
                    }
                ]
            }
            TabButton {
                text: "Ordinary"
            }
        }
    }
    

    Of course you should put custom TabButton into a separate file for better reusing.



  • OK, thank you for your help, guys :-)


Log in to reply