diff options
Diffstat (limited to 'examples')
19 files changed, 227 insertions, 23 deletions
diff --git a/examples/quickcontrols2/chattutorial/chapter3-navigation/ConversationPage.qml b/examples/quickcontrols2/chattutorial/chapter3-navigation/ConversationPage.qml index 90a846ac..94942191 100644 --- a/examples/quickcontrols2/chattutorial/chapter3-navigation/ConversationPage.qml +++ b/examples/quickcontrols2/chattutorial/chapter3-navigation/ConversationPage.qml @@ -78,6 +78,7 @@ Page { anchors.fill: parent ListView { + id: listView Layout.fillWidth: true Layout.fillHeight: true Layout.margins: pane.leftPadding + messageField.leftPadding @@ -89,7 +90,7 @@ Page { delegate: Row { readonly property bool sentByMe: index % 2 == 0 - anchors.right: sentByMe ? parent.right : undefined + anchors.right: sentByMe ? listView.contentItem.right : undefined spacing: 6 Rectangle { diff --git a/examples/quickcontrols2/chattutorial/chapter4-models/ConversationPage.qml b/examples/quickcontrols2/chattutorial/chapter4-models/ConversationPage.qml index 6684c233..d616fa38 100644 --- a/examples/quickcontrols2/chattutorial/chapter4-models/ConversationPage.qml +++ b/examples/quickcontrols2/chattutorial/chapter4-models/ConversationPage.qml @@ -92,7 +92,7 @@ Page { recipient: inConversationWith } delegate: Column { - anchors.right: sentByMe ? parent.right : undefined + anchors.right: sentByMe ? listView.contentItem.right : undefined spacing: 6 readonly property bool sentByMe: model.recipient !== "Me" diff --git a/examples/quickcontrols2/chattutorial/chapter5-styling/ConversationPage.qml b/examples/quickcontrols2/chattutorial/chapter5-styling/ConversationPage.qml index 790f9ee9..31238454 100644 --- a/examples/quickcontrols2/chattutorial/chapter5-styling/ConversationPage.qml +++ b/examples/quickcontrols2/chattutorial/chapter5-styling/ConversationPage.qml @@ -92,7 +92,7 @@ Page { recipient: inConversationWith } delegate: Column { - anchors.right: sentByMe ? parent.right : undefined + anchors.right: sentByMe ? listView.contentItem.right : undefined spacing: 6 readonly property bool sentByMe: model.recipient !== "Me" diff --git a/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc b/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc index 49e98068..bc0ca846 100644 --- a/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc +++ b/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc @@ -490,7 +490,7 @@ we distinguish between different authors in three ways: \list \li Messages sent by the user are aligned to the right side of the screen -by setting \c anchors.right to \c parent.right. +by setting \c anchors.right to \c listView.contentItem.right. \li By setting the \c visible property of the avatar (which is simply a Rectangle for now) based on \c sentByMe, we only show it if the message was diff --git a/examples/quickcontrols2/contactlist/ContactView.ui.qml b/examples/quickcontrols2/contactlist/ContactView.ui.qml index 747f3042..984fc787 100644 --- a/examples/quickcontrols2/contactlist/ContactView.ui.qml +++ b/examples/quickcontrols2/contactlist/ContactView.ui.qml @@ -72,11 +72,7 @@ ListView { delegate: ContactDelegate { id: delegate width: listView.width - - Connections { - target: delegate - onPressAndHold: listView.pressAndHold(index) - } + onPressAndHold: listView.pressAndHold(index) } model: ContactModel { diff --git a/examples/quickcontrols2/gallery/gallery.qml b/examples/quickcontrols2/gallery/gallery.qml index 44987ada..504a36c7 100644 --- a/examples/quickcontrols2/gallery/gallery.qml +++ b/examples/quickcontrols2/gallery/gallery.qml @@ -62,6 +62,17 @@ ApplicationWindow { visible: true title: "Qt Quick Controls 2" + function help() { + let displayingControl = listView.currentIndex !== -1 + let currentControlName = displayingControl + ? listView.model.get(listView.currentIndex).title.toLowerCase() : "" + let url = "https://doc.qt.io/qt-5/" + + (displayingControl + ? "qml-qtquick-controls2-" + currentControlName + ".html" + : "qtquick-controls2-qmlmodule.html"); + Qt.openUrlExternally(url) + } + Settings { id: settings property string style: "Default" @@ -73,6 +84,11 @@ ApplicationWindow { onActivated: navigateBackAction.trigger() } + Shortcut { + sequence: StandardKey.HelpContents + onActivated: help() + } + Action { id: navigateBackAction icon.name: stackView.depth > 1 ? "back" : "drawer" @@ -131,6 +147,10 @@ ApplicationWindow { onTriggered: settingsDialog.open() } Action { + text: "Help" + onTriggered: help() + } + Action { text: "About" onTriggered: aboutDialog.open() } @@ -153,7 +173,7 @@ ApplicationWindow { anchors.fill: parent delegate: ItemDelegate { - width: parent.width + width: listView.width text: model.title highlighted: ListView.isCurrentItem onClicked: { diff --git a/examples/quickcontrols2/gallery/pages/DelegatePage.qml b/examples/quickcontrols2/gallery/pages/DelegatePage.qml index 30f07be1..20ceaa6b 100644 --- a/examples/quickcontrols2/gallery/pages/DelegatePage.qml +++ b/examples/quickcontrols2/gallery/pages/DelegatePage.qml @@ -110,7 +110,6 @@ Pane { CheckDelegate { text: labelText - width: parent.width } } diff --git a/examples/quickcontrols2/imagine/automotive/qml/automotive.qml b/examples/quickcontrols2/imagine/automotive/qml/automotive.qml index 91e3bf7c..2c001db2 100644 --- a/examples/quickcontrols2/imagine/automotive/qml/automotive.qml +++ b/examples/quickcontrols2/imagine/automotive/qml/automotive.qml @@ -269,6 +269,7 @@ ApplicationWindow { Layout.preferredHeight: 128 ListView { + id: stationListView clip: true anchors.fill: parent @@ -296,7 +297,7 @@ ApplicationWindow { } delegate: ItemDelegate { id: stationDelegate - width: parent.width + width: stationListView.width height: 22 text: model.name font.pixelSize: fontSizeExtraSmall diff --git a/examples/quickcontrols2/imagine/musicplayer/musicplayer.qml b/examples/quickcontrols2/imagine/musicplayer/musicplayer.qml index de4fd281..28ed5861 100644 --- a/examples/quickcontrols2/imagine/musicplayer/musicplayer.qml +++ b/examples/quickcontrols2/imagine/musicplayer/musicplayer.qml @@ -431,6 +431,7 @@ ApplicationWindow { Layout.fillHeight: true ListView { + id: filesListView clip: true anchors.fill: parent model: ListModel { @@ -446,7 +447,7 @@ ApplicationWindow { } delegate: ItemDelegate { text: model.author + " - " + model.album + " - " + model.track - width: parent.width + width: filesListView.width } ScrollBar.vertical: ScrollBar { diff --git a/examples/quickcontrols2/sidepanel/sidepanel.qml b/examples/quickcontrols2/sidepanel/sidepanel.qml index e2473ac9..a0c69fb2 100644 --- a/examples/quickcontrols2/sidepanel/sidepanel.qml +++ b/examples/quickcontrols2/sidepanel/sidepanel.qml @@ -132,7 +132,7 @@ ApplicationWindow { delegate: ItemDelegate { text: qsTr("Title %1").arg(index + 1) - width: parent.width + width: listView.width } ScrollIndicator.vertical: ScrollIndicator { } diff --git a/examples/quickcontrols2/swipetoremove/swipetoremove.qml b/examples/quickcontrols2/swipetoremove/swipetoremove.qml index b4b0d588..65127a1a 100644 --- a/examples/quickcontrols2/swipetoremove/swipetoremove.qml +++ b/examples/quickcontrols2/swipetoremove/swipetoremove.qml @@ -67,7 +67,7 @@ ApplicationWindow { id: delegate text: modelData - width: parent.width + width: listView.width //! [delegate] swipe.right: Rectangle { diff --git a/examples/quickcontrols2/texteditor/creatorKateHighlighter.png b/examples/quickcontrols2/texteditor/creatorKateHighlighter.png Binary files differnew file mode 100644 index 00000000..a9ad9ef9 --- /dev/null +++ b/examples/quickcontrols2/texteditor/creatorKateHighlighter.png diff --git a/examples/quickcontrols2/texteditor/documenthandler.cpp b/examples/quickcontrols2/texteditor/documenthandler.cpp index 5def1b61..58711c52 100644 --- a/examples/quickcontrols2/texteditor/documenthandler.cpp +++ b/examples/quickcontrols2/texteditor/documenthandler.cpp @@ -53,6 +53,7 @@ #include <QFile> #include <QFileInfo> #include <QFileSelector> +#include <QMimeDatabase> #include <QQmlFile> #include <QQmlFileSelector> #include <QQuickTextDocument> @@ -293,14 +294,21 @@ void DocumentHandler::load(const QUrl &fileUrl) const QUrl path = QQmlFileSelector::get(engine)->selector()->select(fileUrl); const QString fileName = QQmlFile::urlToLocalFileOrQrc(path); if (QFile::exists(fileName)) { + QMimeType mime = QMimeDatabase().mimeTypeForFile(fileName); QFile file(fileName); if (file.open(QFile::ReadOnly)) { QByteArray data = file.readAll(); - QTextCodec *codec = QTextCodec::codecForHtml(data); - if (QTextDocument *doc = textDocument()) + if (QTextDocument *doc = textDocument()) { + doc->setBaseUrl(path.adjusted(QUrl::RemoveFilename)); + if (mime.inherits("text/markdown")) { + emit loaded(QString::fromUtf8(data), Qt::MarkdownText); + } else { + QTextCodec *codec = QTextCodec::codecForHtml(data); + emit loaded(codec->toUnicode(data), Qt::AutoText); + } doc->setModified(false); + } - emit loaded(codec->toUnicode(data)); reset(); } } diff --git a/examples/quickcontrols2/texteditor/documenthandler.h b/examples/quickcontrols2/texteditor/documenthandler.h index 97e55658..3863eb49 100644 --- a/examples/quickcontrols2/texteditor/documenthandler.h +++ b/examples/quickcontrols2/texteditor/documenthandler.h @@ -152,7 +152,7 @@ Q_SIGNALS: void textChanged(); void fileUrlChanged(); - void loaded(const QString &text); + void loaded(const QString &text, int format); void error(const QString &message); void modifiedChanged(); @@ -170,7 +170,6 @@ private: int m_selectionEnd; QFont m_font; - int m_fontSize; QUrl m_fileUrl; }; diff --git a/examples/quickcontrols2/texteditor/einstein.png b/examples/quickcontrols2/texteditor/einstein.png Binary files differnew file mode 100644 index 00000000..3611284d --- /dev/null +++ b/examples/quickcontrols2/texteditor/einstein.png diff --git a/examples/quickcontrols2/texteditor/example.md b/examples/quickcontrols2/texteditor/example.md new file mode 100644 index 00000000..169ff433 --- /dev/null +++ b/examples/quickcontrols2/texteditor/example.md @@ -0,0 +1,173 @@ +# Markdown in Qt Quick + +The Text, TextEdit and TextArea items support rich text formatted in HTML. +Since Qt 5.14, they now support two dialects of Markdown as well: +[The CommonMark Specification](https://spec.commonmark.org/0.29/) is the +conservative formal specification, while +[GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown) +adds extra features such as task lists and tables. + +If you are viewing this document in the Qt Quick Controls Text Editor example, +you can edit this document to explore Qt's rich text editing features. +We have included some comments in each of the following sections to +encourage you to experiment. + +## Font and Paragraph Styles + +Markdown supports **bold**, *italic*, ~~strikethrough~~ and `monospace` font +styles. + +> A block quote is indented according to the convention for email quoting. + + A block of code; + can be indented; + with 4 spaces or a tab; + +or + +``` +Block { + id: code + CanBe { + wrappedBy: "triple backticks" + } +} +``` + +Block quotes can be nested, and block quotes can include indented code blocks. + +In [The CommonMark Specification](https://spec.commonmark.org/0.29/) +John MacFarlane writes: + +> What distinguishes Markdown from many other lightweight markup syntaxes, +> which are often easier to write, is its readability. As Gruber writes: + +> > The overriding design goal for Markdown's formatting syntax is to make it +> > as readable as possible. The idea is that a Markdown-formatted document should +> > be publishable as-is, as plain text, without looking like it's been marked up +> > with tags or formatting instructions. ( +> > [http://daringfireball.net/projects/markdown/](http://daringfireball.net/projects/markdown/)) + +> The point can be illustrated by comparing a sample of AsciiDoc with an +> equivalent sample of Markdown. Here is a sample of AsciiDoc from the AsciiDoc +> manual: + +> 1. List item one. +> + +> List item one continued with a second paragraph followed by an +> Indented block. +> + +> ................. +> $ ls *.sh +> $ mv *.sh ~/tmp +> ................. +> + +> List item continued with a third paragraph. +> +> 2. List item two continued with an open block. +> ... +> + +## Hyperlinks + +Hyperlinks can be written with the link text first, and the URL immediately +following: [Qt Assistant](http://doc.qt.io/qt-5/qtassistant-index.html) + +A plain url is automatically recognized: https://doc.qt.io/qt-5/qml-qtquick-text.html + +There are also "reference links" where the link text is first labeled +and then the URL for the label is given elsewhere: +[The Qt Creator Manual][creatormanual] + +## Images + +Inline images like this one  flow with the surrounding text. + +The code for including an image is just a link that starts with a bang. +An image in its own paragraph is given its own space: + + + +## Lists + +Different kinds of lists can be included. Standard bullet lists can be nested, +using different symbols for each level of the list. List items can have nested +items such as block quotes, code blocks and images. Check boxes can be included +to form a task list. + +- Disc symbols are typically used for top-level list items. + * Circle symbols can be used to distinguish between items in lower-level + lists. + + Square symbols provide a reasonable alternative to discs and circles. + * Lists can be continued... + * further down +- List items can include images:  +- and even nested quotes, like this: + + The [Qt Documentation](https://doc.qt.io/qt-5/qml-qtquick-textedit.html#details) + points out that + > The TextEdit item displays a block of editable, formatted text. + > + > It can display both plain and rich text. For example: + > + > TextEdit { + > width: 240 + > text: "<b>Hello</b> <i>World!</i>" + > font.family: "Helvetica" + > font.pointSize: 20 + > color: "blue" + > focus: true + > } +- List items with check boxes allow task lists to be incorporated: + * [ ] This task is not yet done + * [x] We aced this one! + +Ordered lists can be used for tables of contents, for example. Each number +should end with a period or a parenthesis: + +1. Markdown in Qt Quick + 1) Font and Paragraph Styles + 5) Hyperlinks + 3) Images  + 2) Lists + 4) Tables +2. Related work + +The list will automatically be renumbered during rendering. + +## Tables + +One of the GitHub extensions is support for tables: + +| |Development Tools |Programming Techniques |Graphical User Interfaces| +|-------------|------------------------------------|---------------------------|-------------------------| +|9:00 - 11:00 |Introduction to Qt ||| +|11:00 - 13:00|Using Qt Creator |QML and its runtime |Layouts in Qt | +|13:00 - 15:00|Qt Quick Designer Tutorial |Extreme Programming |Writing Custom Styles | +|15:00 - 17:00|Qt Linguist and Internationalization| | | + +# Related Work + +Some Qt Widgets also support Markdown. +[QTextEdit](https://doc.qt.io/qt-5/qtextedit.html) has similar WYSIWYG +editing features as TextEdit and TextArea: you can edit the rendered text +directly. You can use +[QTextDocument::toMarkdown](https://doc-snapshots.qt.io/qt5-dev/qtextdocument.html#toMarkdown) +to rewrite the Markdown format, and save it back to a file. + +If you have the [KDE Kate Editor](https://kate-editor.org/) installed on your +system, you probably also have the `markdown.xml` syntax highlighting +definition file; that can be reused to add Markdown syntax highlighting to +Qt Creator. + + + +Qt owes thanks to the authors of the [MD4C parser](https://github.com/mity/md4c) +for making markdown import possible. The QTextMarkdownWriter class does not +have such dependencies, and also has not yet been tested as extensively, so we +do not yet guarantee that we are able to rewrite every Markdown document that +you are able to read and display with Text or TextEdit. But you are free to +write [bugs](https://bugreports.qt.io) about any troublesome cases that you +encounter. + +[creatormanual]: https://doc.qt.io/qtcreator/ "Qt Creator Manual" diff --git a/examples/quickcontrols2/texteditor/qml/texteditor.qml b/examples/quickcontrols2/texteditor/qml/texteditor.qml index 6c95335b..b1485582 100644 --- a/examples/quickcontrols2/texteditor/qml/texteditor.qml +++ b/examples/quickcontrols2/texteditor/qml/texteditor.qml @@ -173,7 +173,7 @@ ApplicationWindow { id: openDialog fileMode: FileDialog.OpenFile selectedNameFilter.index: 1 - nameFilters: ["Text files (*.txt)", "HTML files (*.html *.htm)"] + nameFilters: ["Text files (*.txt)", "HTML files (*.html *.htm)", "Markdown files (*.md *.markdown)"] folder: StandardPaths.writableLocation(StandardPaths.DocumentsLocation) onAccepted: document.load(file) } @@ -383,8 +383,14 @@ ApplicationWindow { selectionStart: textArea.selectionStart selectionEnd: textArea.selectionEnd textColor: colorDialog.color - Component.onCompleted: document.load("qrc:/texteditor.html") + Component.onCompleted: { + if (Qt.application.arguments.length === 2) + document.load("file:" + Qt.application.arguments[1]); + else + document.load("qrc:/texteditor.html") + } onLoaded: { + textArea.textFormat = format textArea.text = text } onError: { diff --git a/examples/quickcontrols2/texteditor/red.png b/examples/quickcontrols2/texteditor/red.png Binary files differnew file mode 100644 index 00000000..9038fef7 --- /dev/null +++ b/examples/quickcontrols2/texteditor/red.png diff --git a/examples/quickcontrols2/wearable/qml/Notifications/NotificationsPage.qml b/examples/quickcontrols2/wearable/qml/Notifications/NotificationsPage.qml index b3102771..a8e99345 100644 --- a/examples/quickcontrols2/wearable/qml/Notifications/NotificationsPage.qml +++ b/examples/quickcontrols2/wearable/qml/Notifications/NotificationsPage.qml @@ -77,7 +77,7 @@ ListView { delegate: Item { height: missedCallsView.height width: missedCallsView.width / 2 - anchors.left: parent.horizontalCenter + anchors.left: missedCallsView.contentItem.horizontalCenter Column { spacing: 15 |
