Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to change default highlight color of ListView in QML?
Forum Updated to NodeBB v4.3 + New Features

How to change default highlight color of ListView in QML?

Scheduled Pinned Locked Moved QML and Qt Quick
14 Posts 4 Posters 13.0k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • H Offline
    H Offline
    honeyhong
    wrote on last edited by
    #5

    [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.

    1 Reply Last reply
    0
    • M Offline
      M Offline
      mbrasser
      wrote on last edited by
      #6

      [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)

      1 Reply Last reply
      0
      • H Offline
        H Offline
        honeyhong
        wrote on last edited by
        #7

        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})
                }
            }
        }@
        
        1 Reply Last reply
        0
        • M Offline
          M Offline
          mbrasser
          wrote on last edited by
          #8

          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.

          1 Reply Last reply
          0
          • H Offline
            H Offline
            honeyhong
            wrote on last edited by
            #9

            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
            }
            }@

            1 Reply Last reply
            0
            • M Offline
              M Offline
              mbrasser
              wrote on last edited by
              #10

              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.

              1 Reply Last reply
              0
              • H Offline
                H Offline
                honeyhong
                wrote on last edited by
                #11

                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. :)

                1 Reply Last reply
                0
                • L Offline
                  L Offline
                  lahianim
                  wrote on last edited by
                  #12

                  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);
                  }

                  1 Reply Last reply
                  0
                  • H Offline
                    H Offline
                    honeyhong
                    wrote on last edited by
                    #13

                    [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. :)

                    1 Reply Last reply
                    0
                    • L Offline
                      L Offline
                      lahianim
                      wrote on last edited by
                      #14

                      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

                      1 Reply Last reply
                      0

                      • Login

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved