问题
I am very new to programming and trying to get swipeview to dynamically add pages. My main.qml is in the code below . I have the Settings page Serialsettings.qml displayed statically . Now i would like to add other qml pages . The way how i want to do this is by having check boxes in my settings page for each qml , and if they are ticket they should be added to the swipeview . How do i do this ?
import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1
import com.powertune 1.0
ApplicationWindow {
visible: true
minimumWidth: 800
minimumHeight: 480
title: qsTr("PowerTune")
color: "black"
SwipeView {
id: view
currentIndex: 0
anchors.fill: parent
Item {
id: firstpage
SerialSettings{} // Loads Serialsettings.qml into SwipeView
}
//Add pages dynamically via Checkboxes in Serialsettings.qml
}
PageIndicator {
id: indicator
count: view.count
currentIndex: view.currentIndex
anchors.bottom: view.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
回答1:
I've prepared a small example for you. It will show you how to have a page with three checkboxes. With thier help the user could add/remove the corresponding pages on demand.
The strategy used in this example is to have the pages prepared and hidden. Then add them to the view and show them if necessary, or hide them back and remove them from the view if the user want so.
Here is the form with the three checkboxes, namely chkPage1, chkPage2 and chkPage3. You may add as many checkboxes as you want, just follow the same pattern. Of course, feel free to rearrange and customize them. In this example I am using aliases, i.e. property alias chkPagex: chkPagex
. You may find it better to use signals, but let's make it this way just for the sake of the demonstration.
SerialSettingsForm.ui.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
Item {
property alias chkPage1: chkPage1
property alias chkPage2: chkPage2
property alias chkPage3: chkPage3
ColumnLayout {
id: columnLayout
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.fill: parent
CheckBox {
id: chkPage1
text: qsTr("Page 1")
}
CheckBox {
id: chkPage2
text: qsTr("Page 2")
}
CheckBox {
id: chkPage3
text: qsTr("Page 3")
}
}
}
Now let's add some functionality to the checkboxes. Basically, when the user iteracts with a particular checkbox a function of the SwipeView will be called with the corresponding page as parameter. We will worry about those functions later.
SerialSettings.qml
import QtQuick 2.7
SerialSettingsForm {
chkPage1.onClicked: { chkPage1.checked ? view.addPage(page1) : view.removePage(page1) }
chkPage2.onClicked: { chkPage2.checked ? view.addPage(page2) : view.removePage(page2) }
chkPage3.onClicked: { chkPage3.checked ? view.addPage(page3) : view.removePage(page3) }
}
Finally, here is the content of the main.qml:
main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
ApplicationWindow {
visible: true
minimumWidth: 800
minimumHeight: 480
title: qsTr("PowerTune")
color: "lightBlue"
SwipeView {
id: view
currentIndex: 0
anchors.fill: parent
function addPage(page) {
addItem(page)
page.visible = true
}
function removePage(page) {
for (var n = 0; n < count; n++) { if (page === itemAt(n)) { removeItem(n) } }
page.visible = false
}
SerialSettings {
id: firstpage
}
}
PageIndicator {
id: indicator
count: view.count
currentIndex: view.currentIndex
anchors.bottom: view.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
Page {
id: page1
visible: false;
background: Rectangle { color: "yellow" }
Label {
text: "Page1"
}
}
Page {
id: page2
visible: false;
background: Rectangle { color: "lightGreen" }
Label {
text: "Page2"
}
}
Page {
id: page3
visible: false;
background: Rectangle { color: "magenta" }
Label {
text: "Page3"
}
}
}
Please make a note of these two functions added to the SwipeView, i.e. function addPage(page)
and function removePage(page)
. In this example the pages are always added to the end of the view. If you want to have them always in accending order you have to make the above mentioned functions more elaborate. Check here the members inherited from Container if you want to play around with it.
来源:https://stackoverflow.com/questions/44117208/qml-swipeview-dynamically-add-pages