QML Swipeview가 페이지를 동적으로 추가합니다.

Question

저는 프로그래밍에 매우 익숙하며 스 와이프 뷰를 동적으로 추가하려고합니다. main.qml은 아래 코드에 있습니다. Serialsettings.qml이 정적으로 표시되는 설정 페이지가 있습니다. 이제 다른 qml 페이지를 추가하고 싶습니다. 이 작업을 수행하는 방법은 각 qml의 설정 페이지에서 확인란을 사용하는 것입니다. 티켓이 있으면 swipeview에 추가해야합니다. 어떻게해야합니까?

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의 함수는 해당 페이지과 함께 호출됩니다. 우리는 나중에 그 기능들에 대해 걱정할 것입니다.

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

이들의 메모를 확인하시기 바랍니다

main.qml :

마지막으로 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의 내용입니다 두 가지 기능이 에 추가되었습니다. SwipeView, 즉 function addPage(page) 및 function removePage(page). 이 예제에서 페이지는 항상 뷰의 끝에 추가됩니다. 당신이 그들을 항상 강조 순서대로 갖고 싶다면 위에서 언급 한 기능들을보다 정교하게 만들어야합니다. here에서 컨테이너 ()를 상속받은 멤버를 확인하십시오.