QML 自定义日期组件



  • Qt 有控件QDateEdit,但是qml没有,今天我们来自己实现一个,非常简单哦

    创建默认qml工程

    创建自定义组件 QmlDateEdit.qml

    点击上下键,计算一下日期

    import QtQuick 2.0
    
    Rectangle {
        id: rect
        width: 150
        height: 30
        border.width: 1
        border.color: "gray"
    
        property var currentDate: new Date
    
        Component.onCompleted: {
            label.text = getFormat(currentDate)
        }
    
        function up(){
            var time = currentDate.getTime() + 1*24*60*60*1000
            currentDate.setTime(time)
            label.text = getFormat(currentDate)
        }
    
        function down(){
            var time = currentDate.getTime() - 1*24*60*60*1000
            currentDate.setTime(time)
            label.text = getFormat(currentDate)
        }
    
        function addZero(value){
            if(value<10){
                return '0' + value
            }
            else{
                return value
            }
        }
    
        function getFormat(date){
            var year = date.getFullYear()
            var month = date.getMonth()
            var day = date.getDate()
    
            return year + '/' + addZero(month+1) + '/' + addZero(day)
        }
    
        TextInput{
            id: label
            anchors.verticalCenter: parent.verticalCenter
            width: parent.width-imgUp.width
            readOnly: true
            selectByMouse: true
    
        }
        Image {
            id: imgUp
            source: "qrc:/up.png"
            anchors.right: parent.right
    
            MouseArea{
                anchors.fill: parent
                onClicked: up()
            }
        }
        Image {
            id: imgDown
            source: "qrc:/down.png"
            anchors.right: parent.right
            anchors.bottom: parent.bottom
    
            MouseArea{
                anchors.fill: parent
                onClicked: down()
            }
        }
    }
    
    

    main.qml调用组件

    import QtQuick 2.9
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("QML 自定义日期组件")
    
        QmlDateEdit{
            id: dateEdit
        }
    }
    
    

    效果

    0_1526990634491_20180522_200052.gif

    源代码

    https://gitee.com/chen227/qmlDateEdit

    Fork me on Gitee


 

最近的回复

  • @bladesero Blender 在角色建模和渲染这些方面的确比较强。😄

    我们的软件还在发展中呢。
    18da2116-2055-47c1-8317-1ccde17dfcc0-image.png

    阅读更多
  • untitled.jpg figure角色(WIP2).jpg
    TIM截图20190117184210.png
    使用的软件是blender,zbrush和substance painter

    阅读更多
  • 背景:如果需要qml显示循环list,一般是用3个ListView循环交替,实现伪循环,期间逻辑复杂,容易出错,PathView本身自带循环,所以考虑用PathView实现循环

    设计:PathView显示5条数据,按照垂直List一个个排好顺序,由于收尾移动时候会空白穿帮,所以用clip控制显示中间三条数据

    滚动控制:currentIndex,decrementCurrentIndex(),incrementCurrentIndex()

    代码:

    Item{ id: item1 property int myIndex: 0 property int onePageCount: 3 property real oneHeight: 72 property real oneWidth: 580 property int isCurrentListView: 1 //0,1,2 property bool isAdd: true //direction,down=true,up=false property int hightlightIndex: 0 property int currentIndexPathView: 0 //use this Item{ id: itemClip width: item1.oneWidth height: item1.oneHeight*3 clip: true PathView { id: listView1 width: item1.oneWidth model: listModelSpeedWarning delegate: delegeteLine pathItemCount: item1.onePageCount+2 interactive: false path: Path { startX: item1.oneWidth/2 startY: -item1.oneHeight/2 PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*0+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*0+item1.oneHeight/2 } PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*1+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*1+item1.oneHeight/2 } PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*2+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*2+item1.oneHeight/2 } PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*3+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*3+item1.oneHeight/2 } PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*4+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*4+item1.oneHeight/2 } } Component.onCompleted: { listView1.currentIndex = -1 } } } }

    问题:windows下测试,按住按键不松手,list滚动会卡住,松手后恢复正常,看来list不能滚动太快

    阅读更多
  • H

    @青山白云 只是为了替换GIF,不过目前已经解决加载问题

    阅读更多

关注我们

微博
QQ群











召唤伊斯特瓦尔