QML Editable Tab title within TabView on double-click

ebleble

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.

JonB

@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

ebleble

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.

JonB

@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....

Markkyboy

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

IntruderExcluder

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.

ebleble

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