Question

我有一个带有stacklayout的标签栏，如下所示：

Rectangle {
    id: rect
    height: 190
    anchors.right: parent.right
    anchors.left: parent.left
    color: "transparent"
    anchors.top: uniqueHandleText.bottom
    anchors.topMargin: 100
    TabBar {
        id: frame
        anchors.right: parent.right
        anchors.left: parent.left
        background: Rectangle {
                color: "#737373"
            }
        x: -hbar.position * width
        Repeater {
            model: wizard.categories

            TabButton {
                id: tabData
                property bool selected: false
                text: modelData.name
                width: 200
                font.pixelSize: 18
                contentItem: Text {
                    text: tabData.text
                    font: tabData.font
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    elide: Text.ElideRight
                    wrapMode: Text.WordWrap
                    color: "#FFFFFF"
                }
                background: Rectangle {
                        implicitWidth: frame.width
                        implicitHeight: 180
                        opacity: enabled ? 1 : 0.3
                        color: tabData.checked ? "#BD9CBE": "#737373"
                    }
            }

        }
    }
    ScrollBar {
            id: hbar
            hoverEnabled: true
            active: hovered || pressed
            orientation: Qt.Horizontal
            size: rect.width / frame.width
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: frame.bottom
        }
    Text {
        font.pixelSize: 18
        text: "Next"
        anchors.right: parent.right
        visible: frame.x != frame.width ? true: false
    }

    StackLayout {
        id: stack1
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: frame.bottom
        currentIndex: frame.currentIndex
        Repeater {
            model: wizard.categories

            Item {
                id: homeTab

                    TabBar {
                        id: homeTabTab
                        anchors.right: parent.right
                        anchors.left: parent.left
                        anchors.top: parent.top
                        height: 180
                        background: Rectangle {
                            color: "#958096"
                        }
                        Repeater {
                            model: modelData.sub_categories
                            TabButton {
                                property bool selected: false
                                id: currentTab
                                text: modelData.name
                                width: 200
                                font.pixelSize: 18
                                background: Rectangle {
                                        implicitWidth: frame.width
                                        implicitHeight: 180
                                        opacity: enabled ? 1 : 0.3
                                        color: currentTab.checked ? "#958096": "#8D758E"
                                    }
                                contentItem: Text {
                                    text: currentTab.text
                                    font: currentTab.font
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
                                    elide: Text.ElideRight
                                    wrapMode: Text.WordWrap
                                    color: "#FFFFFF"
                                    MouseArea {
                                        anchors.fill: parent
                                        onClicked: {
                                            if(currentTab.checked){
                                                currentTab.checked = false
                                            } else {
                                                currentTab.checked = true
                                            }
                                        }
                                        onDoubleClicked: {
                                            currentTab.selected = true
                                            var found = false;
                                            var someText = frame.itemAt(stack1.currentIndex).text;
                                            print(someText)
                                            for(var i = 0; i<wizard.selectedSkills.count; i++){
                                                if(wizard.selectedSkills.get(i).name === someText){
                                                    wizard.selectedSkills.get(i).sub_categories.append({"name":currentTab.text});
                                                    wizard.skills.push({"name": someText})
                                                    found = true;
                                                }
                                            }
                                            if(!found){
                                                print(currentTab.text)
                                                wizard.selectedSkills.append({"name":someText, "sub_categories":[{"name":currentTab.text}]})
                                            }
                                            print(window.selectedSkills)
                                        }
                                    }
                                }

                            }
                        }
                    }
            }
            }
        }
}

我尝试了许多不同的东西来添加滚动条或弄清楚如何使用TabBar具有的可滑动功能。但是，文档并没有详细说明它是如何工作的。因此，它们无法访问（甚至可重写，无法使用这些属性）。我想添加一个像箭头一样的小指示符来指定在TabBar功能之上有更多元素可以在桌面上轻松导航。

Answer 1

看起来似乎没有暴露必要的属性，以便以简单的方式实现这一点。

然而，由于这是QML，这意味着整个对象树对内省的开放程度很大，允许我们确定执行轻弹的项目是contentItem内的ListView Container继承了ToolBar。该视图恰好是第二个可见的孩子，虽然这在技术上是＃34;私人实施＆＃34;那个人不应该依赖。所以最好还是要特别注意确定你是否有正确的对象。

ApplicationWindow {
  id: main
  width: 640
  height: 480
  visible: true

  TabBar {
    id: toolbar
    width: parent.width
    height: 50
    Repeater {
      model: 10
      TabButton {
        text: "test " + index
        width: 100
      }
    }
  }

  Rectangle {
    height: 5
    width: main.width * (view ? view.visibleArea.widthRatio : toolbar.width / toolbar.contentWidth)
    color: "red"
    anchors.top: toolbar.bottom
    x: view ? (main.width - width) * (view.contentX / (view.contentWidth - view.width)) : 0
  }

  property ListView view: {
    var l = toolbar.visibleChildren.length
    while (--l) if ("cacheBuffer" in toolbar.visibleChildren[l]) return toolbar.visibleChildren[l]
    return null
  }
}

你有它。我们迭代tabview子项，直到我们找到一个具有cacheBuffer属性的ListView，这对contentWidth来说是相当独特的，一旦我们有了，我们就可以访问所需的属性。如您所见，对于指标宽度，我们甚至可以在没有列表视图的情况下执行，因为工具栏公开了packagename::fun()属性，但是对于指标位置，没有解决方法。

它有效：

长标签栏 - 添加大小和位置指示器以反映屏幕外标签的存在

1 个答案: