Выбор времени в QML
Мне нужно дать пользователю возможность выбрать дату и время в приложении QML. Для выбора дат существует Calendar
В Управлении QtQuick.
Я не нашел подобного элемента управления, чтобы позволить пользователю выбрать время суток.
В интернете есть пара примеров, таких как Grog или Harmattan.
Я предполагаю, однако, что они не интегрируются с собственным внешним видом и ощущением, как другие элементы управления QtQuick.
Существует ли стандартный подход которых я не знаю, хороших альтернатив, с которыми я не сталкивался, или рекомендаций, которые можно выбрать?
1 ответ:
Начиная с Qt 5.5 так называемыеQt Quick Enterprise Controls будут доступны также в Community edition Qt под названиемQt Quick Extras . Среди прочих,
Tumbler
вполне приемлемое решение для ваших потребностей: вы можете легко настроить две колонки, одну для часов и одну Для минут.Если вы все еще заинтересованы в циклическом выборе (или хотите реализовать свой собственный tumbler), вы можете выбрать различные маршруты, такие как создание вашего собственный компонент, наследующий от
QQuickItem
илиQQuickPaintedItem
или использование пользовательского представления с помощьюPathView
. Последний случай я собираюсь рассмотреть в этом ответе. Просто обратитесь к приведенным ссылкам для примеров создания пользовательских компонентов.Ссылаясь на документацию
PathView
:Таким образом, путь определяет способ размещения элементов на экране, даже в круговом порядке. Путь может быть построен черезПредставление имеет модель, которая определяет данные, которые будут отображаться, и делегат, который определяет, как данные должны отображаться. Делегат создается для каждого элемента по пути. элементы можно щелкнуть, чтобы переместить их по пути .
Path
тип, то есть последовательность сегментов Пути различного рода.PathArc
это тот, который нас интересует, так как он обеспечивает желаемую округлую форму.В следующем примере эти элементы используются для определения кругового выбора времени. Каждый путь-это построенный с использованием
currentIndex
делегата: целое число используется в качестве модели дляPathView
s -12
для представления часов и6
для представления минут, соответственно. Текст делегатов генерируется путем использования вложенного свойстваindex
и манипулирования им для создания значений интервалов часов и 10 минут (см. Элементы делегатовText
). Наконец, текст текущего элемента (то естьcurrentItem
) привязывается к метке времени в центре окна: какcurrentIndex
иcurrentItem
изменение, также метка обновляется.Общий компонент выглядит следующим образом:
highlight
компоненты (синие и зеленые круги) используются для графического представления редактирования времени: когда время видно, его можно редактировать, т. е. можно выбрать другойItem
путь. Переключение между обычным и режимом редактирования происходит щелчком по метке времени в центре.Когда в режиме редактирования пользователь может просто навести различные значения часов / минут на выбрать их. Если щелкнуть по вновь выбранному часу / минуте, редактирование для этого конкретного
Этот код, очевидно, просто игрушечный пример, чтобы дать вам представление о том, для чего может использоватьсяPathView
будет отключено, и соответствующий круг подсветки исчезнет.PathView
. Можно сделать несколько улучшений, например анимацию, лучшее позиционирование номера, детальное представление минут, хороший фон и так далее. Однако они находятся вне сферы w. r. t. вопрос так и не был рассмотрен.import QtQuick 2.4 import QtQuick.Window 2.2 import QtQuick.Controls.Styles 1.3 import QtQuick.Layouts 1.1 Window { visible: true width: 280; height: 280 RowLayout { // centre time label anchors.centerIn: parent Text { id: h font.pixelSize: 30 font.bold: true text: outer.currentItem.text } Text { id: div font.pixelSize: 30 font.bold: true text: qsTr(":") } Text { id: m font.pixelSize: 30 font.bold: true text: inner.currentItem.text } MouseArea { anchors.fill: parent onClicked: outer.choiceActive = inner.choiceActive = !outer.choiceActive } } PathView { // hours path id: outer property bool pressed: false model: 12 interactive: false highlightRangeMode: PathView.NoHighlightRange property bool choiceActive: false highlight: Rectangle { id: rect width: 30 * 1.5 height: width radius: width / 2 border.color: "darkgray" color: "steelblue" visible: outer.choiceActive } delegate: Item { id: del width: 30 height: 30 property bool currentItem: PathView.view.currentIndex == index property alias text : textHou.text Text { id: textHou anchors.centerIn: parent font.pixelSize: 24 font.bold: currentItem text: index + 1 color: currentItem ? "black" : "gray" } MouseArea { anchors.fill: parent enabled: outer.choiceActive onClicked: outer.choiceActive = false hoverEnabled: true onEntered: outer.currentIndex = index } } path: Path { startX: 200; startY: 40 PathArc { x: 80; y: 240 radiusX: 110; radiusY: 110 useLargeArc: false } PathArc { x: 200; y: 40 radiusX: 110; radiusY: 110 useLargeArc: false } } } PathView { // minutes path id: inner property bool pressed: false model: 6 interactive: false highlightRangeMode: PathView.NoHighlightRange property bool choiceActive: false highlight: Rectangle { width: 30 * 1.5 height: width radius: width / 2 border.color: "darkgray" color: "lightgreen" visible: inner.choiceActive } delegate: Item { width: 30 height: 30 property bool currentItem: PathView.view.currentIndex == index property alias text : textMin.text Text { id: textMin anchors.centerIn: parent font.pixelSize: 24 font.bold: currentItem text: index * 10 color: currentItem ? "black" : "gray" } MouseArea { anchors.fill: parent enabled: inner.choiceActive onClicked: inner.choiceActive = false hoverEnabled: true onEntered: inner.currentIndex = index } } path: Path { startX: 140; startY: 60 PathArc { x: 140; y: 220 radiusX: 40; radiusY: 40 useLargeArc: false } PathArc { x: 140; y: 60 radiusX: 40; radiusY: 40 useLargeArc: false } } } // to set current time! onVisibleChanged: { var d = new Date(); outer.currentIndex = d.getUTCHours() % 12 inner.currentIndex = d.getMinutes() / 10 } }
Comments