How to change default highlight color of ListView in QML?



  • Hey, I want to change the default highlight color when item in ListView is selected.
    The default color is blue. I want to change it to red. I googled, and i found QPalette.
    http://doc.qt.nokia.com/4.7-snapshot/qpalette.html

    QPalette::Highlight - A color to indicate a selected item or the current item. By default, the highlight color is Qt::darkBlue.
    QPalette::HighlightedText - A text color that contrasts with Highlight. By default, the highlighted text color is Qt::white.

    But i have no idea how to implement it. I found a few examples but I have no idea how to do it.
    @ QPalette p(palette());
    p.setColor(QPalette::Background, Qt::red);
    w->setAutoFillBackground(true);
    w->setPalette(p);@

    All I have is the default main.cpp

    @#include <QtGui/QApplication>
    #include "qmlapplicationviewer.h"
    #include "QPalette"

    Q_DECL_EXPORT int main(int argc, char *argv[])
    {
    QScopedPointer<QApplication> app(createApplication(argc, argv));

    QmlApplicationViewer viewer;
    viewer.setMainQmlFile&#40;QLatin1String("qml/Canon/main.qml"&#41;&#41;;
    viewer.showExpanded();
    return app->exec(&#41;;
    

    }@

    Im just a beginner, and I'm hoping some one can help me with it.



  • to implement it:
    in main.cpp:

    @#include <QtGui/QApplication>
    #include "qmlapplicationviewer.h"
    #include <QPalette>
    Q_DECL_EXPORT int main(int argc, char *argv[])
    {
    QScopedPointer<QApplication> app(createApplication(argc, argv));

    QmlApplicationViewer viewer;
    QPalette p;
    p.setColor(QPalette::Window, Qt::red);
    viewer.setAutoFillBackground(true);
    viewer.setPalette(p);
    viewer.setMainQmlFile&#40;QLatin1String("qml/untitled44/main.qml"&#41;);
    viewer.showExpanded();
    
    return app->exec&#40;&#41;;
    

    }
    @

    but it no changes the Highlight color only the blackground. for the Highlight change window and put Highlight, but it not works for me



  • Can you post the QML you are using for your ListView with highlight?



  • [quote author="tommyj23" date="1343995921"]to implement it:
    in main.cpp:

    @#include <QtGui/QApplication>
    #include "qmlapplicationviewer.h"
    #include <QPalette>
    Q_DECL_EXPORT int main(int argc, char *argv[])
    {
    QScopedPointer<QApplication> app(createApplication(argc, argv));

    QmlApplicationViewer viewer;
    QPalette p;
    p.setColor(QPalette::Window, Qt::red);
    viewer.setAutoFillBackground(true);
    viewer.setPalette(p);
    viewer.setMainQmlFile&#40;QLatin1String("qml/untitled44/main.qml"&#41;&#41;;
    viewer.showExpanded(&#41;;
    
    return app->exec&#40;&#41;;
    

    }
    @

    but it no changes the Highlight color only the blackground. for the Highlight change window and put Highlight, but it not works for me[/quote]

    Hey thank you for your reply. Now i know how to implement it. :)
    However, I tried the codes, but there is no changes with the background. When i change the Window to Highlight, it don't work either.



  • [quote author="mbrasser" date="1344221445"]Can you post the QML you are using for your ListView with highlight?[/quote]

    Here are my codes for the ListView
    @ ListView {
    id: list1
    anchors {
    left: parent.left
    right: parent.right
    top: parent.top
    bottom: parent.bottom
    rightMargin:8
    leftMargin:5
    topMargin: header.height + headBar.height + (window.height > 640 ? 270 : 210)
    }
    clip: true
    // highlight: Rectangle {width: parent.width; color: "DarkRed"}
    model: products1
    delegate: listDelegate1
    }@

    without the highlight set manually, the default color is blue. i have a lot of listView and i would like to change it all to red when selected, as the theme is red.



  • [quote author="honeyhong" date="1344223382"]
    without the highlight set manually, the default color is blue. i have a lot of listView and i would like to change it all to red when selected, as the theme is red.[/quote]

    Is this blue color perhaps coming from listDelegate1? (I don't think ListView should have any highlight component by default)



  • Is it? well i definitely didnt set anything.

    @ ListView {
    id: list1
    anchors {
    left: parent.left
    right: parent.right
    top: parent.top
    bottom: parent.bottom
    rightMargin:8
    leftMargin:5
    topMargin: header.height + headBar.height + (window.height > 640 ? 270 : 210)
    }
    clip: true
    // highlight: Rectangle {width: parent.width; color: "DarkRed"}
    model: products1
    delegate: listDelegate1
    }

    Component {
        id: listDelegate1
    
        Products1Item{
            icon_p1_item: icon1;
            category_p1_item: category1
    
            onClicked:
            {
                 Util.log("Clicked on " + products2 + " product1")
                 Util.log("Selected feed item" + products2);
                 pageStack.push(Qt.resolvedUrl("Products2.qml"),{itemUrl2:products2, itemTitle2:category1})
            }
        }
    }@


  • Does the implementation of Products1Item set a color when pressed, or similar? One way to test where it is coming from would be to replace listDelegate1 with a simple Text item, and see if you still get any default highlight color showing.



  • Hey mbrasser, really? I didn't know that. However, I tested like you said, replaced listDelegate1 with simple Text, yeah there is blue color showing. In my Products1Item, I did not set any color when pressed, only the settings for the text to show out.
    In all my ListView, when selected, there are blue color highlight, even though I did not set any highlight.
    What about Back button? The back button also have default blue color when selected.

    @//Products1Item
    ListItem {
    id: container
    property string icon_p1_item: "no ICON"
    property string category_p1_item: "no CATEGORY"

    signal clicked
    
    width: parent.width
    height: Math.max(54, Math.max((icon.itemTextHeight),(category.itemTextHeight)))
    clip: true
    

    Image {
    id: icon
    property int itemTextHeight: height + anchors.topMargin + anchors.bottomMargin
    source: container.icon_p1_item
    width: window.width > 360 ? 160 : 140
    height: window.height > 640 ? 120 : 100
    }

    Text {
    id: category
    property int itemTextHeight: height + anchors.topMargin + anchors.bottomMargin
    anchors
    {
    left:icon.right;
    verticalCenter:parent.verticalCenter;
    leftMargin:10
    }
    font {
    family: "Helvetica"
    bold: false
    }
    font.pixelSize: window.height > 640 ? 30 : 23;
    color: "white"
    text: container.category_p1_item
    wrapMode: Text.WordWrap
    }
    }@



  • Here's a very simple ListView example -- this one should not show any blue highlights:
    @
    ListView {
    width: 400; height: 400
    model: 10
    delegate: Text { text: "item " + index }
    }
    @

    The blue highlight is most likely coming from the ListItem. See for example the documentation here: http://doc.qt.nokia.com/qt-components-symbian/qml-listitem.html#listitem-states

    I'm not very familiar with Qt Components, but they may provide some method of styling/theming that would allow you to change the default highlight color.



  • You are right mbrasser. It came from the ListItem. Thank you for correcting me. :)
    Any idea how to change it to red when pressed without tampering with the library? I will google from here and see what I can get. :)



  • if I understanding your question right, you want to change the selected item background.
    in that case why not using the highlight property in the ListView as follow
    @
    Component {
    id: my_highlight
    Rectangle {
    width: 180; height: 40
    color: "red";
    }
    }

    ListView {
    id: list1
    width: 180; height: 200
    model: ContactModel {}
    delegate: Text { text: name }

     highlight: my_highlight
     highlightFollowsCurrentItem: false
     focus: true
    

    }
    @

    or if you use stylesheet in your application try adding

    QListView::item:selected
    {
    background-color: rgb(222,239,242);
    }



  • [quote author="lahianim" date="1344512535"]if I understanding your question right, you want to change the selected item background.
    in that case why not using the highlight property in the ListView as follow
    @
    Component {
    id: my_highlight
    Rectangle {
    width: 180; height: 40
    color: "red";
    }
    }

    ListView {
    id: list1
    width: 180; height: 200
    model: ContactModel {}
    delegate: Text { text: name }

     highlight: my_highlight
     highlightFollowsCurrentItem: false
     focus: true
    

    }
    @

    or if you use stylesheet in your application try adding

    QListView::item:selected
    {
    background-color: rgb(222,239,242);
    }

    [/quote]

    Thank you for your reply. Yeah that is what I want. Because I have a lot of listView in my app. So wondering if there is any method that I could use to change all of it at once. I do not use style sheet, however I can give it a try. :)



  • i think the better way to do it is to "inherits" the ListView and set the highlight to be as you wish and from now on use your class instead of the QML ListView.
    somethink like:

    MyListView.qml
    @

    property int mItemWidth : 0
    property int mItemHeight : 0

    ListView{
    id: my_listView
    highlight: my_highlight
    }

    Component {
    id: my_highlight
    Rectangle {
    width: mItemWidth;
    height: mItemHeight;
    color: "red";
    }
    }

    @

    and now when you want to use a ListView include the MyListView.qml file
    and use the MyListView
    @
    MyListView{
    id: my_ListView
    width: 180
    height: 200
    mItemWidth: 180
    mItemHeight: 40
    model: my_model
    delegate: my_delegate
    }
    @
    and that all


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.