QML：ListView按下选中当前项和高亮的一例

最新推荐文章于 2024-02-02 16:21:21 发布

友善啊，朋友

最新推荐文章于 2024-02-02 16:21:21 发布

阅读量3.5k

点赞数 2

分类专栏： # Qt Quick模型视图委托文章标签： qml

本文链接：https://blog.csdn.net/kenfan1647/article/details/122125500

版权

Qt Quick模型视图委托专栏收录该内容

17 篇文章 32 订阅

订阅专栏

main.qml

import QtQuick 2.12
import QtQuick.Window 2.0

Window
{
    id:root;
    visible: true;
    width: 800; height: 400

    ListView
    {
        id:view
        anchors.fill: parent
        orientation: Qt.Horizontal
        spacing: 10
        snapMode: ListView.SnapOneItem
        model:5                //没有特殊数据时使用数字做模型
        delegate:DelegateItem{}
        highlight:HighlightDelegateItem{}
        focus: true
    }
}

DelegateItem.qml

import QtQuick 2.0
//import Qt5Compat.GraphicalEffects
import QtGraphicalEffects 1.14

Rectangle
{
    id:root
    width: 50
    height: 320
    radius: 25
    color: ListView.isCurrentItem?"#157efb":"#53d769" //选中颜色设置
    border.color: Qt.lighter(color, 1.1)

    Rectangle
    {
        id:cir
        color: "#ffffff"
        width: 36
        height: 36
        radius: 18
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 6
    }

    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            view.currentIndex = index  //item切换
        }
    }
}

HighlightDelegateItem.qml

import QtQuick 2.0

Rectangle
{
    id:root
    width: 460    //设置的宽高无效，会被裁剪成项目（委托组件）的大小
    height: 340
    radius: 25
    y: view.currentItem.y
    color: "#ff0000"
    z:view.z + 2;    //高亮委托的组件在最上面
}

DelegateItem.qml加上一个状态：

import QtQuick 2.0
//import Qt5Compat.GraphicalEffects
import QtGraphicalEffects 1.14

Rectangle
{
    id:root
    width: 50
    height: 320
    radius: 25
    color: ListView.isCurrentItem?"#157efb":"#53d769" //选中颜色设置
    border.color: Qt.lighter(color, 1.1)

    Rectangle
    {
        id:cir
        color: "#ffffff"
        width: 36
        height: 36
        radius: 18
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 6
    }

    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            if(root.state == "")
                root.state = "showDetails"
            else
                root.state = ""

            view.currentIndex = index  //item切换
        }
    }

    states:
    [
        State
        {
            name: "showDetails"
            PropertyChanges { target: root;width: 460;}
        }
    ]
    transitions: //设置状态转变的动画
    [
        Transition
        {
            NumberAnimation//其值为数值类型的动画
            {
                duration: 400;
                properties: "height,width,opacity"
            }
        }
    ]
}