December 13, 2010

hyperborean72 hyperborean72
Lab Rat
10 posts

Transparency of Flickable (and Border Merge)

 

Sorry guys if my issue have been discussed before but honestly I did not find any direct reference to my case.

1. My problem is that I do not see how to put any nice background (png or QML Gradient) under Flickable (or its descendant).

This is my simplified qml-view:

  1. Rectangle {    
  2.     id: myScene
  3.     anchors.fill: parent
  4.  
  5.     gradient: Gradient {
  6.         GradientStop { position: 0.0; color: "#E9E9E9" }
  7.         GradientStop { position: 1; color: "#AAA" }
  8.     }
  9.  
  10. <here goes some toolbar; height: 55>
  11.  
  12. Rectangle {
  13.         id: mainScreen
  14.         width: parent.width
  15.         height: parent.height - 55
  16.  
  17.         ListModel {id: friendsModel...}
  18.  
  19.         Item {
  20.             id: listItemWrapper
  21.             width: parent.width; height:40
  22.             Component {
  23.                 id: myDelegate
  24.                 Item {
  25.                     id: wrapper
  26.                     width: friends.width; height: 39
  27.                     Column {
  28.                         Item{
  29.                             Text {
  30.                                 text: "First/last name: "+firstName+" "+lastName
  31.                                 font { family: "Times"; pixelSize: 20; }
  32.                                 id:name
  33.                             }
  34.                             Text {
  35.                                 text: "Email: "+email
  36.                                 font { family: "Times"; pixelSize: 16; }
  37.                                 anchors.top: name.bottom
  38.                                 anchors.topMargin:-2
  39.                             }
  40.                         }
  41.                     }
  42.             ListView {
  43.             id: friends
  44.             anchors {fill: parent; leftMargin:40; rightMargin: 40; topMargin: 5; bottomMargin: 5}
  45.             model: friendsModel
  46.             delegate: myDelegate
  47.             highlight: Rectangle {
  48.                 width: friends.currentItem.width
  49.                 color: "lightsteelblue"
  50.                 radius: 5
  51.             }
  52.             focus: true
  53.             MouseArea {
  54.                 anchors.fill: parent
  55.                 onClicked: {
  56.                     friends.currentIndex = friends.indexAt(mouseX, mouseY)
  57.                 }
  58.             }
  59.             clip: true
  60.             flickDeceleration: 1000
  61.             //boundsBehavior: Flickable.DragOverBounds
  62.         }
  63.     }

BUT … I do not see gradient. Just a a plain white rectangle filling ‘mainScreen’ :(

2. Another minor issue I would like to ask your advice:
is it possible to merge borders of the adjacent item inside Column/Row when spacing:0

Thank you in advance

4 replies

December 13, 2010

mario mario
Lab Rat
240 posts
  • Certified developer
  • Groupie L1

Wild guess, try color: “transparent” on the mainscreen rectangle.

December 13, 2010

Bradley Bradley
Lab Rat
314 posts
  • Certified Specialist
  • Certified developer

Try this. Although the transparent color setting also works, I changed the mainScreen Rectangle to an Item instead, which also works. I also had to reparent the friends ListView to the listItemWrapper rather than inside the myDelegate Item.

  1. import QtQuick 1.0
  2.  
  3. Item {
  4.     width:  300
  5.     height: 300
  6.  
  7.  
  8.     Rectangle {
  9.         id: myScene
  10.         anchors.fill: parent
  11.  
  12.         gradient: Gradient {
  13.             GradientStop { position: 0.0; color: "#E9E9E9" }
  14.             GradientStop { position: 1; color: "#AAA" }
  15.         }
  16.  
  17.  
  18.         Item {
  19.             id: mainScreen
  20.             width: parent.width
  21.             height: parent.height - 55
  22.  
  23.             ListModel {
  24.                 id: friendsModel
  25.                 ListElement {
  26.                     firstName: "First"
  27.                     lastName: "Friend"
  28.                     email: "first@friend"
  29.                 }
  30.                 ListElement {
  31.                     firstName: "Second"
  32.                     lastName: "Friend"
  33.                     email: "second@friend"
  34.                 }
  35.                 ListElement {
  36.                     firstName: "Third"
  37.                     lastName: "Friend"
  38.                     email: "third@friend"
  39.                 }
  40.             }
  41.  
  42.             Item {
  43.                 id: listItemWrapper
  44.                 width: parent.width; height:40
  45.                 anchors.fill: parent
  46.                 Component {
  47.                     id: myDelegate
  48.                     Item {
  49.                         id: wrapper
  50.                         width: friends.width; height: 39
  51.                         Column {
  52.                             Item{
  53.                                 Text {
  54.                                     text: "First/last name: "+firstName+" "+lastName
  55.                                     font { family: "Times"; pixelSize: 20; }
  56.                                     id:name
  57.                                 }
  58.                                 Text {
  59.                                     text: "Email: "+email
  60.                                     font { family: "Times"; pixelSize: 16; }
  61.                                     anchors.top: name.bottom
  62.                                     anchors.topMargin:-2
  63.                                 }
  64.                             }
  65.                         }
  66.                     }
  67.                 }
  68.                 ListView {
  69.                     id: friends
  70.                     anchors {
  71.                         fill: parent;
  72.                         leftMargin: 40;
  73.                         rightMargin: 40;
  74.                         topMargin: 5;
  75.                         bottomMargin: 5
  76.                     }
  77.                     model: friendsModel
  78.                     delegate: myDelegate
  79.                     highlight: Rectangle {
  80.                         width: friends.currentItem.width
  81.                         color: "lightsteelblue"
  82.                         radius: 5
  83.                     }
  84.                     focus: true
  85.                     MouseArea {
  86.                         anchors.fill: parent
  87.                         onClicked: {
  88.                             friends.currentIndex = friends.indexAt(mouseX, mouseY)
  89.                         }
  90.                     }
  91.                     clip: true
  92.                     flickDeceleration: 1000
  93.                     //boundsBehavior: Flickable.DragOverBounds
  94.                 }
  95.             }
  96.         }
  97.     }
  98. }

 Signature 

Nokia Certified Qt Specialist.

December 14, 2010

mbrasser mbrasser
Ant Farmer
452 posts
  • Troll
  • Qt Contributors’ Summit 2011
hyperborean72 wrote:
2. Another minor issue I would like to ask your advice: is it possible to merge borders of the adjacent item inside Column/Row when spacing:0

The borders should overlap by default; for example, the following should only show a 1px border between the Rectangles.

  1. import QtQuick 1.0
  2.  
  3. Rectangle {
  4.     width: 400; height: 400
  5.     Column {
  6.         spacing: 0
  7.         Repeater {
  8.             model: 6
  9.             delegate: Rectangle {
  10.                 width: 50; height: 50
  11.                 border.width: 1
  12.             }
  13.         }
  14.     }
  15. }

You could also try setting a negative number for spacing to see if that helps in your particular case.

Regards,
Michael

December 14, 2010

hyperborean72 hyperborean72
Lab Rat
10 posts

Thank you very much Michael, Mario and Bradley for your help.

Those issues are fixed.
Negative value for spacing worked.

Sorry, Bradley, for having missed closing brace.

 
  ‹‹ [Solved] Vertical ListView in horizontal ListView      Move Item in Flow by dragging and dropping ››

You must log in to post a reply. Not a member yet? Register here!

 
Selected by the fine Qt Content Robot based on tags and ratings.

Possibly related content

Wiki articles

Forum posts and FAQ