Користування галереєю Kirigami

Використання Галереї Kirigami для пошуку взірців коду

Галерея Kirigami — ваш друг-помічник у розробці програм Kirigami. Це програма, яка використовує можливості Kirigami, надає посилання на початковий код, підказки щодо використання компонентів, а також посилання на відповідні сторінки настанов щодо зручності інтерфейсу (HIG).

Пошук таблиці карток

Здійснюючи навігацію програмою «Галерея Kirigami», ми знаходимо компонент «Режим таблиці карток» («Grid view of cards»). Це чудовий кандидат для прикладу показу таблиці карток контактів.

Список компонентів галереї kirigami

Після вибору пункту «Grid view of cards» ми натиснемо нижню кнопку дії і отримаємо певні корисні відомості щодо типів Card і Abstract Card.

Панель таблиці галереї Kirigami

У цьому вікні відомостей ми також знайдемо посилання на початковий код панелі таблиці карток. Перейдемо до цієї сторінки.

Реалізація таблиці карток

Ми повторно використаємо більшу частину коду, який зберігається на сторінці початкового коду галереї панелі таблиці карток. Зокрема, ми вилучимо зайві частини OverlaySheet (який є реалізацією галереї Kirigami, яка допомогла нам дістатися сховища початкового коду kirigami-gallery).

Отже, ми маємо намір замінити компонент Page main.qml базової програми наведеними нижче кодом сторінки із гортанням:

Kirigami.ScrollablePage {
    title: i18n("Address book (prototype)")

    Kirigami.CardsGridView {
        id: view

        model: ListModel {
            id: mainModel
        }

        delegate: card
    }
}

Ми вже створили ScrollablePage і вставили до нього CardsGridView , оскільки нам потрібно показати таблицю карток, створену на основі моделі. Дані кожного з контактів надаються ListModel, а за показ даних відповідає делегат картки. Щоб дізнатися більше про моделі і панелі перегляду у Qt Quick, зверніться до цієї сторінки.

Тепер заповнимо модель, яка надаватиме вашій панелі таблиці дані. У визначенні Kirigami.ScrollablePage , одразу після:

      delegate: card
    }

додайте таке:

Component.onCompleted: {
    mainModel.append({"firstname": "Pablo", "lastname": "Doe", "cellphone": "6300000002", "email" : "jane-doe@example.com", "photo": "qrc:/konqi.jpg"});
    mainModel.append({"firstname": "Paul", "lastname": "Adams", "cellphone": "6300000003", "email" : "paul-adams@example.com", "photo": "qrc:/katie.jpg"});
    mainModel.append({"firstname": "John", "lastname": "Doe", "cellphone": "6300000001", "email" : "john-doe@example.com", "photo": "qrc:/konqi.jpg"});
    mainModel.append({"firstname": "Ken", "lastname": "Brown", "cellphone": "6300000004", "email" : "ken-brown@example.com", "photo": "qrc:/konqi.jpg"});
    mainModel.append({"firstname": "Al", "lastname": "Anderson", "cellphone": "6300000005", "email" : "al-anderson@example.com", "photo": "qrc:/katie.jpg"});
    mainModel.append({"firstname": "Kate", "lastname": "Adams", "cellphone": "6300000005", "email" : "kate-adams@example.com", "photo": "qrc:/konqi.jpg"});
}

Частина нашої реалізації, пов'язана із моделлю, готова. Продовжимо визначенням делегата, який відповідатиме за показ даних. Отже, ми додаємо такий код на сторінку main.qml одразу після визначення Component.onCompleted:

Component {
    id: card

    Kirigami.Card {

        height: view.cellHeight - Kirigami.Units.largeSpacing

        banner {
            title: model.firstname + " " + model.lastname
            titleIcon: "im-user"
        }

        contentItem: Column {
            id: content

            spacing: Kirigami.Units.smallSpacing

            Controls.Label {
                wrapMode: Text.WordWrap
                text: "Mobile: " + model.cellphone
            }

            Controls.Label {
                wrapMode: Text.WordWrap
                text: "Email: " + model.email
            }
        }
    }
}

Виконуючи настанови на сторінці програмного інтерфейсу ми заповнюємо «банер» (хоча ще не маємо зображення), який слугуватиме верхнім колонтитулом, який показуватиме ім'я контакту, а також піктограму контакту.

Основний вміст картки заповнюватиметься номером мобільного телефону та адресою електронної пошти контакту із структуруванням за стовпчиком міток.

Вікно програми має виглядати так:

Проста таблиця карток

На останньому кроці ми додамо певну фіктивну функціональність для кожної картки. Зокрема, буде додано дію «call» («виклик»). Замість реального виклику буде показано пасивне сповіщення. Отже, змінимо компонент картки на таке:

Component {
    id: card

    Kirigami.Card {

        height: view.cellHeight - Kirigami.Units.largeSpacing

        banner {
            title: model.firstname + " " + model.lastname
            titleIcon: "im-user"
        }

        contentItem: Column {
            id: content

            spacing: Kirigami.Units.smallSpacing

            Controls.Label {
                wrapMode: Text.WordWrap
                text: "Mobile: " + model.cellphone
            }

            Controls.Label {
                wrapMode: Text.WordWrap
                text: "Email: " + model.email
            }
        }

        actions: [
            Kirigami.Action {
                text: "Call"
                icon.name: "call-start"

                onTriggered: { showPassiveNotification("Calling " + model.firstname + " " + model.lastname + " ...") }
            }
        ]
    }
}

Отже, нами додано кнопку дії , яка при вмиканні (натисканні кнопки дії) покаже пасивне сповіщення .

Нарешті, вікно нашої програми має виглядати так:

Таблиця із увімкненою дією виклику