Qml小例子

原创 已于 2022-03-14 19:26:59 修改 · 825 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

于 2022-03-12 20:55:07 首次发布
本文通过Qml展示了ApplicationWindow中如何使用附加信号与属性，深入探讨了ListView的实现以及结合Timer组件的应用，为前端开发中的界面交互提供了实例。
  1. ApplicationWindow
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4 as Ctr1
import QtQuick.Layouts 1.2
import './Text.js' as Jie

ApplicationWindow{
    id:window
    width:640
    height:480
    visible: true
    title:"Hello world"


    menuBar: MenuBar {
             Menu {
                 title: qsTr("&File")
                 Action { text: qsTr("&New...") }
                 Action { text: qsTr("&Open...") }
                 Action { text: qsTr("&Save") }
                 Action { text: qsTr("Save &As...") }
                 MenuSeparator { }
                 Action { text: qsTr("&Quit")
                 onTriggered: close()}
             }
             Menu {
                 title: qsTr("&Edit")
                 Action { text: qsTr("Cu&t") }
                 Action { text: qsTr("&Copy") }
                 Action { text: qsTr("&Paste") }
             }
             Menu {
                 title: qsTr("&Help")
                 Action { text: qsTr("&About") }
             }

         }
    header:ToolBar{
        Row{
            ToolButton{
                text: "打开“"
            }
            ToolButton{
                text:"编辑"
            }
        }
        background: Rectangle{
            color: "orange"
        }
    }

    Rectangle{
//        height: 100
//        width: parent.width
        id:content
        anchors.fill: parent
        color: 'red'

        Component.onCompleted: {
            console.log(content.width," ",content.height)
        }
    }
    footer: Ctr1.StatusBar{
        Row{
            Label{
                text:"Menu" + ApplicationWindow.menuBar.count+' C ount'
                font.italic: true
                color:'DeepSkyBlue'
            }
        }
    }
}

在这里插入图片描述

  1. 附加信号与属性
Window{
    id:window
    width:640
    height:480
    visible: true
    title:"Hello world"

    Component.onCompleted: {
        console.log('construct')

    }
    Component.onDestruction: {
        console.log('destruct')
    }
    Rectangle{
        anchors.fill:parent
        color: 'green'
        Component.onCompleted: {
            console.log("rectangle construct")
        }
        Component.onDestruction: {
            console.log('rectangle desstruct')
        }
    }

}

在这里插入图片描述

Window{
    id:window
    width:640
    height:480
    visible: true
    title:"Hello world"

    Flickable{
        anchors.fill:parent
        contentWidth: image.width;contentHeight: image.height
        Image{id :image;source:"./1.png"
        }
        ScrollBar.vertical: ScrollBar{}
        ScrollBar.horizontal: ScrollBar{}
    }

}

在这里插入图片描述

  1. ListView
Item{

       anchors.fill:parent
       ListView{
           id:jielist
           anchors.fill: parent
           model:20

           delegate: ItemDelegate{
               width: jielist.width
               text: modelData

               background: Rectangle{
                   color: getColor()
                   function getColor(){
                       let colorObject = Jie.getRandom()
                       return Qt.rgba(colorObject.red,colorObject.green,colorObject.blue)
                   }
               }
           }
           //ScrollIndicator.vertical: ScrollIndicator{} //不可拖动
           ScrollBar.vertical: ScrollBar{}
       }

   }

在这里插入图片描述

Item{

       anchors.fill:parent
       ListView{
           id:jielist
           anchors.fill: parent
           model:['玫瑰','白可花']

           delegate: ItemDelegate{
               width: jielist.width
               text: modelData

               background: Rectangle{
                   color: getColor()
                   function getColor(){
                       let colorObject = Jie.getRandom()
                       return Qt.rgba(colorObject.red,colorObject.green,colorObject.blue)
                   }
               }
               onClicked: console.log(modelData)
           }
           //ScrollIndicator.vertical: ScrollIndicator{} //不可拖动
           ScrollBar.vertical: ScrollBar{}
       }

   }

在这里插入图片描述

Item{
        id:jieItem
       anchors.fill:parent
       //颜色随机生成器
       property  var colorBuilder:Jie.getColorFactory(Qt.rgba)
       ListView{
           id:jielist
           anchors.fill: parent
           model:['玫瑰','白可花']

           delegate: ItemDelegate{
               width: jielist.width
               text: modelData

               background: Rectangle{
                   color: jieItem.colorBuilder()}

               onClicked: console.log(modelData)
           }
           //ScrollIndicator.vertical: ScrollIndicator{} //不可拖动
           ScrollBar.vertical: ScrollBar{}
       }

   }```







function getColorFactory(rgbFunction){
    return function(){
        let colorObject = Jie.getRandom()
        return Qt.rgba(colorObject.red,colorObject.green,colorObject.blue)
    }
}

在这里插入图片描述

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4 as Ctr1
import QtQuick.Layouts 1.2
import './Text.js' as Jie

Window{
    id:window
    width:640
    height:480
    visible: true
    title:"Hello world"

   Item{
        id:jieItem
       anchors.fill:parent
       //颜色随机生成器
       property  var colorBuilder:Jie.getColorFactory(Qt.rgba)
       ListView{
           id:jielist
           anchors.fill: parent
           model:['玫瑰','白可花']

           delegate: ItemDelegate{
               width: jielist.width
               text: modelData

               background: Rectangle{
                   color: jieItem.colorBuilder()}

               onClicked: console.log(modelData)
           }
           //ScrollIndicator.vertical: ScrollIndicator{} //不可拖动
           ScrollBar.vertical: ScrollBar{}
           Component.onCompleted: {
               let modelArray = jielist.model
               modelArray.push("wamngwu")
               jielist.model = modelArray
           }
       }

   }

}

在这里插入图片描述

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4 as Ctr1
import QtQuick.Layouts 1.2
import './Text.js' as Jie

Window{
    id:window
    width:640
    height:480
    visible: true
    title:"Hello world"

   Item{
        id:jieItem
       anchors.fill:parent
       //颜色随机生成器
       property  var colorBuilder:Jie.getColorFactory(Qt.rgba)
       ListView{
           id:jielist
           anchors.fill: parent
           model:[
           {
                   name:"甘雨",
                   age:3000
               },{
                   name:"刻晴",
                   age:22
               }

           ]

           delegate: ItemDelegate{
               width: jielist.width
               text: 'name:'+modelData.name +'  age: '+ modelData.age + (jielist.currentIndex==index?'√':' ')

               background: Rectangle{
                   color: jieItem.colorBuilder()}

               onClicked: {console.log(modelData)
               jielist.currentIndex=index
               }
           }
           //ScrollIndicator.vertical: ScrollIndicator{} //不可拖动
           ScrollBar.vertical: ScrollBar{}
//           Component.onCompleted: {
//               let modelArray = jielist.model
//               modelArray.push("wamngwu")
//               jielist.model = modelArray
//           }
       }

   }

}

在这里插入图片描述

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4 as Ctr1
import QtQuick.Layouts 1.2
import './Text.js' as Jie

Window{
    id:window
    width:640
    height:480
    visible: true
    title:"Hello world"

   Item{
        id:jieItem
       anchors.fill:parent
       //颜色随机生成器
       property  var colorBuilder:Jie.getColorFactory(Qt.rgba)
       ListView{
           id:jielist
           anchors.fill: parent
           model:ListModel{
          ListElement{
                   name:"甘雨"
                   age: 3000
               }
          ListElement{
                   name:"刻晴"
                   age:22
               }

           }

           delegate: Rectangle{
               width: jielist.width
               height:jielist.height*0.1
               color:jieItem.colorBuilder()

               Text{
                   anchors.fill: parent
                   text:"name: "+name+" age: "+age
                   font.pointSize: 16
                   verticalAlignment: Text.AlignVCenter
                   horizontalAlignment: Text.AlignHCenter
           }
           }



       }

   }

}

在这里插入图片描述

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4 as Ctr1
import QtQuick.Layouts 1.2
import './Text.js' as Jie

Window{
    id:window
    width:640
    height:480
    visible: true
    title:"Hello world"

   Item{
        id:jieItem
       anchors.fill:parent
       //颜色随机生成器
       property  var colorBuilder:Jie.getColorFactory(Qt.rgba)
       ListView{
           id:jielist
           anchors.fill: parent
           model:ListModel{
               id:jieListModel
          ListElement{
                   name:"甘雨"
                   age: 3000
               }
          ListElement{
                   name:"刻晴"
                   age:22
               }

           }

           delegate: Rectangle{
               width: jielist.width
               height:jielist.height*0.1
               color:jieItem.colorBuilder()

               Text{
                   anchors.fill: parent
                   text:"name: "+name+" age: "+age + (parent.isCurrentIndex()? '√':'')
                   font.pointSize: 16
                   verticalAlignment: Text.AlignVCenter
                   horizontalAlignment: Text.AlignHCenter
           }
               MouseArea{
                   anchors.fill:parent
                   onClicked: {
                       let data = jieListModel.get(index)
                       console.log('name : ',data.name,'  age:','data.age')
                       console.log(JSON.stringify(data))
                       parent.setCurrentIndex()
                   }
               }
               function isCurrentIndex(){
                   return jielist.currentIndex == index
               }
               function setCurrentIndex(){
                   jielist.currentIndex=index
               }
           }
           Component.onCompleted: {
               jielist.model.append({'name':'胡桃','age':16})
           }



       }

   }

}

在这里插入图片描述

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.15
import QtQuick.Controls 1.4 as Ctr1
import QtQuick.Layouts 1.15
import './Text.js' as Jie

Window{
    id:window
    width:640
    height:480
    visible: true
    title:"Hello world"

   Item{
        id:jieItem
       anchors.fill:parent
       //颜色随机生成器
       property  var colorBuilder:Jie.getColorFactory(Qt.rgba)
       ListView{
           id:jielistView
           anchors.fill: parent
           model:ListModel{
          ListElement{
                   name:"甘雨"
                   group: "仙人"
               }
          ListElement{
                   name:"刻晴"
                   group:"凡人"
               }
          ListElement{
                   name:"胡桃"
                   group:"凡人"
               }
          ListElement{
                   name:"申鹤"
                   group:"凡人"
               }
          ListElement{
                   name:"烟绯"
                   group:"仙人"
               }

           }

           delegate: Rectangle {
               width: jielistView.width
               height:20
               color:jieItem.colorBuilder()
               // @disable-check M16
               required property string name
               Text{
                   anchors.centerIn: parent
                   text: name
           }}
           section.property: 'group'
           section.delegate: Rectangle{
               width: jielistView.width
               height:20
               color:jieItem.colorBuilder()
               // @disable-check M16
               required property string section
               Text{
                   anchors.centerIn: parent
                   text:section
                   font.bold: true
                   font.pointSize: 16
           }}


           }



       }

   }
  1. Timer
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4 as Ctr1
import QtQuick.Layouts 1.2
import './Text.js' as Jie

Window{
    id:window
    width:640
    height:480
    visible: true
    title:"Hello world"

   Item{
        id:jieItem
       anchors.fill:parent
       //颜色随机生成器
       property  var colorBuilder:Jie.getColorFactory(Qt.rgba)
       Label{
           Timer{
               interval: 1000
               repeat: true
               running: true
               triggeredOnStart: true
               onTriggered: {
                   parent.setDate(Qt.formatDateTime(new Date(),'yyyy-MM-dd hh:mm:ss'))
               }
           }
           font.bold: true
           font.italic: true
           color: jieItem.colorBuilder
           function setDate(dateString){
               text = dateString
           }
       }

       }

   }

在这里插入图片描述

  1. Componpent
//只能支持es5
function Operoto(number){
    this.number=number
    this.add = function(num){
        return number+num
    }
    this.sub = function(num){
        return number-num
    }
}
function getRangRandom(max){
    return Math.floor(Math.random()*max)
}

function getRandom(num){
    let red=getRangRandom(256)
    let green=getRangRandom(256)
    let blue=getRangRandom(256)
    return {red:red/255,green:green/255,blue:blue/255}
}
function getColorFactory(rgbFunction){
    return function(){
        let colorObject = Jie.getRandom()
        return Qt.rgba(colorObject.red,colorObject.green,colorObject.blue)
    }
}

在这里插入图片描述

qml小案例
weixin_48657573的博客
10-02 1511
最近看了qml,看了一个别人的案例，还是有所启发的 这个就是一个倒计时算离2022过年有多少天的程序，用到了定时器还有动画图片以及设置背景的技术。 首先实现距离2022过年的具体时间再把它想办法放在一个text文本框中，然后要实现去程序框，让他看起来好看一点，这个主要是在main函数中完成的，用定时器每隔500微妙，触发一次，调用一次run函数，然后用按钮实现右击出现并退出，这个里面又用到鼠标事件，比如右击后按钮的位置和鼠标的位置之间的关系，还有拖动的鼠标位移量的东西，然后文本框就是显示距离天数的，用锚布局
QT中QML例程-学习笔记-语法
qq_45059758的博客
10-31 1023
QML概述和对应语法使用详解
简单的QML实例
01-06
代码很简单， 供了解对学习QML的人学习和参考一下。 可以，看到QML 通过一些简单的代码就能实现图片的运动，改变。
qml简单示例
11-19
qml完成的小示例，包括旋转的风车、红绿灯和日历界面，具体效果展示可以参看http://www.cnblogs.com/swarmbees/p/6081823.html
Qt QML创建多线程（示例存读数据库）
最新发布
prowity的博客
10-01 1119
本文介绍了使用Qt多线程解决GUI界面因数据库操作卡顿的问题。通过创建继承QObject的主线程和子线程类，利用信号槽机制实现线程间通信：主线程负责界面绘制，子线程处理耗时数据库操作。文章详细展示了线程类定义、数据库操作实现、信号槽连接方式，并提供了QML示例演示数据存读流程。这种架构将耗时任务移至子线程执行，保持界面响应流畅，同时支持并行处理多个任务，有效提升程序性能。
QML范例详解
热门推荐
henreash的专栏
09-06 3万+
研究了一段时间QML,现在对Qt中的一个计算器范例的代码进行分析,并总结一下前面学习的内容.Qt这种语言大多数还是被用于嵌入式设备上,而QML则是专为嵌入式设备而生的.Qt在桌面开发上占据的比例很小,而且已被Nokia出售,未来的前景如何谁也不好说.但Qt确实很棒,祝福一下吧,如果以后Qt支持android和苹果的开发了,在继续深入研究. 上图是运行效果图,界面风格确实很漂亮.鼠标点击按钮后
QT的QML 非常好的例子
04-10
有QT 5可以运行成功的QML的界面实例 带有登陆界面和界面切换功能
qml学习小例子
01-16
**qml学习小例子** 本文将深入探讨`QML`（Qt Meta Language）的学习与实践，以一个基于`Qt5`的抽奖程序为例，讲解如何利用`QML`和`QtQuick`来创建交互式用户界面。`QML`是`Qt`框架的一部分，它提供了一种声明式的...
QML界面小例子
10-21
在"QML界面小例子"中，我们可以看到如何运用QML来设计和实现一个简单的用户界面。 QML的核心概念是基于对象的，每个QML文件都代表一个对象树，其中包含了各种可定制的元素，如Rectangle、Button、Image等。例如，`...
一个简单的QML例子
12-22
在本"一个简单的QML例子"中，我们将深入探讨QML的基本概念，以及如何创建一个基本的"Hello, World!"应用程序。 QML的核心在于其声明性编程风格，它允许我们描述UI元素的属性和它们之间的关系，而不是像在传统的命令...
精选资源
qml 3d的几个小例子，如3D模型渲染、缩放、旋转
09-14
QML（Qt Modeling Language）是一种用于开发用户界面和应用程序的声明式编程语言，特别适用于开发基于Qt框架的应用程序。QML不仅支持传统的二维图形渲染，还提供了强大的三维图形渲染能力，是开发跨平台图形用户界面...
QML语法从一个简单的例子说起
05-07
QML语法从一个简单的例子说起，说明见http://www.cnblogs.com/csulennon/p/4485768.html
QML简单实例
02-03
打开qml调试工具即可调试运行，代码很简单，可结合qt帮助文档学习
QML学习实例
04-11
QML是一种描述语言，主要是对界面效果等的一种描述，它可以结合javaScript来进行更复杂的效果及逻辑实现。比如做个游戏，实现一些更有趣的功能等.
Qt-QML-Example:Qt，QML示例集合
03-20
Qt-QML-示例 Qt，QML示例集合。 1.QML-ExpandableListView 用QML中的listview来实现树形二级列表（类似android ExpandableListView控件） 2.QML阴影字体 QML实现阴影字体效果，可定义阴影颜色及阴影大小等 3.QML-Light-Ani-font QML实现发光呼吸动画字体效果 4，QML渐变字体 QML实现渐变色字体 4，QML-Customize-Flipable QML实现页面反转封装，旋转过程中修改页面不透明度，比例，角度 5. QML-ListView-header-Suspension QML实现ListView控件悬浮标题栏 6，QML-Reflection QML实现控件或图片倒影效果 7，QML-PathView-CoverFlow QML实现图片酷炫切换效果 8，QML
QML基础——QML国际化(中文示例)
weixin_30654419的博客
01-30 482
在Qt程序中如何使用多国语言已经在《Qt的国际化和本地化》 这篇文章中有所介绍，本文则针对如何对出现在QML中的字符串进行国际化进行专门介绍。本本将通过一个很小的中文例子程序，向大家一步步讲解如何使得出现在QML代码中的字符串显示成中文。示例程序可通过本文末尾所附链接下载。更多阅读可以参照“QML的国际化” 修改pro 在Qt的pro文件中首先加入以下几行： CONFIG += loca...
qml_基本元素运用示例
剑心！的博客
11-22 923
qml_基本元素运用示例  1. 介绍QML是一种描述语言，主要是对界面效果等的一种描述，它可以结合javaScript来进行更复杂的效果及逻辑实现。比如做个游戏，实现一些更有趣的功能等 2. 简单的例子 import Qt 4.7 Rectangle {     width: 200     he
自学QML制作实用界面小例子分享
回到本例，“QML界面小例子”可能是一个简单的应用程序，用来演示如何使用QML进行界面编程。这个例子可能是涵盖了基本的QML元素使用，可能包括了一些交互逻辑和简单的动画效果。开发者在边学习QML的过程中边做出了这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

lu750310

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

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

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

打赏作者

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

抵扣说明：

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

余额充值