StackLayout в QML - PullRequest
Новая
       78

StackLayout в QML

0 голосов
/ 06 августа 2020

Требование: я создаю приложение «Настройки» на QML, в котором я разделил экран на сетку. В левой части сетки есть кнопки: «Домой», «Связь», «Настройки» и «Выйти». а с правой стороны должен быть нарисован соответствующий дисплей. В настоящее время я добавил прямоугольник, и когда я нажимаю такие кнопки, как «Домой», «Настройки», «Связь» и т. Д. c ... Код, записанный внутри прямоугольника StackLayout, выполняется успешно.

Вместо того, чтобы писать код в прямоугольнике, я хочу написать код в отдельном файле, например settings.qml, connectivity.qml.

Как для вызова другого файла, нажимая кнопки и устанавливая текущий индекс 

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.3

ApplicationWindow {
id:main1
visible: true
x:0
y:20
width: Screen.width
height: Screen.height
title: qsTr("Settings")

GridLayout {
    id: gridLayout
    width: parent.width
    height:main1.height
    columns: 2


    Rectangle {
       id: left_rect
       width: Screen.width/4
       height: gridLayout.height
       color:"yellow"

       Button {
           id: button
           text: qsTr("Home")
           anchors.right: parent.right
           anchors.rightMargin: 5
           anchors.left: parent.left
           anchors.leftMargin: 5
           anchors.top: parent.top
           anchors.topMargin: 5
           onClicked: {
              layout.currentIndex =  0
           }
       }

       Button {
           id: button1
           x: 1
           y: -4
           text: qsTr("Connectivity")
           anchors.topMargin: 59
           anchors.leftMargin: 5
           anchors.left: parent.left
           anchors.top: parent.top
           anchors.rightMargin: 5
           anchors.right: parent.right
           onClicked: {
               layout.currentIndex =  1
           }

       }

       Button {
           id: button2
           x: 5  
           y: -8
           text: qsTr("Settings")
           anchors.topMargin: 112
           anchors.leftMargin: 5
           anchors.left: parent.left
           anchors.top: parent.top
           anchors.rightMargin: 5
           anchors.right: parent.right
           onClicked: {
               layout.currentIndex =  2
           }
       }

       Button {
           id: button3
           x: 6
           y: -16
           text: qsTr("Quit")
           anchors.topMargin: 172
           anchors.leftMargin: 5
           anchors.left: parent.left
           anchors.top: parent.top
           anchors.rightMargin: 5
           anchors.right: parent.right
           onClicked: {
              Qt.quit()
           }

       }

  }

   Rectangle {
       id: right_rect
       width: ( Screen.width/4 )*3
       height: Screen.height
       color:"green"

       StackLayout {
          id: layout
          anchors.fill: parent
          currentIndex: 0
          
          Rectangle {
                color: 'teal'
                implicitWidth: 200
                implicitHeight: 200
          }
          Rectangle {
                color: 'plum'
                implicitWidth: 300
                implicitHeight: 200
          }
          Rectangle {
                color: 'orange'
                implicitWidth: 300
                implicitHeight: 200
            }
        }
    }
}

1 Ответ

0 голосов
/ 06 августа 2020

Если у вас сейчас 

Rectangle {
            color: 'teal'
            implicitWidth: 200
            implicitHeight: 200
}

замените на 

qmlClassName {
              id: someId
}
...