《QmlBook》笔记（11）：状态可变化的代理示例

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
    visible: true
    width: 480;
    height: 700;
    Rectangle
    {
        anchors.fill: parent
        gradient: Gradient
        {
            GradientStop { position: 0.0; color: "#4a4a4a" }
            GradientStop { position: 1.0; color: "#2b2b2b" }
        }
    }

    ListView
    {
        id: listView
        anchors.fill: parent
        delegate: detailsDelegate
        model: planets
    }

    ListModel
    {
        id: planets
        ListElement { name: "水星"; imageSource: "qrc:/images/mercury.jpeg"; facts: "水星是太阳系中最小的行星。它是离太阳最近的行星。它每87.969天绕太阳一次。" }
        ListElement { name: "金星"; imageSource: "qrc:/images/venus.jpeg"; facts: "金星是离太阳第二个行星。它是一颗陆地行星，因为它有一个坚硬的岩石表面。其他的类地行星是水星、地球和火星。天文学家已经认识金星几千年了。" }
        ListElement { name: "地球"; imageSource: "qrc:/images/earth.jpeg"; facts: "地球是离太阳第三个行星。它是我们太阳系的四颗类地行星之一。这意味着它的大部分质量是固态的。另外三个是水星，金星和火星。地球也被称为蓝色行星，“行星地球”和“地球”。" }
        ListElement { name: "火星"; imageSource: "qrc:/images/mars.jpeg"; facts: "火星是太阳系中距离太阳第四大行星。火星干燥、多岩石、寒冷。它是太阳系最大的火山所在地。火星是以神话中的罗马战神命名的，因为它是一颗红色的行星，象征着血的颜色。" }
    }

    //查看详情委托 模型中的数据显示成以下的样子
    Component
    {
        id: detailsDelegate
        Item
        {
            id: wrapper
            width: listView.width
            height: 30

            Rectangle //左边
            {
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: parent.top
                height: 30
                color: "#333"
                border.color: Qt.lighter(color, 1.2)
                Text
                {
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.leftMargin: 4
                    font.pixelSize: parent.height-4
                    color: '#f0f'
                    text: name
                }
            }

            Rectangle //右边显示图片
            {
                id: image
                width: 26
                height: 26
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.rightMargin: 2
                anchors.topMargin: 2
                color: "black"
                Image
                {
                    anchors.fill: parent
                    fillMode: Image.PreserveAspectFit
                    source: imageSource
                }
            }

            MouseArea //这段不能放在最下面 否则相当于在最上层铺了一层鼠标期间区域 会覆盖其他组件的鼠标功能
            {
                anchors.fill: parent
                onClicked: parent.state = "expanded"    //点击切换状态
            }

            //显示详细信息
            Item
            {
                id: factsView
                anchors.top: image.bottom//项的下方
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                opacity: 0 //默认不可见
                Rectangle
                {
                    anchors.fill: parent
                    gradient: Gradient
                    {
                        GradientStop { position: 0.0; color: "#fed958" }
                        GradientStop { position: 1.0; color: "#fecc2f" }
                    }
                    border.color: '#000000'
                    border.width: 2

                    Text
                    {
                        anchors.fill: parent
                        anchors.margins: 5
                        clip: true
                        wrapMode: Text.WordWrap
                        color: '#1f1f21'
                        font.pixelSize: 24
                        text: facts
                    }
                }
            }

            Rectangle //关闭按钮
            {
                id: closeButton
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.rightMargin: 2
                anchors.topMargin: 2
                width: 26
                height: 26
                color: "#157efb"
                border.color: Qt.lighter(color, 1.1)
                opacity: 0 //默认不可见
                MouseArea
                {
                    anchors.fill: parent
                    onClicked: wrapper.state = "" //点击恢复默认状态
                }
            }

            states:
            [
                State
                {
                    name: "expanded"
                    PropertyChanges { target: wrapper;
                                      height: listView.height }
                    PropertyChanges { target: image;
                                      width: listView.width;
                                      height: listView.width;
                                      anchors.rightMargin: 0;
                                      anchors.topMargin: 30 }
                    PropertyChanges { target: factsView; opacity: 1 }
                    PropertyChanges { target: closeButton; opacity: 1 }
                    PropertyChanges { target: wrapper.ListView.view;
                                      contentY: wrapper.y;
                                      interactive: false }
                }
            ]

            transitions: //设置状态转变的动画
            [
                Transition
                {
                    NumberAnimation//其值为数值类型的动画
                    {
                        duration: 200;
                        properties: "height,
                                     width,
                                     anchors.rightMargin,
                                     anchors.topMargin,
                                     opacity,
                                     contentY"
                    }
                }
            ]
        }
    }
}

原理也简单，代理默认按组件设置排布，点击相应的位置切换状态改变各子项的属性。