悬浮框实现

• • • 项目

1. 项目1
2. 项目2
3. 项目3

•  计划任务
•  完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右用:---------:居中
使用:----------居左

// main.qml
import QtQuick 2.15
import QtQuick.Window 2.15

import "."


Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    id: mainwindow
    property bool focusedMain

    signal focusChanged(bool aaa)

    Loader {
        id: floatingPopup
    }

    // 初始化和显示悬浮框
    function initFloatingPopup(info) {
        console.log("initFloatingPopup", info)
        if (floatingPopup.source == "") {
            floatingPopup.source = "FloatingWindow.qml"
        }
        floatingPopup.item.text = info
        floatingPopup.item.show()
        floatingPopup.item.raise()
    }

    Component.onCompleted: {
        initFloatingPopup(qsTr("悬浮框"))
    }


    onActiveChanged: {
         //console.log("111 onFocusObjectChanged:", active)
    }

    onFocusObjectChanged: {
        // console.log("888 onFocusObjectChanged:", object)
    }

    onActiveFocusItemChanged: {
        if (activeFocusItem !== null) {
            focusChanged(activeFocusItem.focus)
            console.log("999 onActiveFocusItemChanged:", activeFocusItem.focus)
            GlobalData.focusData.focusedItemMain = true
        } else {
            GlobalData.focusData.focusedItemMain = false
        }
        floatingPopup.item.testFunc(GlobalData.pageType.mainWindow)
    }
}

//FloatingListWindow.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.2 as Control12
import QtGraphicalEffects 1.15


import "."



IMoveableWindow {
    property alias text: txt.text

    id: floatinglistPopup
    width: 280
    height: 280
    flags: Qt.SubWindow | Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint
    color: "transparent"
    mouseEnabled: false

    property var parentPage

    MouseArea {
        anchors.fill: parent

        onClicked: {

        }
    }

    Rectangle {
        id: floatingBG
        anchors.fill: parent
        radius: 5
        opacity: 1
        border.width: 1
        border.color: "transparent"
        color: "#CCCCCC"

        anchors {
            leftMargin: 8
            rightMargin: 8
            topMargin: 8
            bottomMargin: 8
        }

        Text {
            id: txt
            anchors.centerIn: parent
            text: qsTr("悬浮框")
        }
    }

    DropShadow {
        anchors.fill: floatingBG
        horizontalOffset: 1
        verticalOffset: 1
        radius: 8
        samples: 9
        source: floatingBG
        color: "black"
    }

    property int count: 2001
    property  var focusItem
    property var focusObj
    property bool focusActive

    signal focusChanged()

    onFocusObjectChanged: {
        //console.log("555555555555555 onFocusObjectChanged:", count++, object)
    }

    onActiveChanged: {
         //console.log("666666666666666 onActiveChanged:", count++, active)
    }

    onActiveFocusItemChanged: {
        if (activeFocusItem !== null) {
            focusChanged(activeFocusItem.focus)
            console.log("777777777777777 onActiveFocusItemChanged:", count++, activeFocusItem)
            GlobalData.focusData.focusedItemPopup = true
        } else {
            GlobalData.focusData.focusedItemPopup = false
        }
        parentPage.testFunc(GlobalData.pageType.popupWindow)
    }
}

使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	“Isn’t this fun?”
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to-HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。2

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

// FloatingMenuWindow.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.2 as Control12
import QtGraphicalEffects 1.15
import QtQuick.Layouts 1.15

import "."

IMoveableWindow {
    property alias text: txt.text

    id: floatingMenuPopup
    width: 280
    height: 280
    flags: Qt.SubWindow | Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint
    color: "transparent"
    mouseEnabled: false
    property var parentPage
    Rectangle {
        id: floatingBG
        anchors.fill: parent
        radius: 5
        opacity: 1
        border.width: 1
        border.color: "gray"
        color: "white"
ColumnLayout {
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.topMargin: 5
            anchors.leftMargin: 3
            anchors.right: parent.right
            anchors.rightMargin: 5
            height: parent.height - 10
            width: parent.width - 10

        Button {
                id: txt
                text: qsTr("MenuItem")
                Layout.fillWidth: true
                onClicked: {

                }
            }
            

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 \Gamma(n) = (n-1)!\quad\forall n\in\mathbb NΓ(n)=(n−1)!∀n∈N 是通过欧拉积分

\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.Γ(z)=∫0∞​tz−1e−tdt.

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

Mon 06Mon 13Mon 20已完成进行中计划一计划二现有任务Adding GANTT diagram functionality to mermaid

• 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

张三李四王五你好！李四, 最近怎么样?你最近怎么样，王五？我很好，谢谢!我很好，谢谢!李四想了很长时间, 文字太长了不适合放在一行.打量着王五...很好... 王五, 你怎么样?张三李四王五

这将产生一个流程图。:

链接

长方形

圆

圆角长方形

菱形

• 关于 Mermaid 语法，参考 这儿,

FLowchart流程图