add navbar

This commit is contained in:
王劲鹏 2021-06-09 11:44:27 +08:00 committed by osborn
parent dba0569256
commit 37ef313c10

View File

@ -1,89 +1,111 @@
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.15
ApplicationWindow {
visible: true
width: 600
height: 800
height: 844
title: qsTr("Doric Demo")
StackView {
id: stack
objectName: "stackView"
ColumnLayout{
spacing: 0
anchors.fill: parent
initialItem: ScrollView {
id: entry
anchors.fill: parent
Rectangle {
id: navbar
color: "red"
visible: false
Layout.fillWidth: true
Layout.preferredHeight: 44
}
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
ListView {
width: parent.width
model: 23
delegate: Rectangle {
Column {
anchors.centerIn: parent
Text {
text: {
switch (index) {
case 0:
return "ComponetDemo.js"
case 1:
return "Counter.js"
case 2:
return "DraggableDemo.js"
case 3:
return "EffectsDemo.js"
case 4:
return "FlexDemo.js"
case 5:
return "Gobang.js"
case 6:
return "ImageDemo.js"
case 7:
return "InputDemo.js"
case 8:
return "LayoutDemo.js"
case 9:
return "LayoutTestDemo.js"
case 10:
return "ModalDemo.js"
case 11:
return "ModularDemo.js"
case 12:
return "NavigatorDemo.js"
case 13:
return "NetworkDemo.js"
case 14:
return "NotificationDemo.js"
case 15:
return "PopoverDemo.js"
case 16:
return "ScrollerDemo.js"
case 17:
return "SimpleDemo.js"
case 18:
return "SliderDemo.js"
case 19:
return "Snake.js"
case 20:
return "StorageDemo.js"
case 21:
return "SwitchDemo.js"
case 22:
return "TextDemo.js"
StackView {
id: stack
objectName: "stackView"
anchors.fill: parent
initialItem: ScrollView {
id: entry
anchors.fill: parent
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
ListView {
width: parent.width
model: 23
boundsBehavior: Flickable.StopAtBounds
delegate: Rectangle {
Column {
anchors.centerIn: parent
Text {
text: {
switch (index) {
case 0:
return "ComponetDemo.js"
case 1:
return "Counter.js"
case 2:
return "DraggableDemo.js"
case 3:
return "EffectsDemo.js"
case 4:
return "FlexDemo.js"
case 5:
return "Gobang.js"
case 6:
return "ImageDemo.js"
case 7:
return "InputDemo.js"
case 8:
return "LayoutDemo.js"
case 9:
return "LayoutTestDemo.js"
case 10:
return "ModalDemo.js"
case 11:
return "ModularDemo.js"
case 12:
return "NavigatorDemo.js"
case 13:
return "NetworkDemo.js"
case 14:
return "NotificationDemo.js"
case 15:
return "PopoverDemo.js"
case 16:
return "ScrollerDemo.js"
case 17:
return "SimpleDemo.js"
case 18:
return "SliderDemo.js"
case 19:
return "Snake.js"
case 20:
return "StorageDemo.js"
case 21:
return "SwitchDemo.js"
case 22:
return "TextDemo.js"
}
}
}
}
width: parent.width
height: 60
MouseArea {
anchors.fill: parent
onClicked: {
demoBridge.navigate(index)
}
}
}
}
width: parent.width
height: 60
MouseArea {
anchors.fill: parent
onClicked: {
demoBridge.navigate(index)
}
}
}
@ -93,5 +115,19 @@ ApplicationWindow {
function navigatorPush(page) {
stack.push(page)
if (stack.depth > 1) {
navbar.visible = true
} else {
navbar.visible = false
}
}
function navigatorPop() {
stack.pop()
if (stack.depth > 1) {
navbar.visible = true
} else {
navbar.visible = false
}
}
}