【QLM】备注留言界面
QLM学习日记
-
-
- 1.备注留言界面一览
- 2、界面程序如下
-
- 2.10 虚拟键盘
- 2.11 创建一个全局的对象去调用
- 2.12 备注界面qml
- 2.13 DialogBox程序
- 3、关于程序
-
1.备注留言界面一览
-
原UI界面：
-
成品界面
-
下面附上备注图标
图标资源
需要的可以联系我，不用积分，但是上传好像不设置不给过，QQ：1012569730
2、界面程序如下
2.10 虚拟键盘
虚拟键盘源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 创建一个全局的对象去调用
// 嵌入式虚拟键盘
VirtualKey{
id:lpVirtualKey
}
2.12 备注界面qml
备注界面程序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 DialogBox程序
DialogBox.qml 程序如下：
/*******************************************************
****** 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、关于程序
程序DialogBox .qml 和 VirtualKey.qml 是其他程序员写的，UserRemarksHistoryPopup.qml 是我自己写的，由于承上启下，的原因，一个完整的界面所涉及的板块都记录下来，方便日后学习。