QML ListView 属性小例 一 Highlight

QML ListView 属性小例 一 Highlight

此博客始创于：http://blog.csdn.net/lys211

转载请注明出处

QML提供有列表控件ListView，

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

ListView{
        id:listview;
        anchors.fill: parent;
        model:model;

        highlight: Rectangle{
            color: "lightsteelblue";
            radius: 3;
        }
        highlightFollowsCurrentItem: true;
        focus: true;

        delegate:Item {
            id: wrapper;
            width: listview.width;
            height: 30;
            Rectangle{ /*1*/
                anchors.fill: parent;
                Text {
                    text: name;
                }

<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的颜色属性为：

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改变的时候，会显得比较突然，不顺畅。