November 18, 2010

jech jech
Ant Farmer
128 posts

Four column UI

 

Hello,

I’m trying to do a UI part, that would consist of 4 vertical lists. But only 2 of them will be visible at the same time. Please have a look at this picture:
Layout

I tried to do it using Flickable for horizontal movement and List View for the vertical lists. But I found two problems I can’t solve.

1) When scrolling List View, it moves over other UI elements. I don’t want this, the List View shouldn’t overlap it’s parent element (which is the Flickable)

2) The Flickable works OK, but I need it to snap to borders of the Vertical Lists. I haven’t found any possibility to do that. Do I need to code this manually in JavaScript or is there another option?

Thank you.

10 replies

November 18, 2010

2beers 2beers
Lab Rat
149 posts

based on your scheme the best thing is to use 2 ListView . One for horizontal movement and the other for vertical. Every element in horizontal ListView is a vertical ListView with witdth= screenSize/2

If you want to snap to the borders you do on horizonatal ListView:

  1. highlightRangeMode: ListView.StrictlyEnforceRange
  2.         orientation: ListView.Horizontal
  3.         snapMode: ListView.SnapOneItem;

Let me know if this helps you

November 18, 2010

jech jech
Ant Farmer
128 posts

Thank you! After some problems I basically managed to do what I intended. Except of one thing – the overlapping List View. I’ll illustrate that on one simple example:

file: test.qml

  1. import Qt 4.7
  2.  
  3. Rectangle {
  4.     id: main
  5.     width: 640
  6.     height: 360
  7.     color: "#343434"
  8.  
  9.     Rectangle {
  10.         id: rectangle1
  11.         x: 110
  12.         y: 53
  13.         width: 421
  14.         height: 255
  15.         color: "#888888"
  16.  
  17.         LibraryList { width: 320; anchors.bottom: parent.bottom; anchors.left: parent.left; anchors.top: parent.top }
  18.     }
  19. }

file: LibraryList.qml

  1. import Qt 4.7
  2.  
  3. Item {
  4.     ListModel {
  5.         id: contactModel
  6.         ListElement {
  7.             name: "Bill Smith"
  8.             number: "555 3264"
  9.         }
  10.         ListElement {
  11.             name: "John Brown"
  12.             number: "555 8426"
  13.         }
  14.         ListElement {
  15.             name: "Sam Wise"
  16.             number: "555 0473"
  17.         }
  18.         ListElement {
  19.             name: "Bill Smith"
  20.             number: "555 3264"
  21.         }
  22.         ListElement {
  23.             name: "John Brown"
  24.             number: "555 8426"
  25.         }
  26.         ListElement {
  27.             name: "Sam Wise"
  28.             number: "555 0473"
  29.         }
  30.         ListElement {
  31.             name: "Bill Smith"
  32.             number: "555 3264"
  33.         }
  34.         ListElement {
  35.             name: "John Brown"
  36.             number: "555 8426"
  37.         }
  38.         ListElement {
  39.             name: "Sam Wise"
  40.             number: "555 0473"
  41.         }
  42.         ListElement {
  43.             name: "Bill Smith"
  44.             number: "555 3264"
  45.         }
  46.         ListElement {
  47.             name: "John Brown"
  48.             number: "555 8426"
  49.         }
  50.         ListElement {
  51.             name: "Sam Wise"
  52.             number: "555 0473"
  53.         }
  54.         ListElement {
  55.             name: "Bill Smith"
  56.             number: "555 3264"
  57.         }
  58.         ListElement {
  59.             name: "John Brown"
  60.             number: "555 8426"
  61.         }
  62.         ListElement {
  63.             name: "Sam Wise"
  64.             number: "555 0473"
  65.         }
  66.         ListElement {
  67.             name: "Bill Smith"
  68.             number: "555 3264"
  69.         }
  70.         ListElement {
  71.             name: "John Brown"
  72.             number: "555 8426"
  73.         }
  74.         ListElement {
  75.             name: "Sam Wise"
  76.             number: "555 0473"
  77.         }
  78.     }
  79.  
  80.     Component {
  81.         id: contactDelegate
  82.         Item {
  83.             width: parent.width; height: 40
  84.             Column {
  85.                 Text { text: '<b>Name:</b> ' + name }
  86.                 Text { text: '<b>Number:</b> ' + number }
  87.             }
  88.         }
  89.     }
  90.  
  91.     ListView {
  92.         anchors.fill: parent
  93.         model: contactModel
  94.         delegate: contactDelegate
  95.         highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
  96.         focus: true
  97.     }
  98. }

I want to keep the List View inside the light square. But if I drag the list, it overlaps it.

If you wish, you can download the test files here [mediafire.com]

I just started playing with QML yesterday, so I’m probably doing some stupid things…

November 18, 2010

2beers 2beers
Lab Rat
149 posts

hi. based on your example I don;t see how you can move the list horizontal. as you for the listview to be inside the square just add:
clip:true;

  1.  LibraryList { clip:true; width: 320; anchors.bottom: parent.bottom; anchors.left: parent.left; anchors.top: parent.top }

November 18, 2010

2beers 2beers
Lab Rat
149 posts

regarding your first post I modified you code. hope this is what you are looking for. try to move horizontal :)

here is the code: http://www.mediafire.com/?p952×8mpipz68oz

November 18, 2010

jech jech
Ant Farmer
128 posts

Thank you. The example was only meant to show the overlapping problem.

I already solved the horizontal scrolling in a similar way as in your example. But your code is better. Thanks a lot for your help!

November 19, 2010

jech jech
Ant Farmer
128 posts

If I could have one more question, there’s still one thing which isn’t clear to me. How do I enable the behavior that if I click an item in a List View, the item gets selected and highlighted?

I studied all the examples and documentation, but I couldn’t find the answer. So far it seems to me, that I will have to code an “onClicked” signal handler that will take care of it. But I believe the List View component should be able to handle this automatically. I managed to enable selection change by keyboard arrows, but not by mouse click.

November 19, 2010

2beers 2beers
Lab Rat
149 posts

I think you need to do a MouseArea for delegated component also keep a property with the index number.

than you do something like this:

onClicked: myListView.index=componentIndex

Not sure if it’s a predefined way of doing this.

January 26, 2011

Arek Arek
Lab Rat
2 posts

Digging this out because the clicking issue is very important and hasn’t been fully answered.

I’m starting to play with QML right now and this is the solution I’ve found.

My delegate is somewhat simpler but it shows the idea. ListView adds a “ListView” property to the delegates. This property has a “view” attribute that points to the ListView component. Of course this could be replaced with an identifier if the ListView has one. Now, the trick is to use indexAt() with delegate position to get the index and set that to currentIndex. That’s it, items can be clicked now and the highlight will move to them.

  1. delegate: Text {
  2.             text: name + ": " + number
  3.  
  4.             MouseArea {
  5.                 anchors.fill: parent
  6.                 onClicked: {ListView.view.currentIndex = ListView.view.indexAt(parent.x, parent.y)}
  7.             }
  8.         }

January 26, 2011

jech jech
Ant Farmer
128 posts

You can use “index” property of your delegate, it’s better IMO. Simply replace ListView.view.indexAt(parent.x, parent.y) with just index.

January 27, 2011

Arek Arek
Lab Rat
2 posts

Even better, thanks.

I think we’re missing some tutorials on QML. There is no place (at least I don’t see one) where you could find such information, apart from looking at API reference and trying to put something together yourself.

It actually gets worse than that, this wiki page on Forum Nokia suggest a totally akward and verbose solution:
http://wiki.forum.nokia.com/index.php/Using_QML_ListView

 
  ‹‹ MouseArea.hoverEnabled not working?      Replace a moved element into a Flow ››

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