Блог

Предположим, у меня есть окно QML, которое содержит множество различных элементов управления:

 Window {
  ...

  TextEdit { ... }
  CheckBox { ... }
  Button { ... }
  etc
  

}

Теперь я хочу, чтобы мое окно меняло «режим» при определенном событии и отображало совершенно другой набор элементов управления.

Представьте, что это часть многоэкранной формы. Текущее состояние — это первая страница формы. Когда пользователь нажимает кнопку «Далее», он переходит на страницу 2 формы. Я хочу добавить новый набор элементов управления, который представляет страницу 2.

Как правильно организовать это в QtQuick / QML?

Обычный способ сделать это с помощью StackView. Организация была бы примерно такой:

 Window {
    StackView {
        id: stackView
        initialItem: page1
    }
    Item {
        id: footerItem
        // Maybe add other buttons here too
        Button {
            id: nextBtn
            text: "Next"
            onClicked: {
                stackView.push(page2);
            }
        }
    }

    Component {
        id: page1
        Page1 {
             // Define this in separate Page1.qml file
             // This is where your page 1 controls go.
        }
    }
    Component {
        id: page2
        Page2 {
             // Define this in separate Page2.qml file
             // This is where your page 2 controls go.
        }
    }

}
  

Я бы, вероятно, реализовал режим изменения вида или формы с помощью кнопок «Назад» и «Далее», используя StackLayout. StackLayout Класс предоставляет стек элементов, в котором одновременно виден только один элемент. Вы переходите к следующему или предыдущему режиму путем обновления currentIndex .

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