Renderizar la reducción en un control Qt QML Text o TextEdit

 C Programming >> Programación C >  >> Tags >> Qt
Renderizar la reducción en un control Qt QML Text o TextEdit

Recientemente descubrí que Qt QML puede representar Markdown en Text{} control S. Este fragmento le muestra cómo hacerlo, incluida una captura de pantalla y una demostración de la aplicación QML.

Qt 5.14 agregó soporte para rebajas en Text y TextEdit controles:

  • Se agregó soporte para el formato Markdown (incluidos CommonMark y GitHubdialects) para Text y TextEdit como alternativa a HTML. Esto incluye la extensión de la lista de verificación de GitHub, que permite alternar las casillas de verificación en un TextEdit.

El textFormat La propiedad ya podía representar HTML básico, pero desde 5.14 puede especificar textFormat: TextEdit.Markdowntext para representar el descuento:

TextEdit.MarkdownText: CommonMark plus the GitHub extensions for tables
and task lists (since 5.14)

Utilizo mucho Markdown, por lo que es un placer para mí usarlo en comparación con HTML para un formato simple.

Aquí hay un ejemplo QML completo de un Text y un TextEdit . Tenga en cuenta que el TextEdit no analiza markdown mientras escribe, solo formatea el texto que ha establecido como markdown.

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 820
    height: 480
    visible: true
    title: qsTr("Qt Markdown Example by Raymii.org")

    QtObject{
        id: markdown
        // not having tabs or spaces is important, otherwise
        // the markdown will not render.
        property string text: "*Italic*    **Bold**

# Heading 1

## Heading 2

[Link to raymii.org](https://raymii.org)


> quote

* List
* List

1. list 2
1. list 2

```
Code()->example
```

First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column

    "}

    Text {
        id: textedittext
        text: "QML TextEdit{}:"
        anchors.top: parent.top
        anchors.left: parent.left
    }

    Rectangle {
        id: textedit
        anchors.top: textedittext.bottom
        anchors.left: parent.left
        anchors.topMargin: 20
        anchors.leftMargin: 5
        width: 400
        height: 400
        border.color: "lime"

        TextEdit{
            anchors.fill: parent
            textMargin: 5
            textFormat: TextEdit.MarkdownText
            text: markdown.text
            wrapMode: Text.Wrap
        }
    }

    Text {
        id: texttext
        text: "QML Text{}:"
        anchors.top: parent.top
        anchors.left: textedit.right
    }

    Rectangle {
        id: text
        anchors.top: texttext.bottom
        anchors.left: textedit.right
        anchors.topMargin: 20
        anchors.leftMargin: 5
        width: 400
        height: 400
        border.color: "teal"


        Text{
            anchors.fill: parent
            textFormat: TextEdit.MarkdownText
            text: markdown.text
            fontSizeMode: Text.Fit
            wrapMode: Text.WordWrap
        }
    }
}