从 TabView 获取活动 Tab 并更改项目属性 [英] Get active Tab from TabView and change item property

问题描述

在双窗格文件管理器的上下文中，我有两个TabView 项目并排，当然每个都包含多个选项卡，每个 Tab 加载一个 TableView 使用 FolderListModel<显示特定目录的内容/代码>.

In the context of a dual-pane file manager, I have two TabView items side by side, each contains multiple tabs of course, and each Tab loads a TableView showing the content of a specific directory using FolderListModel.

SplitView
    TabView
        Tab
        Tab
    TabView
        Tab

我当前的任务是实现一个工具栏按钮来切换 active 选项卡中显示的 FolderListModel 实例的 showHidden 属性.因此，我需要一种方法来找出当前活动的选项卡是什么.

My current task is to implement a toolbar button to toggle the showHidden property of the FolderListModel instance shown in the active tab. Therefore, I need a way to find out what the currently active tab is.

接下来，一旦我获得了活动的Tab，我需要改变Tab.item.some_property，特别是感兴趣的属性是show_hidden，它是底层 FolderListModel 的 showHidden 属性的别名.例如，一个硬编码的场景是:

Next, once I get the active Tab, I need to change Tab.item.some_property, in particular, the property of interest is show_hidden, which is an alias to the showHidden property of the underlying FolderListModel. For example, a hard-coded scenario would be:

ToolButton {
    onClicked: {
        tab1.item.show_hidden = false;
        tab1.destroy();  // need "refresh" instead
    }
}

首先我需要根据它是否处于活动状态来获取 tab1，其次，在我更改 show_hidden 后，视图不会自行刷新，所以我需要调用某种重新加载函数，但哪个?或者也许重新加载不是最好的方法?是否可以使用自定义信号处理程序来做到这一点?(同样，我只能从概念上思考，不知道如何实现.)

First I need to get tab1 based on whether it is active, and second, after I change show_hidden, the view doesn't refresh by itself, so I need to call some kind of reload function, but which? Or maybe reload isn't the best way to do it? Is it possible to do it using a custom signal handler? (Again I can only think conceptually without knowing how to implement it.)

建议我在下面发布一个运行示例:

As suggested I'm posting a running example below:

/* main.qml */
import QtQuick 2.4
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

ApplicationWindow {
    visible: true
    width: 1280
    height: 700

    toolBar: ToolBar {
        RowLayout {
            anchors.fill: parent

            ToolButton {
                onClicked: {    // TODO toggle folderModel.showHidden property
                    tab1A.item.show_hidden = false;
//                    tab1A.destroy();  // fixme how to refresh the view?
                }
            }
        }
    }

    Item {
        anchors.fill: parent

        SplitView {
            id: splitView
            anchors.fill: parent

            TabView {
                id: tabView1
                width: splitView.width / 2

                Tab {
                    id: tab1A

                    title: qsTr("Home")
                    source: "dirview.qml"

                    onLoaded: {
                        item.folder_url = "file:///tmp";
                    }
                }

                Tab {
                    title: qsTr("Folder")
                    source: "dirview.qml"
                    onLoaded: {
                        item.folder_url = "file:///home";
                    }
                }
            }

            TabView {
                id: tabView2

                Tab {
                    title: qsTr("Home")
                    source: "dirview.qml"
                    onLoaded: {
                        item.folder_url = "file:///home";
                    }
                }
            }
        }
    }
}

<小时>

/* dirview.qml */
import QtQuick 2.4
import QtQuick.Controls 1.4
import Qt.labs.folderlistmodel 2.1

TableView {
    property alias folder_url: folderModel.folder
    property alias show_hidden: folderModel.showHidden

    id: tableView
    anchors.fill: parent

    TableViewColumn {
        role: "fileName"
        title: qsTr("Name")
        width: tableView.width * 0.7
    }

    TableViewColumn {
        role: "fileSize"
        title: qsTr("Size")
        width: tableView.width * 0.2
    }

    FolderListModel {
        id: folderModel
        nameFilters: ["*"]
        showHidden: true
        showDirsFirst: true
        showDotAndDotDot: true
    }

    model: folderModel
}

谢谢.

注意到一些奇怪的东西:Tab.item.folder_url 有正确的信息，但是，Tab.item.show_hidden 总是 false，即使如果我删除手动将其设置为 false 的行.这很难理解，因为我最初在 dirview.qml 中将 FolderListModel.showHidden 设置为 true.

Noticed something weird: Tab.item.folder_url has the right info, however, Tab.item.show_hidden is always false, even if I remove the line where I manually set it to false. This is hard to understand as I initially set FolderListModel.showHidden to true in dirview.qml.

ToolButton {
    onClicked: {    // TODO toggle folderModel.showHidden property
        var cur_tab_idx = tabView1.currentIndex;

        console.log(tabView1.getTab(cur_tab_idx).item.folder_url);
        console.log(tabView1.getTab(cur_tab_idx).item.show_hidden);
    }
}

推荐答案

在活动 TabView(窗格)中查找当前 Tab 的解决方案:声明一个属性 SplitView 存储具有 activeFocus 的 TabView.

Solution to finding the current Tab in the active TabView (pane): declare a property of SplitView to store the TabView that has activeFocus.

添加了一个 StatusBar 来演示该功能.

A StatusBar is added to demo the functionality.

import QtQuick 2.4
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

ApplicationWindow {
    visible: true
    width: 1280
    height: 700

    toolBar: ToolBar {
        RowLayout {
            anchors.fill: parent

            ToolButton {
                onClicked: {    // TODO toggle folderModel.showHidden property
                    // Demo: get the current tab of the active pane
                    var active_pane = splitView.activePane;
                    var cur_tab_idx = active_pane.currentIndex;
                    var cur_tab_item = active_pane.getTab(cur_tab_idx).item;
                    testLabel.text = cur_tab_item.folder_url;
                }
            }
        }
    }

    SplitView {
        id: splitView

        property TabView activePane: tabView1

        anchors.fill: parent

        TabView {
            id: tabView1
            width: splitView.width / 2

            onActiveFocusChanged: {
                if (activeFocus) {
                    splitView.activePane = tabView1;
                }
            }

            Tab {
                title: qsTr("tmp")
                source: "dirview.qml"
                onLoaded: {
                    item.folder_url = "file:///tmp";
                }
            }

            Tab {
                title: qsTr("home")
                source: "dirview.qml"
                onLoaded: {
                    item.folder_url = "file:///home";
                }
            }
        }

        TabView {
            id: tabView2

            onActiveFocusChanged: {
                if (activeFocus) {
                    splitView.activePane = tabView2;
                }
            }

            Tab {
                title: qsTr("bin")
                source: "dirview.qml"
                onLoaded: {
                    item.folder_url = "file:///bin";
                }
            }
        }
    }
    statusBar: StatusBar {
        RowLayout {
            Label {
                text: (splitView.activePane === tabView1) ? "Pane 1" : "Pane 2"
            }
            Label {
                id: testLabel
            }
        }
    }
}

这篇关于从 TabView 获取活动 Tab 并更改项目属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！