在QML

Question

我正在尝试根据活动标签的状态/功能启用/禁用工具栏按钮（任何UI状态）。

所以说我们有一个带有Save（文件）按钮的工具栏，第一个选项卡报告可以保存文件（或其他），因此启用了Save按钮，但切换到第二个选项卡应禁用Save按钮，因为它报告无法保存文件。

此报告使用QML中Tab对象本身的其他属性/函数完成。

在TabView上实现onCurrentIndexChanged确实提供了设置按钮初始状态的机会。但问题是，用户可以 - 例如 - 在第二个选项卡中选择一些东西，使其能够保存文件 - 这应该（重新）启用工具栏中的“保存”按钮。

这是我们可以作为共同基础使用的一些框架代码。 Main.qml

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "Update UI Test"

    header: ToolBar {
        ToolButton {
            id: toolButton
            text: "?"
        }
    }

    TabView {
        id: tabView
        anchors.fill: parent

        Tab {
            title: "Tab 1"
            PageTest {
            }
        }

        Tab {
            title: "Tab 2"
            PageTest {
            }
        }
    }
}

PageTest.qml

Page {
    property alias checked: checkBox.checked

    CheckBox {
        id: checkBox
        x: 200
        y: 100
        text: "Enable"
    }
}

我不知道如何连接点以使其正常工作。

Answer 1

回答我自己的问题，希望有一天这对其他人有用。

这是我如何工作的代码。当然，我的真实场景更复杂，但孤立这个问题确实带来了新的知识。

在每个页面上，您必须声明相同的接口（属性/方法/信号），以便主调用页面将所有页面视为相同的类型。

我选择在页面上定义的信号中传递对象本身。这允许任何连接的槽访问属性和方法的接口（在本例中为'checked'-alias-属性）。

然后我在知道如何更新UI的中心位置创建了一个函数 -  主窗口上的updateUI功能 - 并且当Tab完成加载时，连接到每个信号的每个页面都有一个。我不知道连接这些的任何其他位置。

最后，onCurrentIndexChanged处理程序确保在切换选项卡时UI更新为新选择页面的状态。

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "Update UI Test"

    function updateUI(page) {
        toolButton.enabled = page.checked
    }

    header: ToolBar {
        ToolButton {
            id: toolButton
            text: "?"
        }
    }

    TabView {
        id: tabView
        anchors.fill: parent

        Tab {
            title: "Tab 1"
            PageTest {
                Component.onCompleted: {
                    changed.connect(updateUI)
                }
            }
        }

        Tab {
            title: "Tab 2"
            PageTest {
                Component.onCompleted: {
                    changed.connect(updateUI)
                }
            }
        }

        onCurrentIndexChanged: {
            updateUI(tabView.getTab(tabView.currentIndex).children[0])
        }
    }
}


Page {
    id: page
    property alias checked: checkBox.checked

    signal changed(variant page)

    CheckBox {
        id: checkBox
        x: 200
        y: 100
        text: "Enable"

        onCheckStateChanged: {
            changed(page)
        }
    }
}