Qt qml ListView 鼠标点击高亮,缩放等基础设置

import QtQuick 2.0
import QtQuick.Controls 2.0


 Rectangle {
     id: mainrec

     property int widthx: 170
     property int heightx:800

     width: widthx; height: heightx
     color: "lightgray"

     Component{
         id:listdelegate
         Item{
             id:delegateitem
             width: widthx
             height:widthx
             Column{
                 Text{text:name;color:"#0000ff";font.pointSize: 14}
                 Text{text:number;color:"#000000";font.pointSize: 10}
                 Image{ width: 120; height: 120;source:img}
             }
             states: State {
                 name: "Current"
                 when: delegateitem.ListView.isCurrentItem
                 PropertyChanges { target: delegateitem; x:20;scale: 1.1}
             }
             transitions: Transition {
                 NumberAnimation { easing.type: Easing.Linear; properties: "x"; duration: 200 }
             }

             MouseArea {
                 anchors.fill: parent
                 onClicked:{
                      delegateitem.ListView.view.currentIndex = index
                 }
             }
         }
     }

     Component{
         id:highlightrec
         Rectangle{
             width: widthx
             height:widthx
             color: "#f34b08"
             radius: 5
             border.width: 1
             border.color: "#60f50a"
         }
     }

     ListView{
         id:listinfo
         anchors.fill: parent
         focus: true
         highlight:highlightrec

         highlightFollowsCurrentItem :true
         model:listModelData
         delegate:listdelegate
     }

     ListModel{
         id:listModelData

         ListElement{
             name:"小明"
             number:"4568467"
             img:"qrc:/res/head5.png"
         }

         ListElement{
             name:"YY"
             number:"2741869"
             img:"qrc:/res/head2.png"
         }

         ListElement{
             name:"邹民兵"
             number:"986153"
             img:"qrc:/res/head3.png"
         }

         ListElement{
             name:"马超"
             number:"39148209"
             img:"qrc:/res/head4.png"
         }

         ListElement{
             name:"小明"
             number:"4568467"
             img:"qrc:/res/head5.png"
         }

         ListElement{
             name:"YY"
             number:"2741869"
             img:"qrc:/res/head2.png"
         }

         ListElement{
             name:"邹民兵"
             number:"986153"
             img:"qrc:/res/head3.png"
         }

         ListElement{
             name:"马超"
             number:"39148209"
             img:"qrc:/res/head4.png"
         }

         ListElement{
             name:"小明"
             number:"4568467"
             img:"qrc:/res/head5.png"
         }

         ListElement{
             name:"YY"
             number:"2741869"
             img:"qrc:/res/head2.png"
         }

         ListElement{
             name:"邹民兵"
             number:"986153"
             img:"qrc:/res/head3.png"
         }

         ListElement{
             name:"马超"
             number:"39148209"
             img:"qrc:/res/head4.png"
         }

     }
 }




#include <QGuiApplication>
#include <QQmlApplicationEngine>
 
#include<QtQuick/QQuickView>
#include<QListWidget>
 
int main(int argc, char* argv[])
{
    QGuiApplication coreApp(argc, argv);
 
 
//    QQmlApplicationEngine qmlEngine;
//    qmlEngine.load(QUrl(QLatin1String("qrc:/main.qml")));
 
    QQuickView viwer;
    viwer.setSource(QUrl("qrc:/main.qml"));
    viwer.setVisible(true);
 
    QQuickItem *rootItem = viwer.rootObject();
 
 
    return coreApp.exec();
}
 













评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值