在 SwipeView QML 上动态添加 QML 页面
Add dynamically QML Page on SwipeView QML
我需要在 swipeview 上动态添加页面。
所以我的代码:
SwipeView {
id: viewSwipe
width: parent.width
height: parent.height * 0.70
currentIndex: 0
Component.onCompleted: {
curIndexWitouthZero = viewSwipe.currentIndex
curIndexWitouthZero += 1
addPage(RecipesPhase)
}
onCurrentIndexChanged: {
curIndexWitouthZero = viewSwipe.currentIndex
curIndexWitouthZero += 1
}
Item {
id: firstPage
RecipesPhase{}
}
}
PageIndicator {
id: indicator
interactive: true
count: viewSwipe.count
currentIndex: viewSwipe.currentIndex
anchors.top: viewSwipe.bottom
anchors.topMargin: parent.height * 0.05
anchors.horizontalCenter: parent.horizontalCenter
}
我有一个按钮,单击该按钮时,事件应该像项目一样添加页面。
我的代码是:
MouseArea{
anchors.fill: parent
onClicked: {
console.log("Cliccato additem")
//viewSwipe.addItem(RecipesPhase)
viewSwipe.addPage(RecipesPhase)
}
}
但是什么也没发生。所以我也试过了:
SwipeView {
id: viewSwipe
width: parent.width
height: parent.height * 0.70
currentIndex: 0
Component.onCompleted: {
curIndexWitouthZero = viewSwipe.currentIndex
curIndexWitouthZero += 1
addPage(RecipesPhase)
}
onCurrentIndexChanged: {
curIndexWitouthZero = viewSwipe.currentIndex
curIndexWitouthZero += 1
}
function addPage(page) {
console.log("funzione addPage()")
addItem(page)
page.visible = true
}
}
然后调用:
viewSwipe.addPage(MyPageQML)
但什么也没发生。
所以,问题是,我哪里错了?感谢您的解决方案。
RecipesPhase 是一个组件而不是一个项目,一个组件类似于一个 class,一个项目类似于一个对象,所以这个想法是动态创建项目。例如,我会认为 RecipesPhase 是以下组件:
RecipesPhase.qml
import QtQuick 2.0
Rectangle {
width: 100
height: 100
color: "red"
}
然后每次按下 mouseArea 都会创建一个随机颜色的 RecipesPhase:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4
Window {
visible: true
width: 640
height: 480
title: qsTr("Example")
property int curIndexWitouthZero: 0
SwipeView {
id: viewSwipe
width: parent.width
height: parent.height * 0.70
currentIndex: 0
Component.onCompleted: {
curIndexWitouthZero = viewSwipe.currentIndex
curIndexWitouthZero += 1
addPage(createPage())
}
onCurrentIndexChanged: {
curIndexWitouthZero = viewSwipe.currentIndex
curIndexWitouthZero += 1
}
function addPage(page) {
console.log("funzione addPage()")
addItem(page)
page.visible = true
}
function createPage(){
var component = Qt.createComponent("RecipesPhase.qml");
var page = component.createObject(viewSwipe,
{"color": Qt.rgba(Math.random(), Math.random(), Math.random(), Math.random())}
);
return page
}
}
PageIndicator {
id: indicator
interactive: true
count: viewSwipe.count
currentIndex: viewSwipe.currentIndex
onCurrentIndexChanged: viewSwipe.currentIndex = currentIndex
anchors.top: viewSwipe.bottom
anchors.topMargin: parent.height * 0.05
anchors.horizontalCenter: parent.horizontalCenter
}
MouseArea{
anchors.top: indicator.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
onClicked: viewSwipe.addPage(viewSwipe.createPage())
}
}
我需要在 swipeview 上动态添加页面。 所以我的代码:
SwipeView {
id: viewSwipe
width: parent.width
height: parent.height * 0.70
currentIndex: 0
Component.onCompleted: {
curIndexWitouthZero = viewSwipe.currentIndex
curIndexWitouthZero += 1
addPage(RecipesPhase)
}
onCurrentIndexChanged: {
curIndexWitouthZero = viewSwipe.currentIndex
curIndexWitouthZero += 1
}
Item {
id: firstPage
RecipesPhase{}
}
}
PageIndicator {
id: indicator
interactive: true
count: viewSwipe.count
currentIndex: viewSwipe.currentIndex
anchors.top: viewSwipe.bottom
anchors.topMargin: parent.height * 0.05
anchors.horizontalCenter: parent.horizontalCenter
}
我有一个按钮,单击该按钮时,事件应该像项目一样添加页面。 我的代码是:
MouseArea{
anchors.fill: parent
onClicked: {
console.log("Cliccato additem")
//viewSwipe.addItem(RecipesPhase)
viewSwipe.addPage(RecipesPhase)
}
}
但是什么也没发生。所以我也试过了:
SwipeView {
id: viewSwipe
width: parent.width
height: parent.height * 0.70
currentIndex: 0
Component.onCompleted: {
curIndexWitouthZero = viewSwipe.currentIndex
curIndexWitouthZero += 1
addPage(RecipesPhase)
}
onCurrentIndexChanged: {
curIndexWitouthZero = viewSwipe.currentIndex
curIndexWitouthZero += 1
}
function addPage(page) {
console.log("funzione addPage()")
addItem(page)
page.visible = true
}
}
然后调用:
viewSwipe.addPage(MyPageQML)
但什么也没发生。 所以,问题是,我哪里错了?感谢您的解决方案。
RecipesPhase 是一个组件而不是一个项目,一个组件类似于一个 class,一个项目类似于一个对象,所以这个想法是动态创建项目。例如,我会认为 RecipesPhase 是以下组件:
RecipesPhase.qml
import QtQuick 2.0
Rectangle {
width: 100
height: 100
color: "red"
}
然后每次按下 mouseArea 都会创建一个随机颜色的 RecipesPhase:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4
Window {
visible: true
width: 640
height: 480
title: qsTr("Example")
property int curIndexWitouthZero: 0
SwipeView {
id: viewSwipe
width: parent.width
height: parent.height * 0.70
currentIndex: 0
Component.onCompleted: {
curIndexWitouthZero = viewSwipe.currentIndex
curIndexWitouthZero += 1
addPage(createPage())
}
onCurrentIndexChanged: {
curIndexWitouthZero = viewSwipe.currentIndex
curIndexWitouthZero += 1
}
function addPage(page) {
console.log("funzione addPage()")
addItem(page)
page.visible = true
}
function createPage(){
var component = Qt.createComponent("RecipesPhase.qml");
var page = component.createObject(viewSwipe,
{"color": Qt.rgba(Math.random(), Math.random(), Math.random(), Math.random())}
);
return page
}
}
PageIndicator {
id: indicator
interactive: true
count: viewSwipe.count
currentIndex: viewSwipe.currentIndex
onCurrentIndexChanged: viewSwipe.currentIndex = currentIndex
anchors.top: viewSwipe.bottom
anchors.topMargin: parent.height * 0.05
anchors.horizontalCenter: parent.horizontalCenter
}
MouseArea{
anchors.top: indicator.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
onClicked: viewSwipe.addPage(viewSwipe.createPage())
}
}