Создать окно Инструкции

[astronik00]

Design

Требования: UI дизайнер

Краткое описание

Необходимо спроектировать прототип окна Инструкций

Функциональные требования или иные документы

Окно инструкций должно состоять из двух последовательных окон (например связанных кнопкой "Далее", а на втором "Закрыть", после чего предполагается переход на главное меню со списком задач).

На первом окне должно быть:

• сообщение приветствия
• текстовое поле "Ваш pin будет являться ключом для шифрования и дешифрования данных, не потеряйте его..." (страшилку придумать)
• поле ввода pin
• кнопка "Сохранить"

На втором окне:

• текст, в котором рассказывались бы:
  • последовательность действий, где что, куда нажимать, какие элементы где находятся (по крайней мере сделать заготовку списка, например: Вы можете создать задачу, нажав на панель сверху на кнопку "Плюсик". Если вы хотите добавить подзадачи, то нажмите на "Многоточие"... и так далее). Здесь изучить, можно ли добавить в элемент например изображение, чтобы можно было на примере продемонстрировать работу.
  • рассказано о том, что в окне "Настройки", например такие фразы, как: "Вы можете поменять свой pin код в любое время в Настройках".

Обобщенное решение

• [x] Изучить требования
• [x] Реализовать прототип в QML

Выходной результат

Файл окна qml. В MR загрузить скриншот работы.

[slavakyrlan]

Для создания окна с инструкцией по работе в приложении в QML можно использовать элементы, такие как Popup, Text и Button. Используя их в сочетании, мы можем создать простой и понятный интерфейс для пользователя.

Вот пример с четырьмя инструкциями:

import QtQuick 2.0
import QtQuick.Controls 2.0

ApplicationWindow {
    title: "Инструкция по работе в приложении"
    visible: true
    width: 400
    height: 400

    Button{
        id: buttonOne
        text: "Шаг 1"
        anchors.centerIn: parent
        onClicked: popupOne.open()
    }

    Popup {
        id: popupOne
        x: 100
        y: 100
        width: 200
        height: 200
        visible:true
        contentItem: Text {
            text: "Это Шаг 1 инструкции"
            wrapMode: Text.WordWrap
        }
        Button {
            text: "Далее"
            onClicked: {
                popupOne.close()
                popupTwo.open()
            }
        }
        onAccepted: {
            popupOne.close()
            popupTwo.open()
        }
    }

    Popup {
        id: popupTwo
        x: 100
        y: 100
        width: 200
        height: 200
        visible:false
        contentItem: Text {
            text: "Это Шаг 2 инструкции"
            wrapMode: Text.WordWrap
        }
        Button {
            text: "Далее"
            onClicked: {
                popupTwo.close()
                popupThree.open()
            }
        }
        onAccepted: {
            popupTwo.close()
            popupThree.open()
        }
    }

    Popup {
        id: popupThree
        x: 100
        y: 100
        width: 200
        height: 200
        visible:false
        contentItem: Text {
            text: "Это Шаг 3 инструкции"
            wrapMode: Text.WordWrap
        }
        Button {
            text: "Далее"
            onClicked: {
                popupThree.close()
                popupFour.open()
            }
        }
        onAccepted: {
            popupThree.close()
            popupFour.open()
        }
    }

    Popup {
        id: popupFour
        x: 100
        y: 100
        width: 200
        height: 200
        visible:false
        contentItem: Text {
            text: "Это Шаг 4 инструкции"
            wrapMode: Text.WordWrap
        }
        Button {
            text: "Готово"
            onClicked: {
                popupFour.close()
            }
        }
        onAccepted: {
            popupFour.close()
        }
    }
}

В данном примере мы использовали элементы Popup для отображения окон с инструкцией и Button для перехода между этими окнами. Когда пользователь нажимает на кнопку "Далее", текущее окно закрывается, а следующее открывается. Когда пользователь нажимает на кнопку "Готово" в последнем окне, инструкция закрывается.

Текст инструкции задается в элементе Text. Мы также использовали свойство wrapMode, чтобы расположить текст по ширине окна, чтобы он был читаемым.

Этот код создаст окно с четырьмя шагами инструкции, которая будет отображаться по клику на кнопку "Шаг 1".

[denissidorenko1]

Примерно накидал дизайн двух окон. Ссылка

[astronik00]

Первое окно выглядит отлично, а вот со вторым уже проблема. Я предполагала, что окно инструкций не меняет своего размера, мне кажется, это будет выглядеть достаточно аляповато, если у нас так будет скакать размер

[denissidorenko1]

Да, согласен. Но длина инструкции может сильно отличаться, и в более коротких инструкциях будет пустое пространство (а места и так немного, на одном экране максимум 3 инструкции влезет наверно). Но можно и фиксированного размера, наверно.

[astronik00]

Да, согласен. Но длина инструкции может сильно отличаться, и в более коротких инструкциях будет пустое пространство (а места и так немного, на одном экране максимум 3 инструкции влезет наверно). Но можно и фиксированного размера, наверно.

Я кстати еще не уверена, что получится сверстать вот такие 4 поля для пина. Нет, можно, но встроенного сигнала их обработки нет, теоретически тупо пока 4 поля не будут заполнены.

Например в винде пин устанавливается так:

Можно сразу поставить формат окна 3:4 и растянуть этой формочкой.