QML Swipeviewは動的にページを追加します

Question

プログラミングには新しく、スワイプビューに動的にページを追加しようとしています。 私のmain.qmlは以下のコードにあります。私は静的に表示された設定ページSerialsettings.qmlを持っています。今、私は他のqmlページを追加したいと思います。どのようにしたいのかは、各qmlの設定ページにチェックボックスを入れて、チケットの場合はスワイプビューに追加する必要があります。私はこれをどのようにして行うのですか？

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 
    } 
} 

Answer 1

私は小さな例を用意しました。 3つのチェックボックスがあるページを表示する方法を示します。必要に応じて、対応するページを追加/削除することができます。

この例で使用する戦略は、ページを準備して非表示にすることです。その後、それらをビューに追加し、必要に応じて表示したり、ユーザーが望む場合は、ビューを非表示にしてビューから削除したりします。ここ

三のチェックボックス、すなわち、chkPage1、chkPage2とchkPage3有する形態です。あなたは、同じパターンに従うだけで、必要な数のチェックボックスを追加することができます。もちろん、自由に並べ替えてカスタマイズすることができます。この例では、エイリアスを使用しています（property alias chkPagex: chkPagex）。信号を使う方が良いかもしれませんが、デモのためだけにこのようにしましょう。

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") 
     } 
    } 
} 

は、今度は、チェックボックスにいくつかの機能を追加してみましょう。基本的に、ユーザが特定のチェックボックスで反復するとき、SwipeViewの機能は、対応するページをパラメータとして呼び出されます。後でその機能について心配します。

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) } 
} 

は最後に、ここで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" 
     } 
    } 
} 

これらをメモしてくださいSwipeViewに追加された2つの機能、つまりfunction addPage(page)およびfunction removePage(page)。この例では、ページは常にビューの最後に追加されます。それらを常にアクセントの順序にしたい場合は、上記の関数をより精巧にする必要があります。 hereコンテナから継承したメンバーをチェックしてください。