QML的ListView记录

1、ListView用作消息显示

ListView{
    anchors.top: orderBill.bottom    // 排版衔接上一个控件布局
    width: parent.width
    height: parent.height - orderBill.height - 20
    clip: true        // 窗口之外的隐藏显示
    model: listModel    // 数据来源 
    delegate: delegate    // 代理id
    spacing: 5            // 每行间隔、类似word的行距
    ListModel{  //数据模型
        id:listModel
        ListElement{
            flag:"1"
            str:""
        }
    }
    Component{     //代理
        id:delegate
        Rectangle {    // 方块、矩形
            width: parent.width
            height: ye.height > 30 ? ye.height:30    // 多行显示时按实际高度
            color: flag == "1" ? "Green" : "red"
            Text {
                id:ye
                anchors.centerIn: parent 
                font.pixelSize: 18    // 设定字号
                text: str
                color: flag == "1" ? "white" : "black"
                wrapMode: Text.WordWrap    // 自动换行，必须有width宽度才起作用
                width: parent.width
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment:  Text.AlignVCenter
            }    // text
        }    // Rectangle
    }    // Component
    // 鼠标事件覆盖
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {    // 点击事件
            itemListView.currentIndex = index
        }
        onEntered: {    // 鼠标进入事件，鼠标悬浮在listView行（进入新行）
            tempcolor = "#a7e094"
        }
        onExited: {    // 鼠标切出事件，鼠标悬浮切出listView的行（切到另一行或者切出listview）
            tempcolor = "transparent"
        }
    } // MouseArea
}    // listview

调用方式：

/*
第一个0：表示插入位置，最上方插入，便于查看
{}：属于ListMode的消息结构体，需在List View的模型中定义好
“flag":"0": 代表自定义的0值作用，当前0表示红底黑色的配置，1表示绿底白字的配置，其他值未定义且默认为0的效果
*/
listModel.insert(0, {"flag":"0", "str":"显示消息"});