qml hight 设置

发现优快云上翻译的qml book 中得listview 实用的时候，highlight属性适用的时候没有效果，发现这么一篇文章可以帮助解决问题，不过效果并不很理想。但是还是有参考价值

QML提供有列表控件ListView，

最近在使用的时候还是发现Highlight属性比较奇怪，按着下面的例子：

[cpp]  view plain  copy

1. ListView{  
2.         id:listview;  
3.         anchors.fill: parent;  
4.         model:model;  
5.   
6.         highlight: Rectangle{  
7.             color: "lightsteelblue";  
8.             radius: 3;  
9.         }  
10.         highlightFollowsCurrentItem: true;  
11.         focus: true;  
12.   
13.         delegate:Item {  
14.             id: wrapper;  
15.             width: listview.width;  
16.             height: 30;  
17.             Rectangle{ /*1*/  
18.                 anchors.fill: parent;  
19.                 Text {  
20.                     text: name;  
21.                 }  

[cpp]  view plain  copy

1. <pre style="margin-top: 0px; margin-bottom: 0px;"><span style=" color:#ff8bff;"><span style="white-space:pre">        </span>MouseArea</span>{  

                    anchors.fill: parent;

                    onClicked: {

                        wrapper.ListView.view.currentIndex = index;

                    }

                }

} } }

效果却是这样的，根本没有highjlight效果：

解决方法一：

把代码中标记为/*1*/的Rectangle的颜色设置为"transparent"，效果如下：

解决方法二：

给highlight添加两个属性，使highlight变成：

highlight: Rectangle{

            color: "lightsteelblue";

            radius: 3;

            opacity: 0.5

            z:listview.z + 2;

        }

效果：

解决方法三：

如果只是为了标记当前选择的item，还有第三种方法：

删除掉highlight相关的：

highlight: Rectangle{

            color: "lightsteelblue";

            radius: 3;

            opacity: 0.5

            z:listview.z + 2;

        }

        highlightFollowsCurrentItem: true;

        focus: true;

不使用highlight了，设置标记为 /*1*/的Rectangle的颜色属性为：

[cpp]  view plain  copy

1. color: wrapper.ListView.isCurrentItem?"blue":bgcolor;  

于是变成了：

Rectangle{

                anchors.fill: parent;

                color: wrapper.ListView.isCurrentItem?"lightblue":"white";

                Text {

                    text: name;

                }

                MouseArea{

                    anchors.fill: parent;

                    onClicked: {

                        wrapper.ListView.view.currentIndex = index;

                    }

                }

            }

效果出来了：

方法一和方法二实现的高亮标记在变换的时候比较平滑，不会显得突兀。

方法三只是一种替代方法，在高亮的item改变的时候，会显得比较突然，不顺畅。