Rectangle {
x:10
y:20
width: 200; height: 300
anchors.rightMargin: 4
anchors.bottomMargin: 4
anchors.leftMargin: 4
anchors.topMargin: 4
anchors.fill: parent
ColumnLayout
{
//clip: true
spacing: 2
anchors.fill: parent
Rectangle
{
//color:"yellow"
Layout.fillWidth: true
Layout.fillHeight: true
RowLayout {
anchors.fill: parent
Rectangle
{
Layout.fillWidth: true
Layout.fillHeight: true
ListView {
id:idLogListView
focus:true
//Keys.enabled: true
//highlightRangeMode: ListView.ApplyRange
anchors.fill: parent
highlight: Rectangle { color: "#00CED1" }
model: idListModle
delegate: Component
{
RowLayout {
id:idlistElemnet
height: 20
width: 250
spacing: 20
Layout.fillWidth: true
Rectangle {height: 16
width: 16
radius: 5
color:getListEleHeadColor(type)
Text{ anchors.centerIn: parent}
}
Text { text: time; font.bold: true}
Text { text:type }
Text { text:descripe; color:"blue" ; Layout.fillWidth: true}
//states,transitions主要用于特效的效果
states: State {
name: "Current"
when: idlistElemnet.ListView.isCurrentItem
PropertyChanges { target: idlistElemnet; x: 20 }
}
transitions: Transition {
NumberAnimation { properties: "x"; duration: 200 }
}
MouseArea {
anchors.fill: parent
//这里实现的的点击选中
onClicked:
{
idlistElemnet.ListView.view.currentIndex = index
getItem(descripe);//这里调用js函数将选定对象的值传给js函数
}
}
}
}
//界面完成时设置listview的值
Component.onCompleted:
{
for(var idx=0;idx<10;idx++)
{
var newType=parseInt((Math.random(Math.random())*100+1)%3);
//idListModle.append( { "descripe": idRootPriv.m_vm.m_str[idx],"time": "2017-1-24"});
}
}
}
ListModel {
id:idListModle
ListElement {
descripe: "项目."
time: "2017-1-24"
}
}
}
Rectangle
{
Layout.fillHeight: true
// 滚动条
id: scrollbar
width: 10;
height: 200
color: "#D9D9D9"
radius: 10
// 按钮
Rectangle {
id: button
x: 0
y: idLogListView.visibleArea.yPosition * scrollbar.height
width: 10
height: idLogListView.visibleArea.heightRatio * scrollbar.height;
color: "#979797"
radius: 10
// 鼠标区域
MouseArea {
id: mouseArea
anchors.fill: button
drag.target: button
drag.axis: Drag.YAxis
drag.minimumY: 0
drag.maximumY: scrollbar.height - button.height
// 拖动
onMouseYChanged: {
idLogListView.contentY = button.y / scrollbar.height * idLogListView.contentHeight
}
}
}
}
}
}
Rectangle
{
Layout.preferredHeight: 40
Layout.fillWidth: true
Layout.minimumHeight:40
}
}
function getListEleHeadColor(ntype)
{
switch(ntype)
{
case 0:
return "lightblue"
case 1:
return "red";
case 2:
return "yellow";
case 3:
return "green";
default:
return "black";
}
}
}
//这里加载的数据。自己定义了一个按钮来调用这个函数将数据加载到listview中
function add_list_text() {
for(var i=0;i<14;i++)
{
var newType=parseInt((Math.random(Math.random())*100+1)%3);
idListModle.append( { "descripe": idRootPriv.m_vm.get_m_str(i),"time": "2017-1-24"});
}
}
