0

我正在尝试编写一个堆栈布局模板，以便在我系统的每个页面中重复使用。我可以知道如何在我的 page1 qml 中编辑或添加索引内容吗？将Panel.qml在我的其他页面上使用不同的选项卡按钮名称。

page1.qml 如下：

Panel {
    id: root      
  }

面板.qml

RoundedPanel { id：根宽度：1250 高度：960 颜色：“透明”

default property alias content: stackLayout.data
property alias tabNames: navBar.buttonNames

NavigationBar {
    id: navBar
    parent: root
}

StackLayout {
    id: stackLayout
    height: parent.height
    width: root.width - navBar.width
    anchors.left: navBar.right
    anchors.verticalCenter: parent.verticalCenter
    currentIndex: navBar.currentIndex
}

}

导航栏.qml

项目{ id：根高度：parent.height 宽度：150 anchors.left：parent.left anchors.verticalCenter：parent.verticalCenter

property var buttonNames: []
property int currentIndex: 0

RoundedPanel { id：tabBar 宽度：parent.width + 半径高度：parent.height anchors.left：parent.left

    Column {
        id: buttonColumn
        topPadding: 80
        spacing: 1

        property alias indexTest: root.currentIndex

        Repeater {
            id: buttonRepeater
            model: root.buttonNames

            WidgetNavigationButton {
                text: buttonRepeater.model[index]
                checked: root.currentIndex == index
                onCheckedChanged: if (checked) { root.setCurrentIndex(index) }
            }
        }
    }
}

导航按钮.qml

TabButton { id：控件高度：75 宽度：150

background: Rectangle {
    width: control.width
    height: control.height

    color: "transparent"
    border.width: Style.accentWidth
    border.color: Colors.accent
}

opacity: enabled ? (checked ? 1.0 : 0.25) : Style.disabledOpacity

contentItem: ButtonText {
    id: buttonText
    width: parent.width
    text: control.text
    font.weight: Font.Bold
    font.pointSize: 18
}

}

4

0 回答 0