Ряди сторінок і стоси сторінок

Додавання у програму динаміки: різні способи додавання, вилучення і зміни сторінок

PageRow

PageRow є контейнером, у якому елементи компонуються горизонтально у рядок. Якщо усі дочірні елементи не вміщуються до PageRow , контейнер поводиться подібно до поверхні Flickable і стає горизонтальною панеллю зі стовпчиками і гортанням.

PageRow може показувати окрему сторінку або декілька сторінок у форматі таблиці зі стовпчиками, залежно від ширини вікна. На телефоні сторінки буде показано в один стовпчик, а на планшеті або комп’ютері може бути показано декілька стовпчиків.

Стовпчики можуть бути однакового фіксованого розміру, мати розмір, який визначається implicitWidth, або мати автоматично визначений розмір з заповненням усієї ширини вікна. Типово, останній стовпчик буде розширено так, щоб було заповнено увесь доступний простір.

Знімок PageRow

Доступ до методів панелі зі стовпчиками можна отримати за допомогою властивості pageStack вашого елемента Kirigami.ApplicationWindow або з будь-якого іншого місця за допомогою applicationWindow().pageStack.

Початкова сторінка додається за допомогою властивості pageStack.initialPage. Приклад: у простій програмі, у якій потрібне розпізнавання користувача, початковою сторінкою буде сторінка входу до системи.

Kirigami.ApplicationWindow {
    pageStack.initialPage: LoginPage {}
}

Щойно користувач увійде до системи, вам слід замінити сторінку входу на домашню сторінку програми. Для цього ви можете скористатися pageStack.replace, вилучивши сторінку LoginPage і замінивши її на HomePage.

// LoginPage.qml
Kirigami.Page {
    // форма входу

    Button {
        onClicked: {
            const user = Backend.authentificate(usernameField.text, passwordField.text);
            if (user) {
                applicationWindow().pageStack.replace("qrc:/HomePage.qml", {
                    user: user, // надає зареєстрованому користувачеві відомості щодо домашньої
                                // сторінки
                });
            } else {
                // показ повідомлення про помилку
            }
        }
    }
}

Тепер уявімо, що у вас є сторінка налаштувань, доступ до якої ви хочете відкрити з HomePage. Вам хотілося б, щоб користувач міг повернутися до HomePage, тому ви не можете скористатися replace. Замість цього, ви можете скористатися push для заштовхування нової сторінки до стосу сторінок.

// ConfigurationPage.qml
Kirigami.Page {
    required property string var1
}
// HomePage.qml
applicationWindow().pageStack.push("qrc:/MyPage.qml", {
    'var1': 'Hello',
});

Ви також можете:

  • виштовхнути сторінку (останню сторінку у стосі при цьому буде вилучено) або
  • скористатися insertPage для вставлення сторінки до певної позиції у стоці,
  • скористатися movePage для пересування вказаних сторінок у стосі або
  • очистити стос від усіх сторінок.

Ви також можете змінити currentIndex для визначення поточної активної сторінки програмним шляхом або скористатися flickBack для імітації пересування сторінки назад у стосі.

Шари

До цього ми спостерігали лише роботу горизонтальної навігації у двовимірному стосі. Але ви можете скористатися шарами у вашій програмі для заштовхування повноекранної сторінки до вашої програми.

У цьому випадку видимою на мобільному пристрої або комп’ютері одночасно є лише одна сторінка.

Доступ до шарів можна отримати за допомогою pageStack.layers. Шари використовують той самий програмний інтерфейс, що і pageStack.