qml实现点击按钮往Columnt添加一个组件对象

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4

Window {
    width: 800
    height: 600
    visible: true

    Rectangle {
        id: mainRect
        anchors.fill: parent
        property var mainRectComponent: null

        Column {
            id: mainColumn
            spacing: 5

            width: parent.width
            property var count: 0

            function deleteItems(object) {
                object.destroy()
            }

            function createItem() {
                var color = 'red'
                if (mainColumn.count % 3 === 1)
                    color = 'yellow'
                else if (mainColumn.count % 3 === 2)
                    color = 'blue'
                mainColumn.count++

                // 创建一个组件
                var obj = itemCompont.createObject(mainColumn, {color: color, width: mainRect.width,height:100})
                //obj.setCurentObject(obj)
                obj.val++
                obj.setCurrentText('Component' + mainColumn.count.toString()+ " :  "+obj.val)
                obj.deleteThis.connect(mainColumn.deleteItems)
            }
        }

        Button {
            anchors.top: mainColumn.bottom
            anchors.topMargin: 10
            anchors.right: mainRect.right
            anchors.rightMargin: 10
            text: '添加'

            onClicked: {
                mainColumn.createItem()
            }
        }

        Component {
            id: itemCompont
            Rectangle {
                id: compontRect
                color: 'blue'
                implicitWidth: 20
                implicitHeight: 50
                property var currentObject: ''
                property int  val: 5

                signal deleteThis(var obj)

                // 设置文字的内容
                function setCurrentText(textName) {
                    interText.text = textName
                }

                Text {
                    id: interText
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    anchors.verticalCenter: parent.verticalCenter
                    text: qsTr("text")
                }
                Button {
                    anchors.margins: 5
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.right: parent.right
                    text: '删除'

                    onClicked: {
                        compontRect.deleteThis(compontRect)
                    }
                }

                Component.onCompleted: {
                    compontRect.currentObject = parent
                }
            }
        }
    }
}

运行效果:


FR:徐海涛(hunkxu)

相关推荐

  1. iOS 按钮添加震动

    2024-06-18 12:24:04       37 阅读
  2. 新增表单按钮添加事件

    2024-06-18 12:24:04       13 阅读
  3. 解决vue按钮刷新页面的一个bug

    2024-06-18 12:24:04       29 阅读
  4. 【CSS节流】实现防止按钮重复

    2024-06-18 12:24:04       41 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-18 12:24:04       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-18 12:24:04       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-18 12:24:04       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-18 12:24:04       20 阅读

热门阅读

  1. MySQL触发器基本结构

    2024-06-18 12:24:04       11 阅读
  2. OpenCV之cv::createTrackbar

    2024-06-18 12:24:04       9 阅读
  3. 数据持久层与 SQL 注入

    2024-06-18 12:24:04       8 阅读
  4. React useContext

    2024-06-18 12:24:04       6 阅读
  5. elementUI实现上传excel文件并传给后端

    2024-06-18 12:24:04       8 阅读
  6. 数据库-单表查询-基本查询

    2024-06-18 12:24:04       7 阅读
  7. GDB使用

    2024-06-18 12:24:04       6 阅读
  8. 量产导入 | ATPG_FLOW

    2024-06-18 12:24:04       10 阅读
  9. 【linux 常用命令】

    2024-06-18 12:24:04       7 阅读
  10. 编程从入门到精通:一段跌宕起伏的旅程

    2024-06-18 12:24:04       8 阅读
  11. 所有报表情况查询明细

    2024-06-18 12:24:04       7 阅读