QML 自定义控件集合

最新推荐文章于 2022-03-06 12:36:11 发布
最新推荐文章于 2022-03-06 12:36:11 发布
阅读量399 收藏 2
点赞数 1
分类专栏： c++ QT 文章标签： qt qml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GengWenhui123/article/details/110521261
版权
c++ 同时被 2 个专栏收录
15 篇文章 0 订阅
订阅专栏
QT
13 篇文章 0 订阅
订阅专栏

QML 自定义控件

注意：
1.Button 的onClicked信号和checked状态不能严格保持一直，快速点击，可能会连续打印checked的同一个状态，此时，应该改用信号toggled()或者checkedChanged
2.Window 设置不透明度，使用color属性的第四个分量，比如窗体不透明度0.5：color: Qt.rgba(0.5,0.2,0.0,0.5)。Window的opacity属性有时不起作用。

将日常使用的控件进行优化和扩展。

1.可两端对齐的Text

import QtQuick 2.15
import QtQuick.Window 2.12
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.3
ApplicationWindow {
    visible: true
    width: 600
    height: 400
    title: qsTr("Hello World")
    color: "gray"

    Rectangle{
        anchors.centerIn: parent
        width:100
        height: 30
        Text{
            anchors.fill: parent
            property var pixelSize: 10
            font.pixelSize: 10
            verticalAlignment:  Text.AlignVCenter
            horizontalAlignment:Text.AlignJustify
            font.letterSpacing: (horizontalAlignment === Text.AlignJustify)  && (text.length > 1 ) ?  (width -text.length * pixelSize)/ (text.length - 1) : -1
            text: "两端对齐"
            Component.onCompleted: {
                pixelSize = font.pixelSize
            }
        }
    }
}

2.可缩放拖拽的画布

import QtQuick 2.9
import QtQuick.Controls 2.5

Item{
    id:root
    property var defaultScale: 1.0
    property var scaleLevel: 10
    function backOrigin()
    {
        view.contentItem.x = 0
        view.contentItem.y = 0
        ts.origin.x = 0
        ts.origin.y = 0
        trans.x = 0
        trans.y = 0
    }
    function zoomIn()
    {
        if ((ts.xScale >= root.defaultScale * root.scaleLevel))
            return

        ts.xScale += 0.01
        ts.yScale += 0.01
    }
    function zoomOut()
    {
        if ((ts.xScale <= root.defaultScale / root.scaleLevel))
            return
        ts.xScale -= 0.01
        ts.yScale -= 0.01
    }

    Flickable{
        id:view
        property var bPrivate: true
        anchors.fill: parent
        contentWidth: 3840
        contentHeight: 2160
        interactive: false

        contentItem.transform: [
            Scale {
                id: ts
                xScale: root.defaultScale
                yScale: root.defaultScale
            },
            Translate {
                id: trans
                x: 0
                y: 0
            }
        ]

        Item{
            id:content
        }

        Text {
           x: 0
           y: 0
           text: "+"
           scale: 1.0 / ts.xScale
           transformOrigin: Item.TopLeft
        }
    }
    MouseArea{
        z:-1
        property var bPrivate: true
        anchors.fill: parent
        drag.target: view.contentItem
        onWheel:
        {
            if (wheel.modifiers & Qt.ControlModifier) {

                var scaleValue = wheel.angleDelta.y / 12000
                if ((ts.xScale <= root.defaultScale / root.scaleLevel && scaleValue < 0.0) || (ts.xScale >= root.defaultScale * root.scaleLevel && scaleValue > 0.0))
                    return

                var pos = view.mapToItem(view.contentItem,Qt.point(wheel.x,wheel.y))
                var xOffset = (pos.x - ts.origin.x) * (1 - ts.xScale)
                var yOffset = (pos.y - ts.origin.y) * (1 - ts.yScale)

                ts.origin.x = pos.x
                ts.origin.y = pos.y

                if (xOffset !== 0) {
                    trans.x += -xOffset
                    trans.y += -yOffset
                }
                ts.xScale += ts.xScale * scaleValue
                ts.yScale += ts.yScale * scaleValue
            }
            else {
                wheel.accepted = false
            }
        }
    }

    Component.onCompleted: {
        var childrenNum = children.length
        for(var i = children.length; i >= 0 ; i--)
        {
            var obj = children[i]
            if(obj !== undefined && obj.bPrivate === undefined)
            {
                obj.parent = view.contentItem
            }
        }
    }

    Column{
        property var bPrivate: true
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        Button{
            width: 30
            height: 30
            text: "o"
            onClicked: {
                root.backOrigin()
            }
        }
        Button{
            width: 30
            height: 30
            text: "+"
            onClicked: {
                root.zoomIn()
            }
        }
        Button{
            width: 30
            height: 30
            text: "-"
            onClicked: {
                root.zoomOut()
            }
        }

    }
}

3.可编辑的ListView

import QtQuick 2.5
import QtQuick.Controls 2.15
Item {
    id:root
    property var borderColor: "white"
    property var textSelectionColor: "#404244"
    property var itemSelectedColor: "#4285BD"
    property var itemHoveredColor: "#5F4285BD"
    property var fontColor: "white"
    
    Component {
        id: listDelegate
        Rectangle {
            id:rectDelegate
            width: listView.width
            height: 40
            radius: 5
            state: "normal"
            clip: true
            signal textChanged(var text)
            TextInput {
                id:input
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 5
                anchors.right: parent.right
                TextMetrics {
                    id: textMetrics
                    elide: Text.ElideRight
                    elideWidth: input.width
                    text: modelData
                }
                text: textMetrics.elidedText
                font.family: modelData
                font.pixelSize: 16
                color:root.fontColor
                selectByMouse:true
                selectionColor:root.textSelectionColor

                onTextChanged: {
                    if(rectDelegate.state === "editing")
                    {
                        rectDelegate.textChanged(text)
                    }
                }

                onAccepted:{
                    listView.currentIndex = index
                    rectDelegate.state = "normal"
                }

                onWidthChanged: {
                    textMetrics.elideWidth = input.width
                }
                onFocusChanged: {
                    if(!focus)
                        rectDelegate.state = "normal"
                }

            }

            ToolTip{
                id:toolTip
                text:modelData
                delay: 1000
                timeout: 1500
                visible: dragArea.hovered
                onVisibleChanged: {
                    toolTip.x = dragArea.mouseX
                    toolTip.y = dragArea.mouseY
                }

                background: Rectangle{
                    border.color: "blue"
                }
            }

            MouseArea{
                id:dragArea
                property var hovered: false

                anchors.fill: parent
                drag.target: dragItem
                hoverEnabled: true

                onPressed: {
                    listView.currentIndex = index
                    rectDelegate.state = "normal"
                    rectDelegate.grabToImage(function(result)
                    {
                        dragItem.Drag.imageSource = result.url
                        dragItem.Drag.hotSpot = Qt.point(mouse.x,mouse.y)
                    })
                }

                onEntered: {
                    hovered = true
                    if(!rectDelegate.ListView.isCurrentItem)
                        rectDelegate.state = "hovered"
                }
                onExited: {
                    hovered = false
                    if(!rectDelegate.ListView.isCurrentItem)
                        rectDelegate.state = "normal"
                }

                onDoubleClicked: {
                    rectDelegate.state = "editing"
                    input.selectAll()
                    input.forceActiveFocus()
                }
            }

            states: [
                State {
                    name: "normal"
                    PropertyChanges { target: rectDelegate; color:"transparent" }
                    PropertyChanges { target: rectDelegate; border.color:"transparent" }
                    PropertyChanges { target: rectDelegate; border.width:0 }
                    PropertyChanges { target: dragArea; z:1}
                    PropertyChanges { target: input; z:0}
                },
                State {
                    name: "hovered"
                    PropertyChanges { target: rectDelegate; color:root.itemHoveredColor }
                    PropertyChanges { target: rectDelegate; border.width:0 }
                    PropertyChanges { target: dragArea; z:1}
                    PropertyChanges { target: input; z:0}

                },
                State {
                    name: "editing"
                    PropertyChanges { target: rectDelegate; color:"transparent" }
                    PropertyChanges { target: rectDelegate; border.color:root.borderColor }
                    PropertyChanges { target: rectDelegate; border.width:1 }
                    PropertyChanges { target: dragArea; z:0}
                    PropertyChanges { target: input; z:1}
                }
            ]

            Item{
                id:dragItem
                Drag.active: dragArea.drag.active
                Drag.dragType: Drag.Automatic
                Drag.supportedActions: Qt.CopyAction
            }
        }
    }
    ListView {
        id:listView
        anchors.fill: parent
        model: Qt.fontFamilies()
        delegate: listDelegate
        highlight: Rectangle {id:highItem; color:root.itemSelectedColor ; radius: 5 }
        highlightMoveVelocity:-1   //高亮移动速度，-1 表示直接点击高亮
        focus: true
        ScrollBar.vertical: ScrollBar{
            width: 7
            policy: ScrollBar.AlwaysOn
        }
    }
}

4.有限制的浮点数编辑框

import QtQuick 2.0
import QtQuick.Controls 2.0

TextField{
    id:textFiled

    property double from: 0.0
    property double to: 5.0
    property int decimals: 1

    placeholderText:"0.5"
    state: focus ? "editing":"normal"


    background: Rectangle {
       id:bg
       anchors.fill: parent
    }

    onEditingFinished:{
        textFiled.focus = false
    }

   validator: RegExpValidator { regExp: /([0-5])?(\.[0-9])?/ }
   states: [
        State {
            name: "normal"
            PropertyChanges { target: bg ;color:"red";border.color: "transparent"}
        },
        State {
            name: "editing"
            PropertyChanges { target: bg ;color:"red";border.color: "#21be2b"}
        }
    ]
}

5.可八方向缩放的且可移动控件（可以限制在父控件内部）

通过设置控件的limited属性控制其是否限制在父控件内部移动和缩放

import QtQuick 2.7
import QtQuick.Controls 2.0

Rectangle {
    id:block;
    width: 200;
    height: 200;
    property var limited: true    // 限制移动或者缩放时是否可以超出父控件边界
    
    property int step: 10;   //鼠标的检测区域尺寸
    property bool isclicked: false;     //是否点击
    property int mouseState: 0;    //鼠标状态

    border.width: 2;
    border.color:block.focus ? "#45C6D6":"transparent"
    color: "#404244"

    MouseArea {
        id:mouse_area;
        hoverEnabled: block.focus;
        anchors.fill: block;

        property var mouseOld;   //鼠标按下时的坐标
        property var mouseNew;   //鼠标移动时的坐标

        function processOutLeft(){
            if(mouseNew.x < 0 && block.limited)
            {
                block.width = block.width + block.x
                block.x = 0
                mouseOld.x = 0
            }
            else if(block.width-mouseNew.x+mouseOld.x > 25)
            {
                block.width = block.width-mouseNew.x+mouseOld.x;
                block.x=block.x+mouseNew.x-mouseOld.x;
                mouseOld.x=mouseNew.x;
            }
            else if(block.width-mouseNew.x+mouseOld.x <= 25)
            {
                block.x = block.width + block.x - 25
                block.width = 25;
                mouseOld.x = block.x;
            }
        }
        function processOutRight(){
            if((block.x + block.width + mouseNew.x - mouseOld.x) >= block.parent.width  && block.limited)
            {

                block.width = block.parent.width  - block.x
                mouseOld.x = block.parent.width
            }
            else if(block.width + mouseNew.x - mouseOld.x <= 25)
            {
                block.width = 25;
                mouseOld.x = block.x + block.width;
            }
            else if(block.width + mouseNew.x - mouseOld.x > 25)
            {
                block.width = block.width + mouseNew.x - mouseOld.x;
                mouseOld.x = mouseNew.x;
            }

        }
        function processOutTop(){

            if(mouseNew.y < 0 && block.limited)
            {
                block.height = block.height + block.y
                block.y = 0
                mouseOld.y = 0
            }
            else if(block.height- mouseNew.y + mouseOld.y > 25)
            {
                block.height = block.height - mouseNew.y + mouseOld.y
                block.y = block.y + mouseNew.y - mouseOld.y
                mouseOld.y = mouseNew.y;
            }
            else if(block.height-mouseNew.y+mouseOld.y <= 25)
            {
                block.y = block.height + block.y - 25
                block.height = 25;
                mouseOld.y = block.y;
            }
        }
        function processOutBottom(){

            if((block.y + block.height+mouseNew.y-mouseOld.y) >= block.parent.height && block.limited)
            {

                block.height = block.parent.height- block.y
                mouseOld.y = block.parent.height
            }
            else if(block.height+mouseNew.y-mouseOld.y <= 25)
            {
                //block.y = block.height + block.y - 25
                block.height = 25;
                mouseOld.y = block.y + block.height;
            }
            else if(block.height+mouseNew.y-mouseOld.y > 25)
            {
                block.height = block.height+mouseNew.y-mouseOld.y;
                mouseOld.y = mouseNew.y;
            }
        }
        function horizontalMove(){
            var newX = block.x+mouseNew.x-mouseOld.x
            var maxX= parent.parent.width - block.width
            if(newX > maxX && block.limited)
            {
                block.x = maxX
                mouseOld.x = mouseNew.x
            }
            else if(newX <= 0 && block.limited)
            {
                block.x = 0
                mouseOld.x = mouseNew.x
            }
            else if(mouseNew.x >= 0 && mouseNew.x <= parent.parent.width || !block.limited){

                block.x = block.x+mouseNew.x-mouseOld.x
                mouseOld.x = mouseNew.x
            }
            else if(mouseNew.x < 0 && block.limited)
            {
                mouseOld.x = 0
            }
            else if(mouseNew.x > parent.parent.width && block.limited)
            {
                mouseOld.x = parent.parent.width
            }

        }
        function verticalMove(){
            var newY = block.y+mouseNew.y-mouseOld.y
            var maxY = parent.parent.height - block.height
            if(newY > maxY && block.limited)
            {
                block.y = maxY
                mouseOld.y = mouseNew.y
            }
            else if(newY <= 0 && block.limited)
            {
                block.y = 0
                mouseOld.y = mouseNew.y
            }
            else if(mouseNew.y >= 0 && mouseNew.y <= parent.parent.height || !block.limited){

                block.y = block.y + mouseNew.y - mouseOld.y
                mouseOld.y = mouseNew.y
            }
            else if(mouseNew.y < 0 && block.limited)
            {
                mouseOld.y = 0
            }
            else if(mouseNew.y > parent.parent.height && block.limited)
            {
                mouseOld.y = parent.parent.height
            }
        }
        function updataMouseState(){
            if(mouseX<block.step&&mouseX>=0)
            {
                if(0<=mouseY&&mouseY<block.step){
                    mouseState=1; // 左上
                    mouse_area.cursorShape= Qt.SizeFDiagCursor;
                }
                else if((block.height-block.step)<mouseY&&mouseY<=block.height){
                    mouseState=3; // 左下
                    mouse_area.cursorShape= Qt.SizeBDiagCursor;
                }
                else if(block.step<=mouseY&&mouseY<=block.height-block.step){
                    mouseState=2; // 左边
                    mouse_area.cursorShape= Qt.SizeHorCursor;
                }
            }
            else if(block.width-block.step<mouseX&&mouseX<=block.width)
            {
                if(0<=mouseY&&mouseY<block.step){
                    mouseState=7;  // 右上
                    mouse_area.cursorShape= Qt.SizeBDiagCursor;
                }
                else if((block.height-block.step)<mouseY&&mouseY<=block.height){
                    mouseState=9;  //  右下
                    mouse_area.cursorShape= Qt.SizeFDiagCursor;
                }
                else if(block.step<=mouseY&&mouseY<=block.height-block.step){
                    mouseState=8; // 右边
                    mouse_area.cursorShape= Qt.SizeHorCursor;
                }
            }
            else if(block.width-block.step>=mouseX&&mouseX>=block.step)
            {
                if(0<=mouseY&&mouseY<block.step){
                    mouseState=4; //上边
                    mouse_area.cursorShape= Qt.SizeVerCursor;
                }
                else if((block.height-block.step)<mouseY&&mouseY<=block.height){
                    mouseState=6; //下边
                    mouse_area.cursorShape= Qt.SizeVerCursor;
                }
                else if(block.step<=mouseY&&mouseY<=block.height-block.step){
                    mouseState=5; //中心
                    mouse_area.cursorShape=Qt.ArrowCursor;
                }
            }
        }

        onPressed:{
            block.focus=true;
            block.isclicked=true;
            mouseOld=parent.mapToItem(parent.parent,mouseX,mouseY);
            mouse.accepted=true;
        }
        onReleased:{
            block.isclicked=false;
            mouse.accepted=true;
        }
        onPositionChanged: {
            mouseNew=parent.mapToItem(parent.parent,mouseX,mouseY);

            if(block.isclicked)
            {
                switch(mouseState) //判断鼠标当前状态，0代表，在无焦点的情况下，直接点击就可以拖动。
                {
                case 0:
                case 5:
                    //移动时不能超出父控件边界
                    horizontalMove()
                    verticalMove()
                    break;
                case 1: //左上
                    processOutLeft()
                    processOutTop()
                    break;
                case 2: //左
                    processOutLeft()
                    break;
                case 3: //左下
                    processOutLeft()
                    processOutBottom()
                    break;
                case 4://上
                    processOutTop()
                    break
                case 6: //下
                    processOutBottom()
                    break;
                case 7: //右上
                    processOutRight()
                    processOutTop()
                    break;
                case 8://右
                    processOutRight()
                    break;
                case 9: //右下
                    processOutRight()
                    processOutBottom()
                    break;
                default:
                }
            }
            else
            {
                updataMouseState()
            }
            mouse.accepted=true;
        }
    }

    onFocusChanged: {
        if(!block.focus)
        {
            mouse_area.cursorShape=Qt.ArrowCursor;
            mouseState=0;
        }
    }
}


//测试代码

import QtQuick 2.15
import QtQuick.Window 2.12
ApplicationWindow {
    id:window
    visible: true
    width: 600
    height: 400
    title: qsTr("Hello World")
    color: "gray"
    Rectangle{
        anchors.centerIn: parent
        color: "transparent"
        border.color:"red"
        width: 400
        height: 400
        GeoItem{

        }
    }
}

6.自定义小窗口

import QtQuick 2.7
import QtQuick.Controls 2.0

Rectangle {
    id:block;
    width: 200
    height: 200

    property var title:qsTr("这里填入标题名称")
    property var titleHeight:30
    property var titleBackground:"red"
    property var minWidth: 100
    property var minHeight: 100

    property Component contenItem: content

    property int step: 6;   //鼠标的检测区域尺寸
    property var limited: true    // 限制移动或者缩放时是否可以超出父控件边界
    property var mouseOld   //鼠标按下时的坐标
    property var mouseNew   //鼠标移动时的坐标

    border.width: 1;
    border.color:block.focus ? "#45C6D6":"#2E2F30"
    color: "#404244"

    function processOutLeft(){
        if(mouseNew.x < 0 && block.limited)
        {
            block.width = block.width + block.x
            block.x = 0
            mouseOld.x = 0
        }
        else if(block.width-mouseNew.x+mouseOld.x > block.minWidth)
        {
            block.width = block.width-mouseNew.x+mouseOld.x;
            block.x=block.x+mouseNew.x-mouseOld.x;
            mouseOld.x=mouseNew.x;
        }
        else if(block.width-mouseNew.x+mouseOld.x <= block.minWidth)
        {
            block.x = block.width + block.x - block.minWidth
            block.width = block.minWidth;
            mouseOld.x = block.x;
        }
    }
    function processOutRight(){
        var offset = mouseNew.x - mouseOld.x
        if((block.x + block.width + offset) >= block.parent.width  && block.limited)
        {
            block.width = block.parent.width  - block.x
            mouseOld.x = block.parent.width
        }
        else if(block.width + offset <= block.minWidth)
        {
            block.width = block.minWidth
            mouseOld.x = block.x + block.width
        }
        else if(block.width + offset > block.minWidth)
        {
            block.width = block.width + offset
            mouseOld.x = mouseNew.x;
        }

    }
    function processOutTop(){

        var offset =   mouseOld.y - mouseNew.y
        if(mouseNew.y < 0 && block.limited)
        {
            block.height = block.height + block.y
            block.y = 0
            mouseOld.y = 0
        }
        else if(block.height + offset> block.minHeight)
        {
            block.height = block.height - mouseNew.y + mouseOld.y
            block.y = block.y  - offset//+ mouseNew.y - mouseOld.y
            mouseOld.y = mouseNew.y;
        }
        else if(block.height + offset <= block.minHeight)
        {
            block.y = block.height + block.y - block.minHeight
            block.height = block.minHeight;
            mouseOld.y = block.y;
        }
    }
    function processOutBottom(){

        if((block.y + block.height+mouseNew.y-mouseOld.y) >= block.parent.height && block.limited)
        {
            block.height = block.parent.height- block.y
            mouseOld.y = block.parent.height
        }
        else if(block.height+mouseNew.y-mouseOld.y <= block.minHeight)
        {
            block.height = block.minHeight;
            mouseOld.y = block.y + block.height;
        }
        else if(block.height+mouseNew.y-mouseOld.y > block.minHeight)
        {
            block.height = block.height+mouseNew.y-mouseOld.y;
            mouseOld.y = mouseNew.y;
        }
    }
    function horizontalMove(){
        var newX = block.x+mouseNew.x-mouseOld.x
        var maxX= block.parent.width - block.width
        if(newX > maxX && block.limited)
        {
            block.x = maxX
            mouseOld.x = mouseNew.x
        }
        else if(newX <= 0 && block.limited)
        {
            block.x = 0
            mouseOld.x = mouseNew.x
        }
        else if(mouseNew.x >= 0 && mouseNew.x <= block.parent.width || !block.limited){

            block.x = block.x+mouseNew.x-mouseOld.x
            mouseOld.x = mouseNew.x
        }
        else if(mouseNew.x < 0 && block.limited)
        {
            mouseOld.x = 0
        }
        else if(mouseNew.x > block.parent.width && block.limited)
        {
            mouseOld.x = block.parent.width
        }

    }
    function verticalMove(){
        var newY = block.y+mouseNew.y-mouseOld.y
        var maxY = block.parent.height - block.height
        console.log(newY,maxY)
        if(newY > maxY && block.limited)
        {
            block.y = maxY
            mouseOld.y = mouseNew.y
        }
        else if(newY <= 0 && block.limited)
        {
            block.y = 0
            mouseOld.y = mouseNew.y
        }
        else if(mouseNew.y >= 0 && mouseNew.y <= block.parent.height || !block.limited){

            block.y = block.y + mouseNew.y - mouseOld.y
            mouseOld.y = mouseNew.y
        }
        else if(mouseNew.y < 0 && block.limited)
        {
            mouseOld.y = 0
        }
        else if(mouseNew.y > block.parent.height && block.limited)
        {
            mouseOld.y = block.parent.height
        }
    }
    function updataMouseState(){
        if(mouseX<block.step&&mouseX>=0)
        {
            if(0<=mouseY&&mouseY<block.step){
                mouseState=1; // 左上
                mouse_area.cursorShape= Qt.SizeFDiagCursor;
            }
            else if((block.height-block.step)<mouseY&&mouseY<=block.height){
                mouseState=3; // 左下
                mouse_area.cursorShape= Qt.SizeBDiagCursor;
            }
            else if(block.step<=mouseY&&mouseY<=block.height-block.step){
                mouseState=2; // 左边
                mouse_area.cursorShape= Qt.SizeHorCursor;
            }
        }
        else if(block.width-block.step<mouseX&&mouseX<=block.width)
        {
            if(0<=mouseY&&mouseY<block.step){
                mouseState=7;  // 右上
                mouse_area.cursorShape= Qt.SizeBDiagCursor;
            }
            else if((block.height-block.step)<mouseY&&mouseY<=block.height){
                mouseState=9;  //  右下
                mouse_area.cursorShape= Qt.SizeFDiagCursor;
            }
            else if(block.step<=mouseY&&mouseY<=block.height-block.step){
                mouseState=8; // 右边
                mouse_area.cursorShape= Qt.SizeHorCursor;
            }
        }
        else if(block.width-block.step>=mouseX&&mouseX>=block.step)
        {
            if(0<=mouseY&&mouseY<block.step){
                mouseState=4; //上边
                mouse_area.cursorShape= Qt.SizeVerCursor;
            }
            else if((block.height-block.step)<mouseY&&mouseY<=block.height){
                mouseState=6; //下边
                mouse_area.cursorShape= Qt.SizeVerCursor;
            }
            else if(block.step<=mouseY&&mouseY<=block.titleHeight-block.step){
                mouseState=5; //中心
                mouse_area.cursorShape=Qt.ArrowCursor;
            }
            else{
                mouseState= -1; //中心
                mouse_area.cursorShape=Qt.ArrowCursor;
            }
        }
    }

    Item {
        id: content
        anchors.top:titleItem.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.margins: block.border.width
        Loader{
            sourceComponent: block.contenItem
            anchors.fill: parent
            anchors.margins: border.width
        }
    }
    MouseArea{
        anchors.fill: parent
        anchors.margins: block.step
        propagateComposedEvents: true
        onPressed: {
            block.focus=true
            mouse.accepted = false
        }
    }

    //左上
    MouseArea{
        anchors.left: parent.left
        anchors.top: parent.top
        width: block.step
        height: block.step
        cursorShape:Qt.SizeFDiagCursor
        hoverEnabled:true
        onPressed:{
            mouseOld = mapToItem(parent,mouseX,mouseY)
            mouseOld = parent.mapToItem(parent.parent,mouseOld.x,mouseOld.y)
        }
        onPositionChanged: {
            if(pressed){
                mouseNew = mapToItem(parent,mouseX,mouseY)
                mouseNew = parent.mapToItem(parent.parent,mouseNew.x,mouseNew.y)
                processOutLeft()
                processOutTop()
            }
        }
    }
    //左
    MouseArea{
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.topMargin: block.step
        anchors.bottomMargin: block.step
        width: block.step
        cursorShape:Qt.SizeHorCursor
        hoverEnabled:true
        onPressed:{
            mouseOld = mapToItem(parent,mouseX,mouseY)
            mouseOld = parent.mapToItem(parent.parent,mouseOld.x,mouseOld.y)
        }
        onPositionChanged: {
            if(pressed){
                mouseNew = mapToItem(parent,mouseX,mouseY)
                mouseNew = parent.mapToItem(parent.parent,mouseNew.x,mouseNew.y)
                processOutLeft()
            }
        }
    }
    //左下
    MouseArea{
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        width: block.step
        height: block.step
        cursorShape:Qt.SizeBDiagCursor
        hoverEnabled:true
        onPressed:{
            mouseOld = mapToItem(parent,mouseX,mouseY)
            mouseOld = parent.mapToItem(parent.parent,mouseOld.x,mouseOld.y)
        }
        onPositionChanged: {
            if(pressed){
                mouseNew = mapToItem(parent,mouseX,mouseY)
                mouseNew = parent.mapToItem(parent.parent,mouseNew.x,mouseNew.y)
                processOutLeft()
                processOutBottom()
            }
        }
    }
    // 上
    MouseArea{
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.leftMargin: block.step
        anchors.rightMargin: block.step
        height: block.step
        cursorShape:Qt.SizeVerCursor
        hoverEnabled:true
        onPressed:{
            mouseOld = mapToItem(parent,mouseX,mouseY)
            mouseOld = parent.mapToItem(parent.parent,mouseOld.x,mouseOld.y)
        }
        onPositionChanged: {
            if(pressed){
                mouseNew = mapToItem(parent,mouseX,mouseY)
                mouseNew = parent.mapToItem(parent.parent,mouseNew.x,mouseNew.y)
                processOutTop()
            }
        }
    }
    // 标题栏
    MouseArea{
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.leftMargin: block.step
        anchors.rightMargin: block.step
        anchors.topMargin:  block.step
        height: block.titleHeight
        cursorShape:Qt.ArrowCursor
        hoverEnabled:true
        onPressed:{
            block.focus=true
            mouseOld = mapToItem(parent,mouseX,mouseY)
            mouseOld = parent.mapToItem(parent.parent,mouseOld.x,mouseOld.y)
        }
        onPositionChanged: {
            if(pressed){
                mouseNew = mapToItem(parent,mouseX,mouseY)
                mouseNew = parent.mapToItem(parent.parent,mouseNew.x,mouseNew.y)
                horizontalMove()
                verticalMove()
            }
        }
        //drag.target: parent
    }
    //下
    MouseArea{
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.leftMargin: block.step
        anchors.rightMargin: block.step
        height: block.step
        cursorShape:Qt.SizeVerCursor
        hoverEnabled:true
        onPressed:{
            mouseOld = mapToItem(parent,mouseX,mouseY)
            mouseOld = parent.mapToItem(parent.parent,mouseOld.x,mouseOld.y)
        }
        onPositionChanged: {
            if(pressed){
                mouseNew = mapToItem(parent,mouseX,mouseY)
                mouseNew = parent.mapToItem(parent.parent,mouseNew.x,mouseNew.y)
                processOutBottom()
            }
        }
    }
    // 右上
    MouseArea{
        anchors.right: parent.right
        anchors.top: parent.top
        width: block.step
        height: block.step
        cursorShape:Qt.SizeBDiagCursor
        hoverEnabled:true
        onPressed:{
            mouseOld = mapToItem(parent,mouseX,mouseY)
            mouseOld = parent.mapToItem(parent.parent,mouseOld.x,mouseOld.y)
        }
        onPositionChanged: {
            if(pressed){
                mouseNew = mapToItem(parent,mouseX,mouseY)
                mouseNew = parent.mapToItem(parent.parent,mouseNew.x,mouseNew.y)
                processOutTop()
                processOutRight()

            }
        }
    }
    //右
    MouseArea{
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.topMargin: block.step
        anchors.bottomMargin: block.step
        width: block.step
        cursorShape:Qt.SizeHorCursor
        hoverEnabled:true
        onPressed:{
            mouseOld = mapToItem(parent,mouseX,mouseY)
            mouseOld = parent.mapToItem(parent.parent,mouseOld.x,mouseOld.y)
        }
        onPositionChanged: {
            if(pressed){
                mouseNew = mapToItem(parent,mouseX,mouseY)
                mouseNew = parent.mapToItem(parent.parent,mouseNew.x,mouseNew.y)
                processOutRight()
            }
        }
    }
    //右下
    MouseArea{
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        width: block.step
        height: block.step
        cursorShape:Qt.SizeFDiagCursor
        hoverEnabled:true
        onPressed:{
            mouseOld = mapToItem(parent,mouseX,mouseY)
            mouseOld = parent.mapToItem(parent.parent,mouseOld.x,mouseOld.y)
        }
        onPositionChanged: {
            if(pressed){
                mouseNew = mapToItem(parent,mouseX,mouseY)
                mouseNew = parent.mapToItem(parent.parent,mouseNew.x,mouseNew.y)
                processOutRight()
                processOutBottom()
            }
        }
    }

    Rectangle{
        id:titleItem
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.topMargin: block.border.width
        anchors.leftMargin: block.border.width
        anchors.rightMargin: block.border.width
        height:block.titleHeight
        color: block.titleBackground
        Text {
            anchors.fill: parent
            text: block.title
        }
    }


    onFocusChanged: {
        if(!block.focus)
        {
            mouse_area.cursorShape=Qt.ArrowCursor;
            mouseState=0;
        }
    }
}

7.有超链接的Text

    MouseArea{
            id:mouseArea
            anchors.centerIn: parent
            width: hp.width
            height: hp.height
            hoverEnabled: true
            cursorShape: hp.hoveredLink.length !== 0  ? Qt.PointingHandCursor: Qt.ArrowCursor
            Text {
                id: hp
                text: "一.<a href='http://www.novastar-led.cn'>http://www.novastar-led.cn</a>购买Kompass MX5 加密锁,购买成功后插入加密锁"
                anchors.centerIn: parent
                onLinkActivated: Qt.openUrlExternally(link)
            }
    }

8.QML 抓拍并异步保存

QML 抓拍,获取ItemGrabResult对象result。然后将result.image（QVarient()）发送到C++ 启动子线程保存。

		//QML
        onGraped: {
            myItem.grabToImage(function (result) {
                myModel.saveImageAsyn(result.image)
                
            }) 
        }
      //c++
      void saveImageAsyn(QVariant img)
      {
       	QDateTime current_date_time = QDateTime::currentDateTime();
    	QString current_date = current_date_time.toString("yyyy-MM-dd hh-mm-ss-zzz");
    	QString imagePath = QDir::tempPath() + "/" + current_date + ".png";
    	
    	QThreadPool::globalInstance()->start(
        	[=]() {
        	QImage& tempImg = img.value<QImage>();
        	tempImg.save(imagePath);
        }
    	);    
      }

9.QML 超链接文本

	MouseArea{
       id: mouseArea
       anchors.top: parent.top
       anchors.left: parent.left
       width: hrefText.width
       height: hrefText.height
       hoverEnabled: true
       cursorShape: hrefText.hoveredLink.length !== 0 ? Qt.PointingHandCursor : Qt.ArrowCursor

       Text {
              id: hrefText
              anchors.top: parent.top
              anchors.left: parent.left
              width: 255
              wrapMode: Text.WordWrap
              color: "#FEFEFE"
              font{
                   family: "Microsoft YaHei"
                   pixelSize: 10
               }
              lineHeight: 1.5
              linkColor: "#12C3B0"
              text: "一.<a href='http://www.baidu.com'>百度</a>   <br> 二. 其他。"
              onLinkActivated: Qt.openUrlExternally(link)
          }
  }
xhh-cy
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
QML进阶(四)-绘制自定义控件
yang1fei2的博客
04-21 3175
在Qt中我们通过paintEvent和QPainter的组合可以在控件中进行各种绘制操作, 包括绘制各种图形和文字。同样在QML中引入了画布元素(canvas element)，通过使用画布元素我们也可以画出各种各样的图形，同时这个元素允许脚本绘制。画布元素提供了一个依赖于分辨率的位图画布，你可以使用JavaScript脚本来绘制图形，制作游戏或者其它的动态图像。QML中的画布元素是基于HTML5的画布元素来完成的。 画布元素的基本思想是使用一个2D对象来渲染路径。这个2D对象包括了必要的绘图函数，画布元
QML 组合控件的结构思考
kuanshu456的专栏
04-20 246
QML界面编码的思考
Qt6.2 quick 新建工程，引入自定义qml，运行时提示“Xxxx is not a type“
u013206135的专栏
03-06 3813
在学qml，直接上手Qt6.2，想在一个窗口里调用另一个窗口，运行时提示"Xxxx is not a type"，在Qt5.15上做没遇到这个问题，在Qt6.2遇到，记录一下。 这里从工程创建开始介绍，遇到运行时提示"Xxxx is not a type"，想省时间的同学，直接看第17步。 1.新建一个Qt Quick工程 2.工程名和工程存储路径 3.感觉Cmake比较复杂，先上手qmake吧 4.qt6.2 5.MinGw 7.完成创建Project 8. Qt6...
QML中LIstView的几种数据模型
07-01
主要涉及在qml中ListView显示，使用了ListModel、ObjectModel、QStringList、QList、QAbstractListModel作为数据模型，其中使用ObjectModel能省去delegate.
一套完整的强大的qml自定义控件
04-20
一套完整的自定义的qmlGUI控件，功能强大完全可以拿去开发项目而不用重复造轮子。包括Button，Calendar，CheckBox，ComboBox，CtrlDialog，DateEdit，DatePicker，Dialog，FileDialog，ImageButton，Label，LineEdit，ListView，ListViewSelection，MessageBox，NumberEdit，NumberKeyboard，Popup，PopupLoader，Scalability，ScrollBar，SearchBox，SpinBox，Switch，TabBox，TextField，TextInput，TimeBox，TimeEdit，TimePicker，ToggleButton，ToolBox，TopTabBox，TreeView
qml-creative-controls：用于创意应用程序和创意编码的QML控件
02-05
`qml-creative-controls` 是一个专为创建富有创新性和艺术感的应用程序而设计的QML控件集合。它扩展了Qt Quick（QML）的图形用户界面（GUI）功能，提供了多种独特且视觉效果丰富的元素，适用于创意编码和多媒体应用...
QT的QML 非常好的例子
04-10
7. **导入（Imports）**：导入库可以让QML使用特定的模块，如QtQuick.Controls用于标准的UI控件，QtQuick.Layouts用于布局管理。 8. **脚本（Scripting）**：JavaScript可以嵌入QML中，用于处理逻辑和交互。例如，...
QmlBook-中文文档.pdf.zip
12-18
这个文档集合对于那些正在学习或想要深入理解QML的开发者来说是一份宝贵的资源，特别是在中文教程相对稀缺的情况下。 QML的核心概念包括以下几个方面： 1. **声明式编程**：在QML中，UI元素和它们的属性是通过简单...
components.7z
12-29
QML的核心概念是组件（Components），它们是可重用的UI元素，可以是简单的按钮、文本框，也可以是复杂的布局或自定义控件。在QML中，组件通过定义其属性、信号和行为来描述其外观和功能。例如，一个按钮组件可能会...
nokia qt quick
02-23
1. **扩展QML组件：**可以使用JavaScript或C++扩展QML组件，添加自定义属性、信号和方法。 2. **数据模型与视图：**支持多种数据模型，如QList*>、QAbstractItemModel等，并提供了ListView、GridView等视图组件用于...
Qml之自编表格控件（动态）
12-24
笔者在使用qt的qml语言开发产品时候，经常需要用到一些表格类的控件，用来合理有序地显示内容。毕竟没有表格规限内容，会看起来很乱。笔者使用的是qt4.8版本的qml，所以qml没有关于表格类的控件。这就有点头痛了，没办法，只能亲自写一个表格控件出来。 这一表格控件采用最基本qml元素编写，兼容性非常好，该表格控件还支持qt接口调用，动态显示。在文章的最后会公开源代码，仅供读者们参考学习。
Qml选择开关QmlToggleButton.7z
07-20
Qml选择开关QmlToggleButton.7z
QT自绘开关按钮
02-11
QT自绘开关按钮，里边带预览图！手机上那种左右滑动开关按钮
Qt 各种炫酷的特效
11-03
这是我见过最牛的控件特效了，和大家分享一下，绝对下载。里面有一个大神整理的exe文件，可以预览所有特效。
QML基本元素集
快乐学习，快乐分享
02-20 445
Item 基本的项元素 在QML中所有可视化的向都继承他 Rectangle 基本的可视化矩形元素 Gradient 定义一个两种颜色的渐变过程 GradientStop 定义个颜色，被Gradient使用
QML笔记-自定义控件的2种点击方式（推荐第二种）
IT1995的博客
06-03 5142
目录 基本概念 代码及演示 基本概念 自定义的时候，可以使用信号进行响应，也可以使用自带的onClicked进行操作。 代码及演示 运行截图都如下： 程序结构都如下： 第一种方法： main.qml import QtQuick 2.9 import QtQuick.Window 2.2 Window { visible: ...
Qt/C++编写自定义控件20-自定义饼图
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
06-03 5025
前言 上次在写可视化数据大屏电子看板项目的时候，为了逐步移除对QChart的依赖（主要是因为QChart真的太垃圾了，是所有Qt的模块中源码最烂的一个，看过源码的人没有一个不吐槽，不仅不支持10W级别的数据量曲线展示，居然一个饼图控件，文字部分的展示还用QLabel来显示的，这么低效率的方式都有），起初曲线图和柱状图等都用QCustomPlot替代了，就剩一个饼图需要自己用无敌的QPainter来...
qt 按钮 gradient_Qt编写自定义控件30-颜色多态按钮
weixin_28692867的博客
01-24 205
一、前言这个控件一开始打算用样式表来实现，经过初步的探索，后面发现还是不够智能以及不能完全满足需求，比如要在此控件设置多个角标，这个用QSS就很难实现，后面才慢慢研究用QPainter来绘制，我记得当时接到这个定制控件任务的时候是2016年，那时候对QPainter的使用还不是很熟悉，也就是从此控件开始，逐步研究QPainter的绘制，把所有的内置函数都使用一遍，最终用的越来越熟悉，使得后来到了...
qml 自定义控件 andriod
最新发布
10-02
qml自定义控件是一种在Qt中用于创建自定义用户界面的技术。它允许开发人员创建自己的控件，并在应用程序中使用它们。在Android平台上，可以使用qml自定义控件来创建自定义的UI元素，以满足应用程序的需求。 在提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xhh-cy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值