【QLM】Interfaz de comentarios

1. Descripción general de la interfaz de mensajes de comentarios

• Interfaz de interfaz de usuario original:
  

• interfaz terminada
  

• El icono de la nota se adjunta a continuación.

  Si necesita recursos de iconos
  , puede contactarme. No necesita puntos, pero parece que no ha configurado o dado la carga. QQ: 1012569730

2. El programa de interfaz es el siguiente

2.10 Teclado virtual

Teclado virtual fuente QML: VirtualKey.qml

import QtQuick 2.3
import QtQuick.Window 2.3
import QtQuick.Controls 2.3
import QtQuick.VirtualKeyboard 2.1
import QtQuick.VirtualKeyboard.Settings 2.1


// 嵌入式虚拟键盘
InputPanel {
    id: inputPanel
    z: 20000
    //更改x,y即可更改键盘位置
    //x: root.x 键盘会自动居中
    y: root.height - height
    //更改width即可更改键盘大小
    width: 1000
    //不加这句话，键盘会被popup挡住
    parent: Overlay.overlay
    //focus: true

    signal sigVirtualKeyStateChanged(bool _visible)

    anchors.horizontalCenter: parent.horizontalCenter
    visible: false

    externalLanguageSwitchEnabled: false

    states: State {
        name: "visible"
        when: inputPanel.active

        PropertyChanges
        {
            target: inputPanel
            y: root.height - inputPanel.height
        }

    }

    transitions: Transition
    {
        from: ""
        to: "visible"
        reversible: true
        ParallelAnimation {
            NumberAnimation {
                properties: "y"
                duration: 250
                easing.type: Easing.InOutQuad
            }
        }
    }


    /*Component.onCompleted: {
        //VirtualKeyboardSettings.locale = "eesti" // 复古键盘样式
        //VirtualKeyboardSettings.wordCandidateList.alwaysVisible = true
    }*/

    // 这种集成方式下点击隐藏键盘的按钮是没有效果的，只会改变active，因此我们自己处理一下
    onActiveChanged: {
        if(!active) { visible = false }
        sigVirtualKeyStateChanged(visible)
    }
}

2.11 Crear un objeto global para llamar

    // 嵌入式虚拟键盘
    VirtualKey{
        id:lpVirtualKey
    }

2.12 Nota interfaz qml

Observaciones interfaz programa QML:

/*
******		FileName	:	UserRemarksHistoryPopup.qml
******		Describe	:	此文件是 用户备注历史弹出界面
******		Date		:	2023-04-29
******		Author		:	XiongChangYin
******		Copyright	:	Guangzhou xxx Inc.
******		Note1		:	文件采用 gb2312 编码方式
*/
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12

import "../../common"
import "../../common/qml/js/utils.js" as Utils
import "../../common/qml/Control"
import "../../common/qml/Dialog"

DialogBox {
    id: id_root
    wndName: "UserRemarksHistoryPopup"
    dialogWidth: 410
    dialogHeight: 540
    aroundClickable: true
    inOutAnimation: true
    aroundBlack: true
    g_opacity: 1

    readonly property int leftappend: 16  //左边距对齐
    readonly property int titleInfomationRectSpacing: 8 //标题栏图片与文字边距
    property int titleInfomationRectHeight: 30
    property string colorStyle: "#637486"  //界面整体颜色风格
    property int titleWidth: 220           //标题栏最大宽度

    property int listViewMaxWidth: 375    //listView视图最大宽度
    property int listViewMaxHeight: 245   //listView视图最大高度

    property int inputWidth: 378         //输入框宽度
    property int inputHeight: 100        //输入框高度

//    property int BtnImplicitWidth: 378   //添加备注按钮的宽度
//    property int BtnImplicitHeight: 64   //添加备注按钮的高度

    property bool bMouseActiveArea: false   //鼠标是否在活动区域

    property int    nFontSize: 18
    property bool bFontBold: false
    property string strTitleRemarksInfoText: qsTr("备注记录(10086112233445566)")  //标头信息 例如：备注记录(10086112233445566)

    property string g_RoleName: ""          //当前备注信息的用户名字

    property int g_nCurLoginUserId:0        //  当前登录用户id
    //添加一条备注信息
    signal sigAddRemarks(int tagId, string tagName, string tagRemarks);


    //获取当前登录用户id
    function getCurrentLoginUserId()
    {
        g_nCurLoginUserId = ObjAppGlobalData.getCurLoginUserInfo().user_id;
    }

    //获取当前备注信息的用户名字
    function getCurrentRemarksByUserName()
    {
//        g_RoleName = ObjAppGlobalData.getCur
    }

    Rectangle {
        id: idMainRect
        width: id_root.dialogWidth
        height: id_root.dialogHeight - 10
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 440
        color: colorStyle
        radius: 10

        //标题头部
        Rectangle {
            id: idTitleInfomationRect
            anchors {
                top: parent.top
                topMargin: leftappend
                left: parent.left
                leftMargin: leftappend
            }
            width: titleWidth
            height: titleInfomationRectHeight
            color: "#637486"

            Row {
                id: idTitleRow
                spacing: titleInfomationRectSpacing
                anchors.fill: parent

                Image {
                    id: idImageRect
                    width: 24; height: 24;
                    anchors.left:idTitleRow.left
                    anchors.leftMargin: 1
                    anchors.verticalCenter: parent.verticalCenter
                    source: "qrc:/resource/caseManager/remarks_3042.svg"
                    //color: colorStyle
                }

                Text {
                    id: idTitleText
                    width: 175; height: 24;
                    anchors.left: idImageRect.right
                    anchors.leftMargin: 1
                    anchors.verticalCenter: parent.verticalCenter

                    color: "white"
                    text: id_root.strTitleRemarksInfoText

                    font{
                        pixelSize: nFontSize
                        bold: false
                    }
                }
            }
        }


        //listview区域，刷新备注信息
        Rectangle {
            id: idListViewItem
            anchors.top: idTitleInfomationRect.bottom
            anchors.topMargin: 16
            anchors.left: idMainRect.left
            anchors.leftMargin: leftappend + 8
            width: listViewMaxWidth
            height: listViewMaxHeight
            color: "transparent"

            ListView {
                id: idListview1
                clip: true
                anchors.fill: parent
                orientation: ListView.Vertical//垂直列表
                interactive: true;//元素可拖动

                MouseArea {
                    anchors.fill: idListview1
                    onEntered: {
                            bMouseActiveArea = !bMouseActiveArea
                    }
                }

                ScrollBar.vertical: ScrollBar {
                    id: scrollBar
                    onActiveChanged: {
                        console.log("onActiveChanged========================")
                        active = true;
                    }
                    Component.onCompleted: {
                        scrollBar.handle.color = "yellow"
                        scrollBar.active = true;
                        scrollBar.handle.width = 10;
                        console.log("Component.onCompleted========================")
                    }
                    policy: (idListmodelData.count > 2 && bMouseActiveArea) ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff   // 滚动条ce'l策略，这里是永远显示
                }
                model: idListmodelData
                delegate: tabDelegate

                function updateList(_list)
                {
                    idListmodelData.clear();  //清空列表数据
                    for(var i = 0; i < _list.length; ++i)
                    {
                        idListmodelData.append(_list[i])
                    }
                }
            }


            ListModel { //listview数据
                id: idListmodelData
                //占位
                ListElement {titleText: qsTr(""); titleColor: "white"}
                ListElement {titleText: qsTr(""); titleColor: "white"}
                ListElement {titleText: qsTr(""); titleColor: "white"}
                ListElement {titleText: qsTr(""); titleColor: "white"}
                ListElement {titleText: qsTr(""); titleColor: "white"}
            }

            //Component
            Component {
                id: tabDelegate

                Rectangle {
                    id: idRemarksCol
                    width: 355; height: 120;
                    color: "transparent"

                    //左边圆角与竖线
                    Rectangle{
                        id: yuanjiao1
                        anchors {
                            top: parent.top
                            topMargin: 13
                            left: idRemarksCol.left
                        }
                        width: 8
                        height: 8
                        radius: 4
                        color: "#2FB7A8"

                    }
                    Rectangle{
                        id: line1
                        anchors {
                            top: yuanjiao1.bottom
                            horizontalCenter: yuanjiao1.horizontalCenter
                        }
                        width: 1
                        height: idRemarksCol.height - 10
                        color: "#FFFFFF"
                    }

                    Rectangle {
                        id: yuanjiao2
                        anchors {
                            top: line1.bottom
                            left: idRemarksCol.left
                        }
                        width: 8
                        height: 8
                        radius: 4
                        color: "#2FB7A8"
                    }

                    Rectangle {
                        id: line2
                        anchors {
                            top: yuanjiao2.bottom
                            horizontalCenter: yuanjiao2.horizontalCenter
                        }
                        width: 1
                        height: idRemarksCol.height - 10
                        color: "#FFFFFF"
                    }

                    Text {
                        id: idTimeToRole
                        anchors {
                            top: idRemarksCol.top
                            topMargin: 2
                            left: idRemarksCol.left
                            leftMargin: 16
                        }
                        width: 103
                        height: 26
                        color: "#FFFFFF"
                        font {
                            pixelSize: 20
                            bold: false
                        }

                        text: qsTr("2023.04.25  张医生")
                    }

                    Text {
                        id: idRemarksInformation
                        anchors {
                            top: idTimeToRole.bottom
                            topMargin: 8
                            left: idTimeToRole.left
                            right: idRemarksCol.right
                            rightMargin: 8
                        }
                        wrapMode: Text.WordWrap
                        elide: Text.wrap
                        color: "#B1BABE"
                        font {
                            pixelSize: 18
                            bold: false
                        }

                        text: qsTr("此产筛还缺少中山二院的医生质控内容，需追加上传病例")
                    }
                }

            }
        }

        //输入框
        ScrollView {
            id: idScrollRemarks
            width: inputWidth
            height: inputHeight

            anchors {
                top: idListViewItem.bottom
                topMargin: 5
                left: idMainRect.left
                leftMargin: leftappend
            }

            TextArea {
                id: idInputRemarksInformation
                KeyNavigation.priority: KeyNavigation.BeforeItem
                KeyNavigation.tab: idInputRemarksInformation
                placeholderText: qsTr("请输入备注信息...")
                placeholderTextColor: "#B1BABE"

                font.pixelSize: 18
                color: "#B1BABE"
                textFormat: TextEdit.RichText
                wrapMode: TextEdit.Wrap  //尽量考虑单词边界换行
                /*
                 tips: TextEdit.WordWrap(在单词边界处折行)、TextEdit.NoWrap(不折行，超出宽度的文本不显 示)
                 TextEdit.WrapAnywhere(折行，不考虑单词边界)、TextEdit.Wrap(折行，尽量在单词 边界处折行)4种换行策略
                */

                selectByMouse: true  //是否可以选择文本
                //var str = getText();  //获取备注信息

                background: Rectangle {
                    implicitWidth: inputWidth
                    implicitHeight: inputHeight
                    radius: 8
                    color: "#637486"
                    border.color: idInputRemarksInformation.enabled ? "#8499AF" : "#6194BE"
                }

                // 当选择输入框的时候才显示键盘
                onFocusChanged: {
                    lpVirtualKey.visible = (focus && root.bIsShowVirtualKey)
                }

                onReleased: {
                    if(focus === true)
                        lpVirtualKey.visible = root.bIsShowVirtualKey
                }

                onPressed: {
                    focus = true
                }
            }
        }

        //提示限定输入250字
        Label {
            id: idTipsInputAstrict
            width: 44
            height: 21

            anchors {
                top: idScrollRemarks.bottom
                right: idScrollRemarks.right
            }
            font {
                pixelSize: 16
                family: "Microsoft YaHei-Regular"
            }
            color: "#E1E1E1"
            text: qsTr("0/240")
        }

        //添加备注按钮
        Rectangle {
            id: idAddRemarksBtn
            width:  378
            height: 64

            radius: 8
            color: "#2FB7A8"

            anchors {
                horizontalCenter: idMainRect.horizontalCenter
                top: idTipsInputAstrict.bottom
                topMargin: 16
            }

            Button {
                anchors.fill: idAddRemarksBtn

                background: Rectangle {
                    color: "#2FB7A8"
                    radius: 8
                }

                onClicked: {
                    //添加备注
                }
            }

            Text {
                id: idAddRemarksText
                anchors {
                    verticalCenter: idAddRemarksBtn.verticalCenter
                    horizontalCenter: idAddRemarksBtn.horizontalCenter
                }

                font {
                    family: "Microsoft YaHei-Bold"
                    bold: true
                    pixelSize: 20
                }
                color: "white"
                text: qsTr("添加备注")
            }
        }
    }
}

2.13 Programa de cuadro de diálogo

El programa DialogBox.qml es el siguiente:

/*******************************************************
******		FileName	:	AYJDialogBox.qml
******		Describe	:	此文件为所有弹出框的父类
******		Date		:	2022-05-23
******		Author		:	XiaoDong
******		Copyright	:	Guangzhou AiYunJi Inc.
******		Note		:   在子类中可添加id为 contentBox 的子容器，用于进入退出动画展示
*******************************************************/
import QtQml 2.12
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.0


Rectangle
{
    id:dlgWndBox
    visible:false;
    color: "#46000000"//"transparent";

    property int g_nWndWidth  : 1920//ObjAppGlobalData.GetScreenRect().width
    property int g_nWndHeight : 1080//ObjAppGlobalData.GetScreenRect().height
    property int dialogWidth: 600;		// 对话框宽度
    property int dialogHeight: 400;		// 对话框高度
    property bool aroundClickable: true	// 窗口四周是否可以点击（关闭窗口）
	property bool inOutAnimation: true	// 进入动画
    property bool aroundBlack: true	// 窗口四周是否显示透明黑背景
	property var wndName: ""	// 窗口名称
    property real  g_opacity: 0.8   //  透明度

	signal closed();
	signal opened();
    signal hided(var autoclose);

    Component.onCompleted:
    {

        //contentBox.x = (root.width - contentBox.width) * 0.5 - globalPosition.x
        //contentBox.y = (root.height - contentBox.height) * 0.5 - globalPosition.y
    }
	
    Rectangle
    {
		anchors.fill: parent
        color: "transparent"
        opacity: aroundBlack ? g_opacity : 0

		MouseArea {
			id: mouseArea
			anchors.fill: parent
			onClicked:
			{
				if(aroundClickable)
					hideWnd()
            }
		}
	}

	//  对话框窗口
    Rectangle {
        anchors.centerIn: contentBox
		width: dialogWidth
		height: dialogHeight
		color: "transparent"
		
		MouseArea {

			anchors.fill: parent
			onClicked: {}

		}
	}
    
    // id为 contentBox 的区域才能执行下列动画
	SequentialAnimation {
		id: showAni
		// 内容区域展开动画
        NumberAnimation{
            target: contentBox
            properties: "scale"
            from: 0
            to: 1
            duration: 400
        }
	}
	SequentialAnimation {
		id: hideAni
		// 内容区域收缩动画
        NumberAnimation{
            target: contentBox
            properties: "scale"
            from: 1
            to: 0
            duration: 300
        }
		ScriptAction{script: { width = 0; height = 0; visible = false;}}
	}

	MouseArea{
        anchors.fill: contentBox;
        onClicked: {
            dlgWndBox.focus = true
        }
        onWheel: {}
    }

    //  显示窗口
    function showWnd()
	{
        if(visible)
            return ;

        var globalPosition = mapToGlobal(0, 0);

        dlgWndBox.x =0 -globalPosition.x;
        dlgWndBox.y =0 -globalPosition.y;

        width = g_nWndWidth
        height = g_nWndHeight
        visible = true
        if(inOutAnimation)
            showAni.start()
        else
            contentBox.scale = 1
        opened()
        ObjAppKeyFilter.pushWnd(wndName)

    }
    //  隐藏窗口
    function hideWnd(banAni = false)
    {
        if(true === inOutAnimation && banAni === false)
        {
            hideAni.start()
        }
        else
        {
            width = 0
            height = 0
            visible = false;
        }
		
        dlgWndBox.focus = true
        closed()
        ObjAppKeyFilter.popWnd("")
    }
}

3. Sobre el programa

Los programas DialogBox.qml y VirtualKey.qml están escritos por otros programadores, y UserRemarksHistoryPopup.qml está escrito por mí.Debido al vínculo entre el pasado y el futuro, todas las secciones involucradas en una interfaz completa se registran para un estudio futuro.